基本HTML元素的风格和可扩展的属性.
从 <h1>
到 <h6>
所有的HTML标题都是可用的.
Bootstrap全局默认 font-size
是 14px, line-height
为 20px. 这应用在 <body>
和所有段落. 此外, <p>
(段落) 里的行与行之间的间隙为line-height的一半 (即默认10px).
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<p>...</p>
要突出一个段落只需加 .lead
.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
<p class="lead">...</p>
排版规模是在variables.less这2个LESS变量: @baseFontSize
and @baseLineHeight
的基础上. 第一个是贯穿整个font-size, 第二个是line-heightThe. 我们使用这些变量和一些简单的数值来创建margin, padding, 和 line-height 等等类型.
使用了HTML默认的轻量级风格的强调标签.
<small>
强调内嵌和文本块, 使用小标签.
This line of text is meant to be treated as fine print.
<p> <small>This line of text is meant to be treated as fine print.</small> </p>
用font-weight强调一小段文字.
The following snippet of text is rendered as bold text.
<strong>rendered as bold text</strong>
用 斜体 强调一小段文字.
The following snippet of text is rendered as italicized text.
<em>rendered as italicized text</em>
注意! 在HTML5可随意使用 <b>
和 <i>
. <b>
是为了突出词或短语, 而不会有其他重要含义, 而 <i>
提供主要是语态, 专业术语等含义.
通过一些颜色属性来强调.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
参照在鼠标悬停在缩写和缩写词就显示完整内容的HTML的<abbr>
元素. abbr元素带有 title
属性之后, 缩写的部分的底部会有一条虚线, 并且鼠标悬停在上面会有一个“帮助”符号, 同时还会显示title所提供的内容.
<abbr>
如想看完整文字可把鼠标悬停在缩写词, 但需要包含 title
属性.
An abbreviation of the word attribute is attr.
<abbr title="attribute">attr</abbr>
<abbr class="initialism">
如需对缩写词字体大小稍微缩小, 可添加 .initialism
.
HTML is the best thing since sliced bread.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
让联系信息最接近原始格式的形式呈现.
<address>
换行使用 <br>
.
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">[email protected]</a> </address>
在你的文档中引用其他来源的内容.
把任何 HTML 嵌套在 <blockquote>
里面即可. 对于直接的引用, 我们建议使用 <p>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>
在标准的引用里, 可以很简单的改变风格和内容.
添加 <small>
标签来注明引用的来源. 来源标题可以放在这个 <cite>
标签里面.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <small>Someone famous <cite title="Source Title">Source Title</cite></small> </blockquote>
使用 .pull-right
属性, 可让引用向右靠齐.
<blockquote class="pull-right"> ... </blockquote>
用于没有明确信息的列表.
<ul> <li>...</li> </ul>
用于有明确或需按序号排序的信息的列表.
<ol> <li>...</li> </ol>
用于不需要列表样式
的列表里.
<ul class="unstyled"> <li>...</li> </ul>
使用 inline-block
让列表项水平排列一行, 同时每项之间都有一定的间距.
<ul class="inline"> <li>...</li> </ul>
对一个(条款)列表进行关联描述.
<dl> <dt>...</dt> <dd>...</dd> </dl>
使用<dl>
把列表和对其的描述一对一横向显示.
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl>
注意!
横向描述通过text-overflow
会对过长而无法在左栏中完全显示的列名截断掉一部分. 而在较窄的视口(宽度)中, 会改变成垂直(形式)表述, 来适应当前屏幕.
把一小段代码内嵌到 <code>
标签.
<section>
should be wrapped as inline.
For example, <code><section></code> should be wrapped as inline.
使用 <pre>
放入多行代码. 为了能正确渲染, 在代码中一定要避免使用任何尖括号.
<p>Sample text here...</p>
<pre> <p>Sample text here...</p> </pre>
注意! 因为在 <pre>
标签里, tab会被算进去, 所以要保持代码尽可能的靠左侧; tags as close to the left as possible; it will render all tabs.
你也可以添加 .pre-scrollable
把该区域设置成最大高度为350px和一个Y轴滚动条.
基本styling—light padding 和 水平分隔符 — 在任意 <table>
添加 .table
即可.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table"> … </table>
基于 .table
添加以下任何属性.
.table-striped
在 <tbody>
行内, 通过:nth-child
CSS选择器(不支持IE7-8)添加条纹状.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped"> … </table>
.table-bordered
添加边框和圆角.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
Mark | Otto | @TwBootstrap | |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-bordered"> … </table>
.table-hover
在 <tbody>
内使用停悬(hover)效果.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-hover"> … </table>
.table-condensed
单元格padding减半, 让表格更加紧凑.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table class="table table-condensed"> … </table>
使用情景(contextual)属性在表格中添加颜色.
Class | Description |
---|---|
.success
|
表示成功或积极的行为. |
.error
|
表示一个危险或存有潜在危险的作用. |
.warning
|
表示警告, 可能需要注意的作用. |
.info
|
作为一个信息的默认样式. |
# | Product | Payment Taken | Status |
---|---|---|---|
1 | TB - Monthly | 01/04/2012 | Approved |
2 | TB - Monthly | 02/04/2012 | Declined |
3 | TB - Monthly | 03/04/2012 | Pending |
4 | TB - Monthly | 04/04/2012 | Call in to confirm |
... <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> ...
下表是支持表格的HTML元素和应该如何使用它们.
标签 | 描述 |
---|---|
<table>
|
以表格形式显示数据的包装元素 |
<thead>
|
表头行标签(<tr> )
|
<tbody>
|
表格的内容行(<tr> )
|
<tr>
|
在单行设置一组单元格(<td> or <th> )
|
<td>
|
默认的表格单元格 |
<th>
|
列标签的特殊单元格(或行, 这取决于范围和位置) 必须使用在 <thead> 中
|
<caption>
|
用于对表的描述或总结, 对屏幕阅读器特别有用. |
<table> <caption>...</caption> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table>
单个表单控件的样式, 但在<form>
或在标记中有大的变化, 没有任何需要的基本样式. 结果是在表单控件中的标签为左对齐.
<form> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> <button type="submit" class="btn">Submit</button> </fieldset> </form>
Bootstrap包含3个常用的表单布局.
在表单添加 .form-search
和 在 <input>
添加 .search-query
可为输入框提供一个额外的圆角.
<form class="form-search"> <input type="text" class="input-medium search-query"> <button type="submit" class="btn">Search</button> </form>
添加 .form-inline
使标签左对齐, 以及通过inline-block控制一个紧凑的布局.
<form class="form-inline"> <input type="text" class="input-small" placeholder="Email"> <input type="password" class="input-small" placeholder="Password"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </form>
右对齐的标签和左浮动, 使它们在同一行一一对照. 需要从默认的表格中改动一些的标记:
.form-horizontal
.control-group
.control-label
.controls
来确保位置正确<form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form>
所支持的表单布局的例子.
最常见的表单控件, 基于文本输入字段. 支持包含HTML5在内的所有类型: 文本, 密码, 日期时间, 本地日期时间, 日期, 月, 时间, 星期, 数字, E-mail, url, 搜索, 电话, 和颜色.
在任何时候都需要指定使用类型
.
<input type="text" placeholder="Text input">
表单控件支持多行的文本. 根据需要可改变 rows
属性.
<textarea rows="3"></textarea>
复选框是用于在一个列表中选择一个或多个选项, 而单选框是在众多选择中选择一个选项.
<label class="checkbox"> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> <label class="radio"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label>
在复选框或单选框添加 .inline
属性, 使它们在同一行显示.
<label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>
使用默认的选项或者指定 multiple="multiple"
一次显示多个选项.
<select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select multiple="multiple"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
添加现有的浏览器控件, Bootstrap包含其他有用的表单组件.
在任何的文本输入框的基础上, 在前或后添加一个文本或按钮. 注意, 不支持选择
元素.
把 .add-on
放在一个 input
前面或后面.
<div class="input-prepend"> <span class="add-on">@</span> <input class="span2" id="prependedInput" type="text" placeholder="用户名"> </div> <div class="input-append"> <input class="span2" id="appendedInput" type="text"> <span class="add-on">.00</span> </div>
使用2个.add-on
, 让输入框拥有前缀和后面附加内容.
<div class="input-prepend input-append"> <span class="add-on">$</span> <input class="span2" id="appendedPrependedInput" type="text"> <span class="add-on">.00</span> </div>
使用 .btn
附加一个(或两个)按钮, 代替 <span>
的文本.
<div class="input-append"> <input class="span2" id="appendedInputButton" type="text"> <button class="btn" type="button">Go!</button> </div>
<div class="input-append"> <input class="span2" id="appendedInputButtons" type="text"> <button class="btn" type="button">搜索</button> <button class="btn" type="button">选项</button> </div>
<div class="input-append"> <input class="span2" id="appendedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> 行为 <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div>
<div class="input-prepend"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> 行为 <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <input class="span2" id="prependedDropdownButton" type="text"> </div>
<div class="input-prepend input-append"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> 行为 <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> <input class="span2" id="appendedPrependedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> 行为 <span class="caret"></span> </button> <ul class="dropdown-menu"> ... </ul> </div> </div>
<form class="form-search"> <div class="input-append"> <input type="text" class="span2 search-query"> <button type="submit" class="btn">搜索</button> </div> <div class="input-prepend"> <button type="submit" class="btn">搜索</button> <input type="text" class="span2 search-query"> </div> </form>
使用相对大小的属性, 例如.input-large
或者使用.span*
属性, 使输入框适合网格列大小.
让 <input>
or <textarea>
元素像一个块级元素.
<input class="input-block-level" type="text" placeholder=".input-block-level">
<input class="input-mini" type="text" placeholder=".input-mini"> <input class="input-small" type="text" placeholder=".input-small"> <input class="input-medium" type="text" placeholder=".input-medium"> <input class="input-large" type="text" placeholder=".input-large"> <input class="input-xlarge" type="text" placeholder=".input-xlarge"> <input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
注意! 在未来的版本中, 我们将会修改这些属性, 让按钮大小也使用类似属性. 例如, .input-large
将提高按钮的padding和字体大小.
使用 .span1
到 .span12
让输入框的大小和网格列一致.
<input class="span1" type="text" placeholder=".span1"> <input class="span2" type="text" placeholder=".span2"> <input class="span3" type="text" placeholder=".span3"> <select class="span1"> ... </select> <select class="span2"> ... </select> <select class="span3"> ... </select>
对于每行有多个输入框, 使用 .controls-row
为输入框直接加入适当的间距. 通过浮动让输入框之间缩减一些空白, 设置适当的边距, 并清除浮动.
<div class="controls"> <input class="span5" type="text" placeholder=".span5"> </div> <div class="controls controls-row"> <input class="span4" type="text" placeholder=".span4"> <input class="span1" type="text" placeholder=".span1"> </div> ...
在表单呈现不可编辑的数据, 无需使用实际的表单标记.
<span class="input-xlarge uneditable-input">这里不可输入</span>
一组(按钮)行为放在表单尾部. 当放置在 .form-horizontal
, 按钮会在表单里自动缩进.
<div class="form-actions"> <button type="submit" class="btn btn-primary">Save changes</button> <button type="button" class="btn">Cancel</button> </div>
说明文字支持水平和块级显示.
<input type="text"><span class="help-inline">说明文字</span>
<input type="text"><span class="help-block">说明文字, 如文字过长, 可采用块级显示.</span>
在表单控件和标签通过基本的反馈状态提供反馈给用户或者访客.
我们在一些表单控件和在:focus
地方应用了box-shadow
, 移除了默认的 outline
样式.
<input class="input-xlarge" id="focusedInput" type="text" value="This is focused...">
在输入框添加 disabled
属性, 会有一个稍微不同的外观, 并且防止用户输入.
<input class="input-xlarge" id="disabledInput" type="text" placeholder="这不能输入…..." disabled>
Bootstrap包含了错误, 警告, 资料, 和成功信息的验证样式. 在 .control-group
添加适当的属性便可以使用.
<div class="control-group warning"> <label class="control-label" for="inputWarning">警告</label> <div class="controls"> <input type="text" id="inputWarning"> <span class="help-inline">有问题</span> </div> </div> <div class="control-group error"> <label class="control-label" for="inputError">出错</label> <div class="controls"> <input type="text" id="inputError"> <span class="help-inline">请修改错误</span> </div> </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">成功</label> <div class="controls"> <input type="text" id="inputSuccess"> <span class="help-inline">不错!</span> </div> </div>
在任何项目可以很轻松的改变图像样式, 只需在 <img>
元素添加属性
<img src="..." class="img-rounded"> <img src="..." class="img-circle"> <img src="..." class="img-polaroid">
注意! .img-rounded
和 .img-circle
不支持IE7-8, 因为缺少对 border-radius
的支持.
140个图标在精灵(sprite)表里, 由Glyphicons提供, 有暗灰色(默认)和白色可用.
Glyphicons一般不会提供免费, 但Bootstrap和Glyphicons的创作者之间的协调, 让作为开发人员的你免费使用. 与此同时, 我们也希望你在实际使用的时候, 可以添加一个Glyphicons的链接.
所有图标都需要一个独特、前缀需要带 icon-
的属性的<i>
标签. 如需使用时, 可直接将一下代码使用在任何地方:
<i class="icon-search"></i>
也可以使用风格相反(白色)的图标, 这里准备了一个额外的属性. 我们将具体展示这些属性在导航条和下拉菜单中悬停和活动时候的状态效果.
<i class="icon-search icon-white"></i>
注意!
当在旁边使用文本, 按钮或导航链接, 为了有一个适当的间距, 请一定要在<i>
后面留一个空格位置.
使用在按钮, 工具栏的按钮组合, 导航, 或表单的前缀输入框.
<div class="btn-toolbar"> <div class="btn-group"> <a class="btn" href="#"><i class="icon-align-left"></i></a> <a class="btn" href="#"><i class="icon-align-center"></i></a> <a class="btn" href="#"><i class="icon-align-right"></i></a> <a class="btn" href="#"><i class="icon-align-justify"></i></a> </div> </div>
<div class="btn-group"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> 用户</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li> <li><a href="#"><i class="icon-trash"></i> 删除</a></li> <li><a href="#"><i class="icon-ban-circle"></i> 禁止</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> 编辑</a></li> </ul> </div>
<a class="btn btn-large" href="#"><i class="icon-star"></i> 星星</a> <a class="btn btn-small" href="#"><i class="icon-star"></i> 星星</a> <a class="btn btn-mini" href="#"><i class="icon-star"></i> 星星</a>
<ul class="nav nav-list"> <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li> <li><a href="#"><i class="icon-book"></i> 库</a></li> <li><a href="#"><i class="icon-pencil"></i> 应用程序</a></li> <li><a href="#"><i class="i"></i> 其他</a></li> </ul>
<div class="control-group"> <label class="control-label" for="inputIcon">邮箱地址</label> <div class="controls"> <div class="input-prepend"> <span class="add-on"><i class="icon-envelope"></i></span> <input class="span2" id="inputIcon" type="text"> </div> </div> </div>