排版#
Bootstrap提供了 .h1 ~ .h6 六种class属性可以使p标签看起来像h1, 这种标题标签效果一样
<div class="container"> <!--.row限制一行--> <div class="no-gutters"> <div class="h1">Bootstrap</div> <h1>Bootstrap</h1> </div> </div>
效果图:
- 自定义标题和副标题
使用 <small> </small> 小号字体
<div class="container"> <!--.row限制一行--> <div class="no-gutters"> <div class="h1"> Bootstrap <small class="text-muted">Bootstrap</small> </div> </div> </div>
效果:
更大的标题#
<div class="no-gutters"> <div class="h1">Bootstrap</div> <div class="h2">Bootstrap</div> <div class="h3">Bootstrap</div> <div class="h4">Bootstrap</div> <div class="display-1">Bootstrap</div> <div class="display-2">Bootstrap</div> <div class="display-3">Bootstrap</div> <div class="display-4">Bootstrap</div> </div>
突出显示某一段
<div class="no-gutters"> <div>Bootstrap</div> <div class="lead">Bootstrap</div> <div>Bootstrap</div> <div>Bootstrap</div> </div>
文本内联元素#
<div class="no-gutters"> <p><mark>Bootstrap</mark></p> <p class="mark">Bootstrap</p> <p><small>小号字体</small></p> <p><del>删除线</del></p> <p><s>删除线</s></p> <p><ins>下划线</ins></p> <p><u>下划线</u></p> <p><strong>加粗</strong></p> <p><b>加粗</b></p> <p><em>斜体</em></p> <p><i>斜体</i></p> </div>
效果:
缩略语#
abbr 标签可以实现缩略语的功能 (abbreviation)
<div class="no-gutters"> <p><abbr title="this is Bootstrap"></abbr>Bootstrap</p> </div>
引用类型#
主要有下面的几个样式 .blockquote .blockquote-footer
cite标签用于引用和文献
<div class="no-gutters"> <blockquote class="blockquote text-right"> <p class="mb-0"> 自己不能胜任的事情，切莫轻易答应别人，一旦答应了别人，就必须实践自己的诺言。</p> <footer class="blockquote-footer">某出版社 <cite title="Source Title">华盛顿</cite></footer> </blockquote> </div>
效果如下:
列表#
可以使用 .list-unstyled ul li列表上默认的 list-style样式, 但是不会影响到 li中 嵌套的ul li
<ul class="list-unstyled"> <li>Bootstrap</li> <li>Bootstrap</li> <li>Bootstrap</li> </ul>
列表的分行和多行并排#
混合使用 .list-inline 和 .list-inline-item
<ul class="list-inline"> <li class="list-inline-item">Bootstrap</li> <li class="list-inline-item">Bootstrap</li> <li class="list-inline-item">Bootstrap</li> </ul>
水平表格#
<dl class="row"> <dt class="col-sm-4">标题</dt> <dd class="col-sm-8">内容</dd> <dt class="col-sm-4 text-truncate">我的标题我的标题我的标题我的标题我的标题我的标题我的标题</dt> <dd class="col-sm-8">内容</dd> <dd class="col-sm-8"> <dl class="row"> <dt class="col-sm-4">姓名</dt> <dd class="col-sm-8">张三</dd> </dl> </dd> </dl>
.dl 定义一个水平表格
.dt 定义水平表格的标题
.dd 定义水平表格的内容
.text-truncate 当文本过长时, 可以阶段, 用 ... 显示
效果图:
代码块#
code 标签中有什么内容, 就会在浏览器上显示什么内容, 包括换行, 空格等等
<div class="row"> <pre> <code> Hello ... world </code> </pre> </div>
Var变量#
var标签会让表达式看起来更加优雅
y= mx+b <br> <var>y</var> = <var>mx</var> + <var>b</var>
标识键盘输入事件#
<kbd>cd</kbd> <kbd>ctrl</kbd>
