Etiam porta sem malesuada magna mollis euismod。Maecenas faucibus mollis interdum。Morbi leo risus,porta ac consectetur ac,爱神前庭。
Bootstrap 是 Twitter 的一个工具包,旨在启动 web 应用程序和网站的开发。
它包括用于排版、表单、按钮、表格、网格、导航等的基本 CSS 和 HTML。
书呆子警报: Bootstrap 是用 Less 构建的,旨在为现代浏览器的大门外工作。
为了获得最快和最简单的开始,只需将此代码段复制到您的网页中即可。
喜欢使用 Less?没问题,只需克隆 repo 并添加以下行:
Twitter 的工程师历来使用几乎所有他们熟悉的库来满足前端需求。Bootstrap 最初是为了应对所提出的挑战。在许多很棒的人的帮助下,Bootstrap 有了长足的发展。
在dev.twitter.com上阅读更多信息 ›
Bootstrap 在 Chrome、Safari、Internet Explorer 和 Firefox 等主流现代浏览器中经过测试和支持。
Bootstrap 带有完整的已编译 CSS、未编译和示例模板。
作为 Bootstrap 的一部分提供的默认网格系统是 940 像素宽的 16 列网格。这是流行的 960 网格系统的一种风格,但在左右两侧没有额外的边距/填充。
如此处所示,可以使用两个“列”创建基本布局,每个“列”跨越我们定义为网格系统一部分的 16 个基本列的数量。有关更多变体,请参见下面的示例。
- <div类= “行” >
- <div类= "span6" >
- ...
- </div>
- <div类= "span10" >
- ...
- </div>
- </div>
如果必须通过.row
在现有列中创建一个来嵌套您的内容。
- <div类= “行” >
- <div类= "span12" >
- 列的第 1 层
- <div类= “行” >
- <div类= "span6" >
- 2级
- </div>
- <div类= "span6" >
- 2级
- </div>
- </div>
- </div>
- </div>
Bootstrap 内置了一些用于自定义默认 940 像素网格系统的变量。通过一些自定义,您可以修改列的大小、它们的间距以及它们所在的容器。
目前修改网格系统所需的变量都驻留在variables.less
.
多变的 | 默认值 | 描述 |
---|---|---|
@gridColumns |
16 | 网格内的列数 |
@gridColumnWidth |
40像素 | 网格内每列的宽度 |
@gridGutterWidth |
20像素 | 每列之间的负空间 |
@siteWidth |
所有列和排水沟的计算总和 | 我们使用一些基本匹配来计算列数和装订线数并设置.fixed-container() mixin 的宽度。 |
修改网格意味着更改三个@grid-*
变量并重新编译 Less 文件。
Bootstrap 配备处理多达 24 列的网格系统;默认值仅为 16。这是您的网格变量如何自定义为 24 列网格。
- @gridColumns :24 ;
- @gridColumnWidth :20px ;
- @gridGutterWidth :20px ;
重新编译后,您将被设置!
默认且简单的 940 像素宽、居中布局,适用于单个<div.container>
.
- <正文>
- <div类= “容器” >
- ...
- </div>
- </正文>
另一种灵活的流体页面结构,具有最小和最大宽度以及左侧边栏。非常适合应用程序和文档。
- <正文>
- <div class = "容器流体" >
- <div类= “侧边栏” >
- ...
- </div>
- <div类= “内容” >
- ...
- </div>
- </div>
- </正文>
用于构建网页的标准排版层次结构。
整个排版网格基于 variables.less 文件中的两个 Less 变量:@basefont
和@baseline
. 第一个是始终使用的基本字体大小,第二个是基本行高。
我们使用这些变量和一些数学计算来创建我们所有类型的边距、填充和行高等等。
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>
<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。
注意:在 HTML5中使用<b>
和<i>
标记仍然可以,它们不必分别设置为粗体和斜体样式(尽管如果有更多语义元素,请使用它)。<b>
旨在突出单词或短语而不传达额外的重要性,而<i>
主要用于语音、技术术语等。
该<address>
元素用于其最近的祖先或整个工作主体的联系信息。以下是如何使用它的两个示例:
注意: an 中的每一行都<address>
必须以换行符 ( <br />
) 结尾或包裹在块级标签中(例如,<p>
)以正确构造内容。
对于缩写词和首字母缩略词,请使用<abbr>
标记(在HTML5<acronym>
中已弃用)。将简写形式放在标签中,并为完整名称设置标题。
<blockquote>
<p>
<small>
要包含块引用,请环绕<blockquote>
和<p>
标记<small>
。使用该<small>
元素引用您的来源,您将在它之前得到一个破折号—
。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis dapibus posuere velit aliquet。
朱利叶斯·希伯特博士
- <块引用>
- <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit。Integer posuere erat a ante venenatis dapibus posuere velit aliquet。</p>
- <small>朱利叶斯·希伯特博士</small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
用两个简单的标签来风格化你的代码。要通过 javascript 获得更多精彩,请放入 Google 的代码美化库,然后就可以了。
代码、块或只是内联代码片段,可以通过包装在正确的标签中以样式显示。对于跨越多行的代码块,请使用<pre>
元素。对于内联代码,请使用<code>
元素。
元素 | 结果 |
---|---|
<code> |
在这样的一行文本中,您的包装代码将看起来像这个<html> 元素。 |
<pre> |
<div> <h1>标题</h1> <p>这里有东西……</p> </div> 注意:请确保将标签内的 |
<pre class="prettyprint"> |
使用 google-code-prettify 库,您的代码块的视觉风格和自动语法高亮显示略有不同。 <div> <h1>标题</h1> <p>这里有东西... </p> </div> 下载 google-code-prettify并查看自述文件以了解如何使用。 |
<span class="label">
提请注意或标记正文中的任何短语。
曾经需要那些花哨的新品之一!或编写代码时的重要标志?好吧,现在你有了它们。以下是默认包含的内容:
标签 | 结果 |
---|---|
<span class="label">Default</span> |
默认 |
<span class="label success">New</span> |
新的 |
<span class="label warning">Warning</span> |
警告 |
<span class="label important">Important</span> |
重要的 |
<span class="label notice">Notice</span> |
注意 |
在具有低 HTML 占用空间和最少样式的页面上显示不同大小的缩略图。
中的缩略图.media-grid
可以是任意大小,但直接映射到内置的 Bootstrap 网格系统时效果最好。像 90、210 和 330 这样的图像宽度与一些填充像素相结合以等于.span2
、.span4
和.span6
列大小。
媒体网格易于使用,并且在标记方面相当简单。它们的尺寸完全基于所包含图像的大小。
- <ul类= “媒体网格” >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
桌子很棒——可以做很多事情。然而,伟大的表格需要一点标记才能变得有用、可扩展和可读(在代码级别)。这里有一些提示可以提供帮助。
始终将列标题包装在<thead>
这样的层次结构中<thead>
> <tr>
> <th>
。
与列标题类似,表的所有正文内容都应包含在 a 中<tbody>
,因此您的层次结构为<tbody>
> <tr>
> <td>
。
所有表格都将自动设置样式,仅使用基本边框,以确保可读性并保持结构。无需添加额外的类或属性。
# | 名 | 姓 | 语 |
---|---|---|---|
1 | 一些 | 一 | 英语 |
2 | 乔 | 六包 | 英语 |
3 | 斯图 | 凹痕 | 代码 |
- <表格>
- ...
- </table>
对于需要在更紧凑的空间中使用更多数据的表,请使用将填充减半的压缩风格。它也可以与边框和斑马条纹一起使用,就像默认的表格样式一样。
# | 名 | 姓 | 语 |
---|---|---|---|
1 | 一些 | 一 | 英语 |
2 | 乔 | 六包 | 英语 |
3 | 斯图 | 凹痕 | 代码 |
通过圆角并在所有侧面添加边框,让您的桌子看起来更时尚。
# | 名 | 姓 | 语 |
---|---|---|---|
1 | 一些 | 一 | 英语 |
2 | 乔 | 六包 | 英语 |
3 | 斯图 | 凹痕 | 代码 |
- <table class = "bordered-table" >
- ...
- </table>
通过添加斑马条纹来对您的表格进行一点花哨 - 只需添加.zebra-striped
类。
# | 名 | 姓 | 语 |
---|---|---|---|
1 | 一些 | 一 | 英语 |
2 | 乔 | 六包 | 英语 |
3 | 斯图 | 凹痕 | 代码 |
跨度 4 列 | |||
跨度 2 列 | 跨度 2 列 |
注意:斑马条纹是一种渐进式增强功能,不适用于 IE8 及更低版本的旧浏览器。
- <table class = "zebra-striped" >
- ...
- </table>
以前面的例子为例,我们通过jQuery和Tablesorter插件提供排序功能来提高表格的实用性。单击任何列的标题以更改排序。
# | 名 | 姓 | 语 |
---|---|---|---|
2 | 乔 | 六包 | 英语 |
3 | 斯图 | 凹痕 | 代码 |
1 | 您的 | 一 | 英语 |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <脚本>
- $ (函数() {
- $ (“表#sortTableExample” )。表排序器({ sortList : [[ 1 , 0 ]] });
- });
- </脚本>
- <table class = "zebra-striped" >
- ...
- </table>
所有表单都具有默认样式,以便以可读和可扩展的方式呈现它们。为文本输入、选择列表、文本区域、单选按钮和复选框以及按钮提供了样式。
添加.form-stacked
到表单的 HTML 中,您将在其字段顶部而不是左侧有标签。如果您的表单很短,或者您有两列输入较重的表单,这将非常有用。
通过向您的标记添加几个类来自定义任何形式input
、select
或宽度。textarea
从 v1.3.0 开始,我们为表单元素添加了基于网格的大小调整类。请在现有的.mini
,.small
等类上使用这些。
按照惯例,按钮用于操作,而链接用于对象。例如,“下载”可以是一个按钮,“最近的活动”可以是一个链接。
所有按钮默认为浅灰色样式,但可以为不同的颜色样式应用许多功能类。这些等级包括蓝色.primary
等级、浅蓝色.info
等级、绿色.success
等级和红色.danger
等级。
- <div class = "alert-message 警告" >
- <a class = "close" href = "#" > × </a>
- <p><strong>神圣的鳄梨酱!</strong>最好检查一下自己,你看起来不太好。</p>
- </div>
.alert-message.block-message
对于需要一些解释的消息,我们有段落样式警报。这些非常适合冒泡更长的错误消息,警告用户待处理的操作,或者只是呈现信息以更加强调页面。
- <div class = "alert-message block-message 警告" >
- <a class = "close" href = "#" > × </a>
- <p><strong>神圣的鳄梨酱!这是一个警告!</strong>最好检查一下自己,你看起来不太好。Nulla vitae elit libero,一个 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。</p>
- <div class = "警报操作" >
- <a class = "btn small" href = "#" >采取这个行动</a> <a class = "btn small" href = "#" >或者这样做</a>
- </div>
- </div>
好身材……
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas。Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis
Etiam porta sem malesuada magna mollis euismod。Maecenas faucibus mollis interdum。Morbi leo risus,porta ac consectetur ac,爱神前庭。
使用可与jQuery和Ender一起使用的新自定义插件,使 Bootstrap 的一些主要组件栩栩如生。我们鼓励您扩展和修改它们以满足您的特定开发需求。
文件 | 描述 |
---|---|
引导模态.js | 我们的 Modal 插件是对传统modal js 插件的超薄版!我们特别注意只包含我们在 twitter 上需要的基本功能。 |
引导警报.js | 警报插件是一个超小类,用于向警报添加关闭功能。 |
引导-dropdown.js | 此插件用于向引导顶部栏或选项卡式导航添加下拉交互。 |
引导-scrollspy.js | ScrollSpy 插件用于将基于滚动位置的自动更新导航添加到引导顶部栏。 |
引导按钮.js | ScrollSpy 插件用于将基于滚动位置的自动更新导航添加到引导顶部栏。 |
引导-tabs.js | 该插件添加了快速、动态的选项卡和药丸功能,用于循环浏览本地内容。 |
引导-twipsy.js | 基于 Jason Frame 编写的优秀的 jQuery.tipsy 插件;twipsy 是一个更新版本,它不依赖图像,使用 css3 进行动画,使用 data-attributes 进行本地标题存储! |
bootstrap-popover.js | popover 插件提供了一个简单的界面,用于将弹出框添加到您的应用程序中。它扩展了boostrap-twipsy.js插件,所以在你的项目中包含弹出框时一定要获取该文件! |
没有!Bootstrap 首先被设计为一个 CSS 库。这个 javascript 在包含的样式之上提供了一个基本的交互层。
但是,对于那些确实需要 javascript 的人,我们提供了上面的插件来帮助您了解如何将 Bootstrap 与 javascript 集成,并立即为您提供一个快速、轻量级的基本功能选项。
有关更多信息并查看一些现场演示,请参阅我们的插件文档页面。
Bootstrap 是从Preboot构建的,Preboot是一个开源的 mixins 和变量包,可与Less结合使用,后者是一个 CSS 预处理器,用于更快、更轻松地进行 Web 开发。
查看我们如何在 Bootstrap 中使用 Preboot,以及如果您选择在下一个项目中运行 Less,您可以如何使用它。
使用此选项可通过浏览器中的 javascript 充分利用 Bootstrap 的 Less 变量、mixin 和 CSS 中的嵌套。
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.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 ;
- // 基线网格
- @basefont :13px ;
- @基线:18px ;
除了 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 ;_
- }
- ...
- }
- #坡度 {
- ...
- . 垂直(@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
- 背景-图像:线性-渐变(@startColor ,@endColor );// 标准
- }
- ...
- }
看中并执行一些数学运算以生成灵活而强大的 mixin,如下所示。
- // 网格
- @gridColumns :16 ;
- @gridColumnWidth :40px ;
- @gridGutterWidth :20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // 制作一些列
- . 列(@columnSpan :1 ){
- 宽度:(@gridColumnWidth * @columnSpan )+ (@gridGutterWidth * (@columnSpan - 1 ));
- }
修改.less
/lib/ 中的文件后,您需要重新编译它们以重新生成 bootstrap-*.*.*.css 和 bootstrap-*.*.*.min.css 文件。如果您向 GitHub 提交拉取请求,则必须始终重新编译。
方法 | 脚步 |
---|---|
带有 makefile 的节点 | 通过运行以下命令,使用 npm 安装 less 命令行编译器: $ npm install lessc 安装后,只需 此外,如果您安装了watchr,您可能会在 |
Javascript | 下载最新的 Less.js并在
要重新编译 .less 文件,只需保存它们并重新加载您的页面。Less.js 编译它们并将它们存储在本地存储中。 |
命令行 | 如果您已经安装了 less 命令行工具,只需运行以下命令: $ lessc ./lib/bootstrap.less > bootstrap.css
|
减少 Mac 应用程序 | 非官方的 Mac 应用程序会监视 .less 文件的目录,并在每次保存监视的 .less 文件后将代码编译为本地文件。 如果您愿意,您可以在应用程序中切换首选项以自动缩小以及编译文件最终位于哪个目录。 |