全局CSS样式·Bootstrapv3中文文档Bootstrap中文网

894 498

Bootstrap将设置全局的CSS样式。HTML的基本元素均可以通过class设置样式并得到增强效果。还有先进的栅格系统。

深入了解Bootstrap底层结构的关键部分，包括我们让web开发变得更好、更快、更强壮的最佳实践。

Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

...移动设备优先在Bootstrap2中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap3中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。

在移动设备浏览器上，通过为视口（viewport）设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

排版与链接Bootstrap排版、链接样式设置了基本的全局样式。分别是：

这些样式都能在scaffolding.less文件中找到对应的源码。

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。

.container类用于固定宽度并支持响应式布局的容器。

...

.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下Bootstrap栅格系统的工作原理：

通过研究后面的实例，可以将这些原理应用到你的代码中。

在栅格系统中，我们在Less文件中使用以下媒体查询（mediaquery）来创建关键的分界点阈值。

@media(max-width:@screen-xs-max){...}@media(min-width:@screen-sm-min)and(max-width:@screen-sm-max){...}@media(min-width:@screen-md-min)and(max-width:@screen-md-max){...}@media(min-width:@screen-lg-min){...}栅格参数通过下表可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的。

使用单一的一组.col-md-*栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在”.row内。

.col-md-1

.col-md-1
.col-md-1
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6实例：流式布局容器将最外面的布局元素.container修改为.container-fluid，就可以将固定宽度的栅格布局转换为100%宽度的布局。

...实例：移动设备和桌面屏幕是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即.col-xs-*和.col-md-*。请看下面的实例，研究一下这些是如何工作的。

.col-xs-12.col-md-8.col-xs-6.col-md-4.col-xs-6.col-md-4.col-xs-6.col-md-4.col-xs-6.col-md-4.col-xs-6.col-xs-6实例：手机、平板、桌面在上面案例的基础上，通过使用针对平板设备的.col-sm-*类，我们来创建更加动态和强大的布局吧。

.col-xs-12.col-sm-6.col-md-8.col-xs-6.col-md-4.col-xs-6.col-sm-4.col-xs-6.col-sm-4.col-xs-6.col-sm-4实例：多余的列（column）将另起一行排列如果在一个.row内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

.col-sm-5.col-md-6.col-sm-5.col-sm-offset-2.col-md-6.col-md-offset-0.col-sm-6.col-md-5.col-lg-6.col-sm-6.col-md-5.col-md-offset-2.col-lg-6.col-lg-offset-0RemoveguttersRemovetheguttersfromarowandit'scolumnswiththe.row-no-guttersclass.

.col-xs-12.col-md-8.col-xs-6.col-md-4.col-xs-6.col-md-4.col-xs-6.col-md-4.col-xs-6.col-md-4.col-xs-6.col-xs-6列偏移使用.col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列（column）的宽度。

.col-md-4.col-md-4.col-md-offset-4.col-md-3.col-md-offset-3.col-md-3.col-md-offset-3.col-md-6.col-md-offset-3Youcanalsooverrideoffsetsfromlowergridtierswith.col-*-offset-0classes.

嵌套列为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

Level1:.col-sm-9Level2:.col-xs-8.col-sm-6Level2:.col-xs-4.col-sm-6列排序通过使用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列（column）的顺序。

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如上所示，还有如下所示的定制mixin。

@grid-columns:12;@grid-gutter-width:30px;@grid-float-breakpoint:768px;mixinmixin用来和栅格变量一同使用，为每个列（column）生成语义化的CSS代码。

.wrapper{.make-row();}.content-main{.make-lg-column(8);}.content-secondary{.make-lg-column(3);.make-lg-column-offset(1);}......排版标题HTML中的所有标题标签，

到

均可使用。另外，还提供了.h1到.h6类，为的是给内联（inline）属性的文本赋予标题的样式。

h1.Bootstrapheading

h2.Bootstrapheading

h3.Bootstrapheading

h4.Bootstrapheading

h5.Bootstrapheading
h6.Bootstrapheading
在标题内还可以包含标签或赋予.small类的元素，可以用来标记副标题。

h1.BootstrapheadingSecondarytext

h2.BootstrapheadingSecondarytext

h3.BootstrapheadingSecondarytext

h4.BootstrapheadingSecondarytext

h5.BootstrapheadingSecondarytext
h6.BootstrapheadingSecondarytext
页面主体Bootstrap将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予元素和所有段落元素。另外，

（段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin）。

Nullamquisrisusegeturnamollisornareveleuleo.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Nullamiddoloridnibhultriciesvehicula.

Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecullamcorpernullanonmetusauctorfringilla.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.Donecullamcorpernullanonmetusauctorfringilla.

Maecenasseddiamegetrisusvariusblanditsitametnonmagna.Donecidelitnonmiportagravidaategetmetus.Duismollis,estnoncommodoluctus,nisieratporttitorligula,egetlaciniaodiosemnecelit.

...

中心内容通过添加.lead类可以让段落突出显示。

Vivamussagittislacusvelauguelaoreetrutrumfaucibusdolorauctor.Duismollis,estnoncommodoluctus.

...

使用Less工具构建variables.less文件中定义的两个Less变量决定了排版尺寸：@font-size-base和@line-height-base。第一个变量定义了全局font-size基准，第二个变量是line-height基准。我们使用这些变量和一些简单的公式计算出其它所有页面元素的margin、padding和line-height。自定义这些变量即可改变Bootstrap的默认样式。

Forhighlightingarunoftextduetoitsrelevanceinanothercontext,usethetag.

Youcanusethemarktagtohighlighttext.

Youcanusethemarktagtohighlighttext.被删除的文本对于被删除的文本使用标签。

Thislineoftextismeanttobetreatedasdeletedtext.

Thislineoftextismeanttobetreatedasdeletedtext.无用文本对于没用的文本使用标签。

Thislineoftextismeanttobetreatedasnolongeraccurate.

Thislineoftextismeanttobetreatedasnolongeraccurate.插入文本额外插入的文本使用标签。

Thislineoftextismeanttobetreatedasanadditiontothedocument.

Thislineoftextismeanttobetreatedasanadditiontothedocument.带下划线的文本为文本添加下划线，使用标签。

Thislineoftextwillrenderasunderlined

Thislineoftextwillrenderasunderlined利用HTML自带的表示强调意味的标签来为文本增添少量样式。

对于不需要强调的inline或block类型的文本，使用标签包裹，其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的元素被设置不同的font-size。

你还可以为行内元素赋予.small类以代替任何元素。

Thislineoftextismeanttobetreatedasfineprint.

Thislineoftextismeanttobetreatedasfineprint.着重通过增加font-weight值强调一段文本。

Thefollowingsnippetoftextisrenderedasboldtext.

renderedasboldtext斜体用斜体强调一段文本。

Thefollowingsnippetoftextisrenderedasitalicizedtext.

renderedasitalicizedtextAlternateelements在HTML5中可以放心使用和标签。用于高亮单词或短语，不带有任何着重的意味；而标签主要用于发言、技术词汇等。

通过文本对齐类，可以简单方便的将文字重新对齐。

Leftalignedtext.

Centeralignedtext.

Rightalignedtext.

Justifiedtext.

Nowraptext.

Leftalignedtext.

Centeralignedtext.

Rightalignedtext.

Justifiedtext.

Nowraptext.

改变大小写通过这几个类可以改变文本的大小写。

Lowercasedtext.

Uppercasedtext.

Capitalizedtext.

Lowercasedtext.

Uppercasedtext.

Capitalizedtext.

缩略语当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap实现了对HTML的元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上（对使用辅助技术的用户也可见）,但需要包含title属性。

Anabbreviationofthewordattributeisattr.

attr首字母缩略语为缩略语添加.initialism类，可以让font-size变得稍微小些。

HTMListhebestthingsinceslicedbread.

HTML地址让联系信息以最接近日常使用的格式呈现。在每行结尾添加
可以保留需要的样式。

将任何HTML元素包裹在

中即可表现为引用样式。对于直接引用，我们建议用

标签。

Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.

Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.

多种引用样式对于标准样式的
，可以通过几个简单的变体就能改变风格和内容。

Loremipsumdolorsitamet,consecteturadipiscingelit.Integerposuereerataante.

SomeonefamousinSourceTitle
另一种展示风格通过赋予.blockquote-reverse类可以让引用呈现内容右对齐的效果。

...

列表无序列表排列顺序无关紧要的一列元素。

  • ...
有序列表顺序至关重要的一组元素。

  1. ...
无样式列表移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

  • ...
    • 内联列表通过设置display:inline-block;并添加少量的内补（padding），将所有元素放置于同一行。

  • ...
    • 描述带有描述的短语列表。

    ...
    ...
    水平排列的描述.dl-horizontal可以让
    内的短语及其描述排在一行。开始是像
    的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

    ...
    ...
    自动截断通过text-overflow属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

    通过标签包裹内联样式的代码片段。

    Forexample,<section>shouldbewrappedasinline.用户输入通过标签标记用户通过键盘输入的内容。

    Toswitchdirectories,typecdfollowedbythenameofthedirectory.
    Toeditsettings,pressctrl+,代码块多行代码可以使用

    标签。为了正确的展示代码，注意将尖括号做转义处理。
    Sampletexthere...
    <p>Sampletexthere...</p>
    还可以使用.pre-scrollable类，其作用是设置max-height为350px，并在垂直方向展示滚动条。
    通过标签标记变量。
    y=mx+b
    y=mx+b程序输出通过标签来标记程序输出的内容。
    Thistextismeanttobetreatedassampleoutputfromacomputerprogram.
    Thistextismeanttobetreatedassampleoutputfromacomputerprogram.表格基本实例为任意
    标签添加.table类可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
    ...
    条纹状表格通过.table-striped类可以给之内的每一行增加斑马条纹样式。
    条纹状表格是依赖:nth-childCSS选择器实现的，而这一功能不被InternetExplorer8支持。
    ...带边框的表格添加.table-bordered类为表格和其中的每个单元格增加边框。
    ...鼠标悬停通过添加.table-hover类可以让中的每一行对鼠标悬停状态作出响应。
    ...紧缩表格通过添加.table-condensed类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
    ...状态类通过这些状态类可以为行或单元格设置颜色。
    ..............................向使用辅助技术的用户传达用意通过为表格中的一行或一个单元格添加颜色而赋予不同的意义只是提供了一种视觉上的表现，并不能为使用辅助技术--例如屏幕阅读器--浏览网页的用户提供更多信息。因此，请确保通过颜色而赋予的不同意义可以通过内容本身来表达（即在相应行或单元格中的可见的文本内容）；或者通过包含额外的方式--例如应用了.sr-only类而隐藏的文本--来表达出来。
    将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。
    响应式表格使用了overflow-y:hidden属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。
    Firefox浏览器对fieldset元素设置了一些影响width属性的样式，导致响应式表格出现问题。可以使用下面提供的针对Firefox的hack代码解决，但是以下代码并未集成在Bootstrap中：
    ...表单基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的、多选和单选框多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个。
    Disabledcheckboxesandradiosaresupported,buttoprovidea"not-allowed"cursoronhoveroftheparent
    内联单选和多选框通过将.checkbox-inline或.radio-inline类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
    123123不带label文本的Checkbox和radio如果需要
    下拉列表（select）注意，很多原生选择菜单-即在Safari和Chrome中-的圆角是无法通过修改border-radius属性来改变的。
    对于标记了multiple属性的静态控件如果需要在表单中将一行纯文本和label元素放置于同一行，为
    元素添加.form-control-static类即可。
    email@example.com
    Emailemail@example.com
    PasswordEmailemail@example.com
    Emailemail@example.com
    PasswordConfirmidentity焦点状态我们将某些表单控件的默认outline样式移除，然后对:focus状态赋予box-shadow属性。
    在本文档中，我们为上面实例中的输入框赋予了自定义的样式，用于演示.form-control元素的:focus状态。
    为输入框设置disabled属性可以禁止其与用户有任何交互（焦点、输入等）。被禁用的输入框颜色更浅，并且还添加了not-allowed鼠标状态。
    被禁用的fieldset为
    设置disabled属性,可以禁用
    中包含的所有控件。
    虽然Bootstrap会将这些样式应用到所有浏览器上，InternetExplorer11及以下浏览器中的
    元素并不完全支持disabled属性。因此建议在这些浏览器上通过JavaScript代码来禁用
    。
    DisabledinputDisabledselectmenuSubmit
    只读状态为输入框设置readonly属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。
    HelptextBlocklevelhelptextforformcontrols.
    Helptextshouldbeexplicitlyassociatedwiththeformcontrolitrelatestousingthearia-describedbyattribute.Thiswillensurethatassistivetechnologies–suchasscreenreaders–willannouncethishelptextwhentheuserfocusesorentersthecontrol.
    Inputwithhelptext...Ablockofhelptextthatbreaksontoanewlineandmayextendbeyondoneline.校验状态Bootstrap对表单控件的校验状态，如error、warning和success状态，都定义了样式。使用时，添加.has-warning、.has-error或.has-success类到这些控件的父元素即可。任何包含在此元素之内的.control-label、.form-control和.help-block元素都将接受这些校验状态的样式。
    使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，但是并不能将这种提示信息传达给使用辅助设备的用户-例如屏幕阅读器-或者色盲用户。
    反馈图标（feedbackicon）只能使用在文本输入框元素上。
    虽然下面的例子已经提到各自表单控件本身的
    Hiddenlabel(success)Inputgroupwithsuccess@(success)控件尺寸通过.input-lg类似的类可以为控件设置高度，通过.col-lg-*类似的类可以为控件设置宽度。
    创建大一些或小一些的表单控件以匹配按钮尺寸。
    .........水平排列的表单组的尺寸通过添加.form-group-lg或.form-group-sm类，为.form-horizontal包裹的label元素和表单控件快速设置尺寸。
    LargelabelSmalllabel调整列（column）尺寸用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。
    按钮可作为按钮使用的标签或元素为、（大按钮）Largebutton
    （默认尺寸）Defaultbutton（默认尺寸）Defaultbutton
    （小按钮）Smallbutton（小按钮）Smallbutton
    （超小尺寸）Extrasmallbutton（超小尺寸）Extrasmallbutton
    通过给按钮添加.btn-block类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
    （块级元素）Blocklevelbutton（块级元素）Blocklevelbutton激活状态当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。对于Button链接（）元素可以为基于元素创建的按钮添加.active类。
    为Button跨浏览器兼容性如果为