默认网格

作为 Bootstrap 的一部分提供的默认网格系统是 940 像素宽的 16 列网格。这是流行的 960 网格系统的一种风格，但在左右两侧没有额外的边距/填充。

示例网格标记

如此处所示，可以使用两个“列”创建基本布局，每个“列”跨越我们定义为网格系统一部分的 16 个基本列的数量。有关更多变体，请参见下面的示例。

<div class="行">
  <div类= "span6 列" > 
    ...
  </div>
  <div class = "span10 列" > 
    ...
  </div>
</div>

固定布局

一个基本的 940 像素宽、居中的容器布局，几乎适用于任何网站或页面。

<正文>
  <div类= “容器” > 
    ...
  </div>
</正文>

流体布局

具有最小和最大宽度以及左侧边栏的灵活的流体或液体页面结构。非常适合应用程序。

<正文>
  <div class = "容器流体" > 
    <div类= “侧边栏” > 
      ...
    </div>
    <div类= “内容” > 
      ...
    </div>
  </div>
</正文>

标题和副本

用于构建网页的标准排版层次结构。

h1。标题 1

h2。标题 2

h3。标题 3

h4。标题 4

h5。标题 5

h6. 标题 6

示例段落

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 ut id elit。

示例标题有子标题...

您还可以使用<strong>和添加副标题<em>

杂项。元素

使用强调、地址和缩写

<strong> <em> <address> <abbr>

何时使用

强调标签（<strong>和<em>）应该用于增加单词或短语与其周围副本之间的视觉区别。用于<strong>普通的旧注意和光滑<em>的注意和标题。

强调段落

Fusce dapibus，tellus ac cursus commodo，tortor mauris condimentum nibh，ut balloonum massa justo sit amet risus。Maecenas faucibus mollis interdum。Nulla vitae elit libero，一个 pharetra augue。

地址

该address元素用于——你猜对了！——地址。这是它的外观：

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 电话
： (123) 456-7890

注意：每一行都address必须以换行符 ( <br />) 结尾，以便在没有应用任何样式的情况下在现实生活中正确地构造内容。

缩写

对于缩写词和首字母缩略词，请使用abbr标记（在HTML5acronym中已弃用）。将简写形式放在标签中，并为完整名称设置标题。

块引用

<blockquote> <p> <cite>

一定要把你的blockquote周围paragraph和cite标签包裹起来。引用来源时，请使用该cite元素。CSS 将自动在名称前加上破折号 (—)。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

朱利叶斯·希伯特博士

无序<ul>

• 杰里米·比克斯比
• 罗伯特·德祖尔
• 乔什·华盛顿
• 安东·卡普雷西
• 我的队友
  • 乔治卡斯坦萨
  • 杰瑞·宋飞
  • 科斯莫克莱默
  • 伊莱恩·本尼斯
  • 新人
• 约翰·雅各布
• 保罗皮尔斯
• 凯文加内特

无样式<ul.unstyled>

• 杰里米·比克斯比
• 罗伯特·德祖尔
• 乔什·华盛顿
• 安东·卡普雷西
• 我的队友
  • 乔治卡斯坦萨
  • 杰瑞·宋飞
  • 科斯莫克莱默
  • 伊莱恩·本尼斯
  • 新人
• 约翰·雅各布
• 保罗皮尔斯
• 凯文加内特

已订购<ol>

1. 杰里米·比克斯比
2. 罗伯特·德祖尔
3. 乔什·华盛顿
4. 安东·卡普雷西
5. 我的队友
   1. 乔治卡斯坦萨
   2. 杰瑞·宋飞
   3. 科斯莫克莱默
   4. 伊莱恩·本尼斯
   5. 新人
6. 约翰·雅各布
7. 保罗皮尔斯
8. 凯文加内特

描述dl

描述列表

描述列表非常适合定义术语。

欧伊斯莫德

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit。

Donec id elit non mi porta gravida 在 eget metus。

马勒苏达门

Etiam porta sem malesuada magna mollis euismod。

建筑表

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

桌子很棒——可以做很多事情。然而，伟大的表格需要一点标记才能变得有用、可扩展和可读（在代码级别）。这里有一些提示可以提供帮助。

始终将列标题包装在thead这样的层次结构中thead> tr> th。

与列标题类似，表的所有正文内容都应包含在 a 中tbody，因此您的层次结构为tbody> tr> td。

示例：默认表格样式

所有表格都将自动设置样式，仅使用基本边框，以确保可读性并保持结构。无需添加额外的类或属性。

#	名	姓	语
1	一些	一	英语
2	乔	六包	英语
3	斯图	凹痕	代码

<table class="common-table"> 类= “公用表” >
  ...
</table>

示例：斑马条纹

通过添加斑马条纹来对您的表格进行一点花哨 - 只需添加.zebra-striped类。

#	名	姓	语
1	一些	一	英语
2	乔	六包	英语
3	斯图	凹痕	代码

<table class="common-table zebra-striped"> 类= “普通表斑马条纹” >
...
</table>

示例：带有 TableSorter.js 的斑马条纹

以前面的例子为例，我们通过jQuery和Tablesorter插件提供排序功能来提高表格的实用性。单击任何列的标题以更改排序。

#	名	姓	语
1	您的	一	英语
2	乔	六包	英语
3	斯图	凹痕	代码

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<脚本类型= “文本/javascript” > 
  $ （文件）。准备好（函数（）{ 
    $ （“表#sortTableExample” ）。表排��器( { sortList : [[ 1 , 0 ]]} );   
  });
</脚本>
<table class = "common-table zebra-striped" > 
  ...
</table>

默认样式

所有表单都具有默认样式，以便以可读和可扩展的方式呈现它们。为文本输入、选择列表、文本区域、单选按钮和复选框以及按钮提供了样式。

示例表单图例

超大输入

选择

1 2 3 4 5

选择

1 2 3 4 5

不可编辑的输入

这里有一些价值

禁用输入

超大输入

一小段帮助文本

示例表单图例

前置文本

@

前置复选框

附加复选框

文件输入

示例表单图例

选项列表

• 选项一是这样那样——一定要包括为什么它很棒
• 选项二也可以检查并包含在表单结果中
• 选项三可以——是的，你猜对了——也可以检查并包含在表单结果中
• 选项四不能被选中，因为它被禁用了。

注意：标签围绕更大的点击区域和更可用的表单的所有选项。

日期范围

至 所有时间均显示为太平洋标准时间 (GMT -08:00)。

文本区域

如果需要，帮助文本块来描述上述字段。

选项列表

• 选项一是这样那样——一定要包括为什么它很棒
• 选项二也可以检查并包含在表单结果中

保存更改 取消

堆叠形式

添加.form-stacked到表单的 HTML 中，您将在其字段顶部而不是左侧有标签。如果您的表单很短，或者您有两列输入较重的表单，这将非常有用。

示例表单图例

超大输入

选择

1 2 3 4 5

示例表单图例

选项列表

• 选项一是这样那样——一定要包括为什么它很棒
• 选项二也可以检查并包含在表单结果中

注意：标签围绕更大的点击区域和更可用的表单的所有选项。

保存更改 取消

纽扣

按照惯例，按钮用于操作，而链接用于对象。例如，“下载”可以是一个按钮，“最近的活动”可以是一个链接。

所有按钮默认为浅灰色样式，但可以使用蓝色.primary类。另外，滚动你自己的风格很容易。

示例按钮

按钮样式可以应用于任何已应用的东西.btn。通常，您只想将这些应用于a、button和 selectinput元素。这是它的外观：

替代尺寸

喜欢更大或更小的按钮？有它！

禁用状态

对于未激活或因某种原因被应用禁用的按钮，请使用禁用状态。这适用.disabled于链接和元素。:disabledbutton

链接

纽扣

它是什么

我们的顶部栏是一个固定栏，其中包含网站的徽标或名称、主要导航和搜索表单。

可定制

其中的所有元素以及整个顶栏都是可选的。您可以选择包含徽标/名称、导航、搜索和辅助导航——或它们的任意组合。

包括下拉菜单

作为主导航的一部分，我们为您提供了向导航添加下拉菜单的功能。查看上面的二级导航（右对齐），看看它是如何完成的。

标签和药片

使用ul. 通过添加适当的类在选项卡或药丸之间交换。

非常适合内容的子部分，例如我们的帐户设置页面和用于在类似内容页面之间切换的用户时间线。提供标签或药丸样式。

• 家
• 轮廓
• 留言
• 设置
• 接触

<ul class="标签"> 类= “标签” >
  <li class = "active" ><a href = "" >主页</a></li>  
  <li><a href = "" >个人资料</a></li> 
  <li><a href = "" >消息</a></li> 
  <li><a href = "" >设置</a></li> 
  <li><a href = "" >联系方式</a></li> 
</ul>

• 家
• 轮廓
• 留言
• 设置
• 接触

<ul class="药片"> 类= “药丸” >
  <li class = "active" ><a href = "" >主页</a></li>  
  <li><a href = "" >个人资料</a></li> 
  <li><a href = "" >消息</a></li> 
  <li><a href = "" >设置</a></li> 
  <li><a href = "" >联系方式</a></li> 
</ul>

分页

受 Rdio 启发的超简单和极简风格的分页。大块很难错过，易于扩展，并提供大点击区域。

<div class="分页"> 类= “分页” >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← 上一页</a></li>  
    <li class = "active" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4​​ </a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "next" ><a href = "" > Next → </a></li>  
  </ul>
</div>

基本警报

用于突出显示操作的失败、可能失败或成功的单行消息。对表格特别有用。

阻止消息

对于需要一些解释的消息，我们有段落样式警报。这些非常适合冒泡更长的错误消息，警告用户待处理的操作，或者只是呈现信息以更加强调页面。

模态

模态（对话框或灯箱）非常适合在需要维护背景上下文的情况下进行上下文操作。

约夏克布丁

使用弹出框在不影响布局的情况下向页面提供潜台词信息。

Bootstrap 是用Preboot构建的，Preboot是一个开源的 mixins 和变量包，可与 Less 结合使用，Less是一个 CSS 预处理器，用于更快、更轻松地进行 Web 开发。

查看我们如何在 Bootstrap 中使用 Preboot，以及如果您选择在下一个项目中运行 Less，您可以如何使用它。

如何使用它

使用此选项可通过浏览器中的 javascript 充分利用 Bootstrap 的 Less 变量、mixin 和 CSS 中的嵌套。

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

感觉不到 .js 解决方案？在部署代码时尝试使用 Less Mac 应用程序或使用 Node.js进行编译。

包括什么

以下是作为 Bootstrap 的一部分包含在 Twitter Bootstrap 中的一些亮点。前往 Bootstrap 网站或 Github 项目页面下载并了解更多信息。

颜色变量

Less 中的变量非常适合免费维护和更新您的 CSS。当您想更改颜色值或常用值时，只需在一处更新即可。

// 链接
@linkColor ：#8b59c2；         
@linkColorHover ：    变暗（@linkColor ，10 ）； 
// 灰色
@黑色：#000；             
@grayDark ：          变亮（@black ，25 %）； 
@gray ：              变亮（@black ，50 %）； 
@grayLight ：         变亮（@black ，70 %）； 
@grayLighter ：       变亮（@black ，90 %）； 
@白：#fff ；             
// 强调色
@蓝色：#08b5fb ；              
@绿色：#46a546 ；             
@红色：#9d261d ；               
@黄色：#ffc40d ；            
@橙色：#f89406 ；            
@粉红色：#c3325f ；              
@紫色：#7a43b6 ；            
// 基线
@基线：20px ；          

评论

除了 CSS 的正常/* ... */语法之外，Less 还提供了另一种样式的注释。

// 这是一条评论
/* 这也是注释 */

混音

Mixin 基本上是 CSS 的 include 或 partials，允许您将一段代码组合成一个。它们非常适合供应商前缀属性box-shadow，例如跨浏览器渐变、字体堆栈等。下面是 Bootstrap 中包含的 mixin 示例。

字体堆栈

#字体{
  . 速记（@weight ：正常，@size ：14px ，@lineHeight ：20px ）{     
    字体大小：@size ；_ 
    字体-重量：@weight ； 
    线高：@lineHeight ；_ 
  }
  . 无衬线（@weight ：正常，@ size ：14px ，@lineHeight ：20px ）{     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    字体大小：@size ；_ 
    字体-重量：@weight ； 
    线高：@lineHeight ；_ 
  }
  . 衬线（@weight ：正常，@size ：14px ，@lineHeight ：20px ）{     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    字体大小：@size ；_ 
    字体-重量：@weight ； 
    线高：@lineHeight ；_ 
  }
  . 等宽（@weight ：正常，@size ：12px ，@lineHeight ：20px ）{     
    font - family : "Monaco" , Courier New , monospace ;   
    字体大小：@size ；_ 
    字体-重量：@weight ； 
    线高：@lineHeight ；_ 
  }
}

渐变

＃坡度 {
  . 水平（@startColor ：#555，@endColor：#333）{ 
    背景颜色：@endColor ；_ 
    背景-重复：重复-x ；_
    背景-图像：-khtml-渐变（线性，左上，右上，从（@startColor ）到（@endColor ））；// 征服者   
    背景-图像：- moz -线性-渐变（左，@startColor ，@endColor ）；// FF 3.6+    
    背景-图像：-毫秒-线性-渐变（左，@startColor ，@endColor ）；// IE10    
    背景-图像：-webkit-渐变（线性，左上，右上，颜色-停止（0 ％，@startColor ），颜色-停止（100 ％，@ endColor ））；// Safari 4+，Chrome 2+    
    背景-图像：- webkit -线性-渐变（左，@startColor ，@endColor ）；// Safari 5.1+，Chrome 10+    
    背景-图像：-o-线性-渐变（左， @ startColor ，@ endColor ）；// 歌剧 11.10    
    - ms -过滤器：%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    过滤器：e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 和 IE7 
    背景-图像：线性-渐变（左，@startColor ，@endColor ）；// 乐标准   
  }
  . 垂直（@startColor ：#555，@endColor：#333）{ 
    背景颜色：@endColor ；_ 
    背景-重复：重复-x ；_
    背景-图像：-khtml-渐变（线性，左上，左下，从（@startColor ）到（@endColor ））；// 征服者   
    背景-图像：-moz-线性-渐变（@startColor ，@ endColor ）；// FF 3.6+   
    背景-图像：-毫秒-线性-渐变（@startColor ，@endColor ）；// IE10   
    背景-图像：-webkit-渐变（线性，左上，左下，颜色-停止（0 ％，@startColor ），颜色-停止（100 ％，@ endColor ））；// Safari 4+，Chrome 2+    
    背景-图像：-webkit-线性-渐变（ @ startColor ，@ endColor ）；// Safari 5.1+，Chrome 10+   
    背景-图像：-o-线性-渐变（ @ startColor ，@ endColor ）；// 歌剧 11.10   
    - ms -过滤器：%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    过滤器：e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 和 IE7 
    背景-图像：线性-渐变（@startColor ，@endColor ）；// 标准  
  }
  . 定向（@startColor ：#555，@endColor：#333，@deg：45deg）{ 
    ...
  }
  . 垂直-三色（@startColor ：#00b3ee，@midColor：#7a43b6，@colorStop：0.5，@endColor：#c3325f）{ 
    ...
  }
}

运营和网格系统

看中并执行一些数学运算以生成灵活而强大的 mixin，如下所示。

// 网格
@gridColumns ：16 ；       
@gridColumnWidth ：40px ；   
@gridGutterWidth ：20px ；   
// 网格系统
. 容器{
  宽度：@siteWidth ； 
  边距：0自动；  
  . 清除修复（）；
}
. 列（@columnSpan ：1 ）{  
  显示：内联； 
  浮动：左；
  宽度：（@gridColumnWidth * @columnSpan ）+ （@gridGutterWidth * （@columnSpan - 1 ））；         
  边距-左：@gridGutterWidth ； 
  &：第一个-孩子{
    边距-左：0 ； 
  }
}
. 偏移量（@columnOffset ：1 ）{  
  边距-左：（@gridColumnWidth * @columnOffset ）+ （@gridGutterWidth * （@columnOffset - 1 ））！重要的；          
}