css全局样式
排版
标题
HTML 中的所有标题标签,<h1>
到 <h6>
均可使用。另外,还提供了 .h1
到 .h6
类,为的是给内联(inline)属性的文本赋予标题的样式。
在标题内还可以包含 <small>
标签或赋予 .small
类的元素,可以用来标记副标题。
<h1 class="small">h1. Bootstrap heading <small class="h1">Secondary text</small></h1> <h2 class="small">h2. Bootstrap heading <small class="h2">Secondary text</small></h2> <h3 class="small">h3. Bootstrap heading <small class="h3">Secondary text</small></h3> <h4 class="small">h4. Bootstrap heading <small class="h4">Secondary text</small></h4> <h5 class="small">h5. Bootstrap heading <small class="h5">Secondary text</small></h5> <h6 class="small">h6. Bootstrap heading <small class="h6">Secondary text</small></h6>
页面主体
内联文本元素
为了突出显示与另一个上下文中相关的文本,可以使用<mark>标记。
You can use the mark tag to <mark>highlight</mark> text.
对于被删除的文本使用 <del>
标签。
<del>This line of text is meant to be treated as deleted text.</del>
为文本添加下划线,使用 <u>
标签。
<u>This line of text will render as underlined</u>
通过增加 font-weight 值强调一段文本
<strong>rendered as bold text</strong>
用斜体强调一段文本。
<em>rendered as italicized text</em>
对齐
通过文本对齐类,可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
改变大小写
通过这几个类可以改变文本的大小写
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
按钮
禁用状态
disabled
属性,使其表现出禁用状态。
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
图片
图片形状
通过为 <img>
元素添加以下相应的类,可以让图片呈现不同的形状。
<img src="..." alt="..." class="img-rounded">//方形 <img src="..." alt="..." class="img-circle">//圆形 <img src="..." alt="..." class="img-thumbnail">//方形带边框