基础 CSS

在脚手架之上,基本的 HTML 元素通过可扩展类进行样式化和增强,以提供新鲜、一致的外观和感觉。

标题和正文

排版比例

整个排版网格基于 variables.less 文件中的两个 Less 变量:@baseFontSize@baseLineHeight. 第一个是始终使用的基本字体大小,第二个是基本行高。

我们使用这些变量和一些数学计算来创建我们所有类型的边距、填充和行高等等。

示例正文

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 车辆。

铅正文副本

通过添加使段落脱颖而出.lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor。Duis mollis, est non commodo luctus。

h1。标题 1

h2。标题 2

h3。标题 3

h4。标题 4

h5。标题 5
h6. 标题 6

重点、地址和缩写

元素 用法 可选的
<strong> 用于强调具有重要意义的文本片段 没有任何
<em> 用于强调一段有压力的文本 没有任何
<abbr> 包装缩写和首字母缩略词以在悬停时显示扩展版本

title包括扩展文本的可选属性

使用.initialism大写缩写类。
<address> 获取其最近的祖先或整个工作的联系信息 通过结束所有行来保留格式<br>

使用强调

Fusce dapibustellus ac cursus commodotortor 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>标签的两个示例:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 电话
(123) 456-7890
全名
[email protected]

示例缩写

带有属性的缩写title有一个浅点的底部边框和悬停时的帮助光标。这为用户提供了额外的指示,将在悬停时显示某些内容。

initialism类添加到缩写词中,通过赋予其稍小的文本大小来增加排版的和谐度。

HTML是自切片面包以来最好的东西。

单词属性的缩写是attr

块引用

元素 用法 可选的
<blockquote> 用于引用其他来源内容的块级元素

为源 URL添加cite属性

浮动选项的使用.pull-left.pull-right
<small> 用于添加面向用户的引文的可选元素,通常是具有作品标题的作者 <cite>在标题或来源名称周围放置

要包含块引用,请将<blockquote>任何HTML环绕作为引用。对于直接报价,我们建议使用<p>.

包括一个可选<small>元素来引用您的来源,并且您将在它之前获得一个破折号&mdash;以用于样式目的。

  1. <块引用>
  2. <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit。Integer posuere erat a ante venenatis。</p>
  3. <small>名人</small>
  4. </blockquote>

示例块引用

默认块引用的样式如下:

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis。

工作中的名人

要将您的块引用浮动到右侧,请添加class="pull-right"

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis。

工作中的名人

列表

无序

<ul>

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem

无样式

<ul class="unstyled">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • 马萨的整数 molestie lorem
  • pretium nisl aliquet 的促进作用
  • Nulla volutpat aliquam velit
    • 菜豆
    • Purus sodales ultricies
    • 前庭前庭端口扫描仪
    • Ac tristique libero volutpat 在
  • Faucibus porta lacus fringilla vel
  • Aenean sat amet erat nunc
  • Eget porttitor lorem

已订购

<ol>

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. 马萨的整数 molestie lorem
  4. pretium nisl aliquet 的促进作用
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sat amet erat nunc
  8. Eget porttitor lorem

描述

<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。

横向描述

<dl class="dl-horizontal">

描述列表
描述列表非常适合定义术语。
欧伊斯莫德
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。
Felis euismod semper eget lacinia
Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut bakerum massa justo sit amet risus。

小心!水平描述列表将截断太长而无法放入左列修复的术语text-overflow。在较窄的视口中,它们将更改为默认的堆叠布局。

排队

用 .包裹内联代码片段<code>

  1. 例如<code>部分< / code >应该被包装内联

基本块

用于<pre>多行代码。请务必转义代码中的任何尖括号以进行正确渲染。

<p>此处为示例文本...</p>
  1. <上一页>
  2. <p>此处为示例文本...</p>
  3. </pre>

注意:请确保将标签内的<pre>代码尽可能靠近左侧;它将呈现所有选项卡。

您可以选择添加.pre-scrollable将最大高度设置为 350px 并提供 y 轴滚动条的类。

谷歌美化

采用相同的<pre>元素并添加两个可选类以增强渲染。

  1. <p>此处为示例文本... </p>
  1. <pre class = "漂亮的印刷品
  2. 线数" >
  3. <p>此处为示例文本...</p>
  4. </pre>

下载 google-code-prettify并查看自述文件以了解如何使用。

表格标记

标签 描述
<table> 用于以表格格式显示数据的包装元素
<thead> <tr>表格标题行 ( ) 用于标记表格列的容器元素
<tbody> <tr>表格主体中表格行 ( ) 的容器元素
<tr> 出现在单行上的一组表格单元格 (<td>或)的容器元素<th>
<td> 默认表格单元格
<th> 列(或行,取决于范围和位置)标签的特殊表格单元格
必须在<thead>
<caption> 表格内容的描述或摘要,对屏幕阅读器特别有用
  1. <表格>
  2. <头>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <tbody>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

表选项

姓名 班级 描述
默认 没有任何 没有样式,只有列和行
基本的 .table 只有行之间的水平线
有边框的 .table-bordered 圆角并添加外边框
斑马条纹 .table-striped 将浅灰色背景颜色添加到奇数行(1、3、5 等)
浓缩的 .table-condensed 在所有元素中将垂直填充减半td,从 8px 到 4pxth

示例表

1.默认表格样式

表格会自动设置样式,只有几个边框,以确保可读性和保持结构。对于 2.0,.table该类是必需的。

  1. <表= “表” >
  2. </table>
# 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 @推特

2.条纹表

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

注意:条纹表使用:nth-childCSS 选择器,在 IE7-IE8 中不可用。

  1. <table class = "table table-striped" >
  2. </table>
# 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里 @推特

3. 带边框的表格

为美观目的在整个桌子周围添加边框和圆角。

  1. <table class = "table table-bordered" >
  2. </table>
# 用户名
1 标记 奥托 @mdo
标记 奥托 @getbootstrap
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特

4. 精简表

.table-condensed通过添加将表格单元格填充减半(从 8 像素到 4 像素)的类,使您的表格更紧凑。

  1. <table class = "table table-condensed" >
  2. </table>
# 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特

5. 将它们全部结合起来!

随意组合任何表格类,以利用任何可用的类来实现不同的外观。

  1. <table class = "table table-striped table-bordered table-condensed" >
  2. ...
  3. </table>
全名
# 用户名
1 标记 奥托 @mdo
2 雅各布 桑顿 @胖的
3 拉里小鸟 @推特

灵活的 HTML 和 CSS

Bootstrap 中表单最好的部分是,无论您如何在标记中构建它们,您的所有输入和控件看起来都很棒。不需要多余的 HTML,但我们为需要它的人提供了模式。

更复杂的布局带有简洁且可扩展的类,可轻松进行样式设置和事件绑定,因此您可以在每一步中得到覆盖。

包括四种布局

Bootstrap 支持四种类型的表单布局:

  • 垂直(默认)
  • 搜索
  • 排队
  • 水平的

不同类型的表单布局需要对标记进行一些更改,但控件本身保持不变并且行为相同。

控制状态等

Bootstrap 的表单包括所有基本表单控件的样式,例如您期望的输入、文本区域和选择。但它也带有许多自定义组件,例如附加和前置输入以及对复选框列表的支持。

每种类型的表单控件都包含错误、警告和成功等状态。还包括禁用控件的样式。

四种形式

Bootstrap 为四种常见的 Web 表单样式提供了简单的标记和样式。

姓名 班级 描述
垂直(默认) .form-vertical (不需要) 控件上堆叠的左对齐标签
排队 .form-inline 用于紧凑样式的左对齐标签和内联块控件
搜索 .form-search 用于典型搜索美学的额外圆形文本输入
水平的 .form-horizontal 在与控件相同的行上浮动左、右对齐的标签

仅使用表单控件的示例表单,没有额外的标记

基本形式

无需额外标记的智能和轻量级默认设置。

此处的示例块级帮助文本。

  1. <form class = "well" >
  2. <label>标签名称</label>
  3. <input type = "text" class = "span3" placeholder = "Type something..." >
  4. <span class = "help-block" >此处的示例块级帮助文本。</span>
  5. <标签= “复选框” >
  6. <输入类型= “复选框” >检查我
  7. </标签>
  8. <button type = "submit" class = "btn" >提交</button>
  9. </form>

搜索表格

添加.form-search到表单.search-queryinput.

  1. <form class = "well form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" >搜索</button>
  4. </form>

内联表格

添加.form-inline以精细化表单控件的垂直对齐和间距。

  1. <form class = "well form-inline" >
  2. <输入类型= “文本”= “输入小”占位符= “电子邮件” >
  3. <输入类型= “密码”= “输入小”占位符= “密码” >
  4. <标签= “复选框” >
  5. <input type = "checkbox" >记住我
  6. </标签>
  7. <button type = "submit" class = "btn" >登录</button>
  8. </form>

水平形式

右侧显示的是我们支持的所有默认表单控件。这是项目符号列表:

  • 文本输入(文本、密码、电子邮件等)
  • 复选框
  • 收音机
  • 选择
  • 多选
  • 文件输入
  • 文本区域

除了自由格式的文本,任何基于 HTML5 文本的输入都是如此。

示例标记

鉴于上述示例表单布局,这里是与第一个输入和控制组相关联的标记。、.control-group.control-label.controls都是样式所必需的。

  1. <form class = "form-horizo​​ntal" >
  2. <字段集>
  3. <legend>图例文本</legend>
  4. <div= “控制组” >
  5. <label class = "control-label" for = "input01" >文本输入</label>
  6. <div= "控件" >
  7. <输入类型= “文本”= “输入-xlarge” id = “input01” >
  8. <p class = "help-block" >支持帮助文本</p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

表单控件状态

Bootstrap 具有浏览器支持的焦点和disabled状态的样式。我们删除默认的 Webkitoutlinebox-shadow在其位置应用:focus.


表单验证

它还包括错误、警告和成功的验证样式。要使用,请将错误类添加到周围的.control-group.

  1. <字段集
  2. = “控制组错误” >
  3. </fieldset>
这里有些价值
可能出了点问题
请更正错误
呜呼!
呜呼!

扩展表单控件

前置和附加输入

输入组(带有附加或前置文本)提供了一种简单的方法来为您的输入提供更多上下文。很好的例子包括 Twitter 用户名的 @ 符号或财务的 $。


复选框和收音机

在 v1.4 之前,Bootstrap 需要在复选框和单选框周围添加额外的标记来堆叠它们。现在,重复<label class="checkbox">包装<input type="checkbox">.

还支持内联复选框和收音机。只需添加.inline到任何.checkbox.radio,您就完成了。


内联表单和附加/前置

要在内联表单中使用前置或附加输入,请确保将.add-onandinput放在同一行,不带空格。


表单帮助文本

要为表单输入添加帮助文本,请在输入元素之后包含内联帮助文本<span class="help-inline">或帮助文本块。<p class="help-block">

使用网格系统中的相同.span*类作为输入大小。

您还可以使用不映射到网格、适应响应式 CSS 样式或考虑不同类型的控件(例如,inputvs select.)的静态类。

@

这是一些帮助文本

.00
这里有更多帮助文本
$ .00

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

按钮 类="" 描述
btn 带渐变的标准灰色按钮
btn btn-primary 提供额外的视觉权重并识别一组按钮中的主要操作
btn btn-info 用作默认样式的替代品
btn btn-success 表示成功或积极的行动
btn btn-warning 表示应谨慎执行此操作
btn btn-danger 表示危险或潜在的负面行为
btn btn-inverse 备用深灰色按钮,与语义操作或使用无关

操作按钮

按照惯例,按钮只能用于操作,而超链接用于对象。例如,“下载”应该是一个按钮,而“最近的活动”应该是一个链接。

按钮样式可以应用于任何应用了.btn类的东西。但是,通常您只想将这些应用于<a><button>元素。

跨浏览器兼容性

IE9 不会在圆角上裁剪背景渐变,因此我们将其移除。与此相关的是,IE9 使禁用button的元素卡顿,将文本呈现为灰色,并带有我们无法修复的令人讨厌的文本阴影。

多种尺寸

喜欢更大或更小的按钮?添加.btn-large.btn-small.btn-mini两个额外的尺寸。


禁用状态

对于禁用的按钮,将.disabled类添加到链接和元素的disabled属性。<button>

主链接 关联

小心!我们.disabled这里作为实用类使用,类似于普通.active类,所以不需要前缀。

一类,多标签

在、或元素上使用.btn类。<a><button><input>

关联
  1. <a class = "btn" href = "" >链接</a>
  2. <按钮= “btn”类型= “提交” >
  3. 按钮
  4. </按钮>
  5. <输入= “btn”类型= “按钮”
  6. = “输入” >
  7. <输入= “btn”类型= “提交”
  8. 价值= “提交” >

作为最佳实践,尝试为您的上下文匹配元素以确保匹配跨浏览器呈现。如果您有input<input type="submit">请为您的按钮使用 。

  • 图标玻璃
  • 图标音乐
  • 图标搜索
  • 图标信封
  • 图标心
  • 图标星
  • 图标星空
  • 图标用户
  • 偶像电影
  • 大图标
  • 图标号
  • 图标列表
  • 图标-确定
  • 图标删除
  • 图标放大
  • 图标缩小
  • 图标关闭
  • 图标信号
  • 图标齿轮
  • 图标垃圾
  • 图标主页
  • 图标文件
  • 图标时间
  • 图标路
  • 图标下载-alt
  • 图标下载
  • 图标上传
  • 图标收件箱
  • 图标播放圈
  • 图标重复
  • 图标刷新
  • 图标列表替代
  • 图标锁
  • 图标标志
  • 图标耳机
  • 图标音量关闭
  • 图标音量降低
  • 图标音量
  • 图标-二维码
  • 图标条码
  • 图标标签
  • 图标标签
  • 图标书
  • 图标书签
  • 图标打印
  • 图标相机
  • 图标字体
  • 图标粗体
  • 图标斜体
  • 图标文本高度
  • 图标文本宽度
  • 图标左对齐
  • 图标对齐中心
  • 图标右对齐
  • 图标对齐对齐
  • 图标列表
  • 图标缩进左
  • 图标缩进右
  • 图标-facetime-视频
  • 图标图片
  • 图标铅笔
  • 图标地图标记
  • 图标调整
  • 图标色调
  • 图标编辑
  • 图标分享
  • 图标检查
  • 图标移动
  • 图标-后退
  • 图标-快退
  • 图标向后
  • 图标播放
  • 图标暂停
  • 图标停止
  • 图标转发
  • 图标快进
  • 图标前进
  • 图标弹出
  • 图标-雪佛龙-左
  • 图标-雪佛龙-右
  • 图标加号
  • 图标减号
  • 图标删除标志
  • 图标确定标志
  • 图标问号
  • 图标信息标志
  • 图标截图
  • 图标删除圈
  • 图标-ok-圈
  • 图标禁止圈
  • 图标箭头左
  • 图标箭头右
  • 图标向上箭头
  • 图标-向下箭头
  • 图标共享替代
  • 图标调整大小
  • 图标大小调整小
  • 加号图标
  • 图标减号
  • 图标星号
  • 图标感叹号
  • 图标礼物
  • 图标叶
  • 图标-火
  • 图标-睁眼
  • 图标-闭眼
  • 图标警告标志
  • 图标平面
  • 图标日历
  • 图标-随机
  • 图标评论
  • 图标磁铁
  • 图标-人字形向上
  • 图标-chevron-down
  • 图标转推
  • 图标购物车
  • 图标文件夹关闭
  • 图标文件夹打开
  • 图标调整大小垂直
  • 图标调整大小水平
  • 图标硬盘
  • 图标扩音器
  • 图标铃
  • 图标证书
  • 图标竖起大拇指
  • 图标大拇指向下
  • 图标-右手
  • 左手图标
  • 图标举手
  • 图标向下
  • 图标-圆圈-箭头-右
  • 图标圆圈箭头左
  • 图标-圆圈-向上箭头
  • 图标-圆圈-向下箭头
  • 图标地球仪
  • 图标扳手
  • 图标任务
  • 图标过滤器
  • 图标公文包
  • 图标全屏

构建为精灵

我们没有让每个图标都成为一个额外的请求,而是将它们编译成一个精灵——一个文件中的一堆图像,使用 CSS 来定位图像background-position。这与我们在 Twitter.com 上使用的方法相同,并且对我们来说效果很好。

所有图标类都以.icon-正确的命名空间和范围为前缀,就像我们的其他组件一样。这将有助于避免与其他工具发生冲突。

只要我们在文档中提供链接和信用,Glyphicons就允许我们使用我们的开源工具包中的 Halflings 集。请考虑在您的项目中做同样的事情。

如何使用

Bootstrap 对所有图标都使用<i>标签,但它们没有大小写类——只有一个共享前缀。要使用,请将以下代码放在几乎任何地方:

  1. <i class = "图标搜索" ></i>

还有一些样式可用于倒置(白色)图标,并准备好一个额外的类:

  1. <i class = "icon-search icon-white" ></i>

您的图标有 140 个类别可供选择。只需添加一个<i>带有正确类的标签,就可以了。您可以在sprites.less或本文档中的此处找到完整列表。

小心!在文本字符串旁边使用时,例如在按钮或导航链接中,请务必在<i>标签后留一个空格以保持适当的间距。

用例

图标很棒,但人们会在哪里使用它们呢?这里有一些想法:

  • 作为侧边栏导航的视觉效果
  • 对于纯图标驱动的导航
  • 用于帮助传达动作含义的按钮
  • 带有在用户目的地共享上下文的链接

本质上,在任何可以放置<i>标签的地方,都可以放置图标。

例子

在按钮、工具栏按钮组、导航或前置表单输入中使用它们。