bootstrap学习笔记<二>(标题,段落样式)
2024-08-27 18:27:21
标题。样式:class="h1"~class="h6"
bootstrap中重新定义了h1~h6标签,具体差别如下:
在bootstrap中其他任何标签使用class="h1"~class="h6"都可以实现h1~h6的标题效果。
<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6> <!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div> <p class="h1">title</p>
副标题。标签:<small></small>
bootstrap还提供了副标题功能
副标题标签为<small></small>
<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5>
<h6>Bootstrap标题六<small>我是副标题</small></h6>
注意:small标签仅在h1~h6标签之内才生效副标题效果。
段落<p>标签
bootstrap对<p>标签也进行了优化,让段落更分明。
这里就不做演示。
强调效果。样式class="lead"
该样式会将文字字体相对同等标签放大。
<p>我是普通文本,我的样子长成这样我是普通文本</p> <p class="lead">
我是特意要突出的文本,我的样子成这样。我是特意要突出的文本。
</p>
强调相关类
bootstrap为文字,按钮等元素提供多样的颜色警示和强调。
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(#a94442)
同样primary,success,info,warning,danger这些强调警示颜色也能用在其他元素,如:but
<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>
最新文章
- Java定时任务的常用实现
- TortoiseSVN安装使用(转)
- Mybatis Generator insert useGeneratedKeys keyProperty
- linux系统的目录讲解
- HTML5桌面通知(Web Notifications)实例解析
- 转:二十七、Java图形化界面设计——容器(JFrame)
- mysql创建存储过程中的问题
- 获取mysqli函数的值和字段名
- C++11于once_flag,call_once分析的实现
- Django 在Django项目里单独运行某个py文件
- [Spark]如何设置使得spark程序不输出 INFO级别的内容
- LeetCode算法题-Remove Duplicates from Sorted List
- 如何下载google play商店里面的app?
- 从0开始安装fedora23的笔记-- 以及使用fedora的常规问题-3
- 三:使用docker-machine安装虚拟机上的docker
- 35. CentOS-6.3安装拼音输入法
- enter快捷键盘
- 用Matlab实现字符串分割(split)
- [19/04/04-星期四] IO技术_CommonsIO(通用IO,别人造的轮子,FileUtils类 操作文件 &; IOUtilsl类 操作里边的内容 )
- IIS 6.0 发布网站使用教程