Bootstrap—基础样式定义

本章主要是介绍Bootstrap默认的基础样式定义,利用这些基础的定义相互组合,完成页面的整体风格定义甚至是更具体的效果。
Bootstrap应该是一个基础工具,它的好处在于已经帮你定义了一个基础的样式风格,对一个网站来说,风格统一的页面们是相当重要的(除非你的站点已经复杂到需要做一些定制化的页面);还解决了主流浏览器兼容问题。但对于国内的使用者来说,存在一个比较严重的问题——并不支持IE6。
就我个人的认知来看,在使用的时候,我们总是需要根据自己的需求对Bootstrap框架做一些调整,比如兼容ie6,比如更换部分组件的风格,比如增加图标或去除不需要的图标,比如增加一些组件样式支持等等等等。
本章内容包含:基础排版样式,代码块样式,表单样式,按钮样式和图标。本章的所有示例,包括翻译都在示例页面中。

基础排版样式标题,段落,列表和其他

Bootstrap的排版体系基于两个在variables.less文件中定义的变量: @baseFontSize 和 @baseLineHeight。其含义正如其变量名一样,第一个变量是字体大小的基础值,而第二个变量是行高的基础值。
通过对两个基础值的计算来创建如外边距、内补白、行高等值。

强调,地址和缩写

元素标签 用法 可选项
<strong> 用来强调文本中重要(important)的片段
<em> 用来强调文本片段的重要性(stress)
<abbr> 用来包裹缩略语和首字母缩写,在鼠标悬浮时显示完整的词句 title属性用来显示完整的词句

 

使用样式名.initialism将标签内的字母显示为大写。

<address> 用来显示联系信息 (For contact information for its nearest ancestor or the entire body of work) 需要在每一行内容末尾添加<br>以保证显示样式是正确的。

<strong>和<em>标签,都是用来表示强调的,但是具体的差别在哪里呢?可以参考一下这篇文章——《em和strong的区别》。
<address>标签实际表示的不仅仅是地址信息这么简单,而是联系信息的概念。在HTML5中,根据它的位置有不同的含义。具体可以参考W3CSchools的介绍。
缩略语标签<abbr>的title属性用来定义该缩略语的完整定义,在显示上会有一条虚线底边,且悬浮时鼠标样式为问号。

blockquote标签

元素标签 用法 可选项
<blockquote> 用来显示从其他地方引入的内容的块级元素标签 增加cite属性来标识引用来源的URL地址
使用样式名.pull-left.pull-right来设置浮动选项。
<small> 可选的元素标签,用以显示一些面向用户的引用信息,典型的用法是用来标识引用内容的标题和作者名。 标签来标识标题或者名称。

关于列表的样式

Bootstrap默认定义了几种样式,包括无序列表,无默认样式的列表,有序列表,定义列表(definition list)。
具体展示样式,请看示例。

代码片段

内联的代码片段使用<code>标签,而代码块的展示则使用<pre>标签。一定要注意将尖括号(<>)转义为实体符号以保证能正确的展现代码。可以添加样式名.pre-scrollable,来限制代码块展示的最大高度。
使用Google Prettify来美化和高亮显示代码。只需要设置样式名prettyprintlinenums即可。具体可以下载google-code-prettify源码,查看说明文档

表格

表格相关标签说明

标签名 说明
<table> 用表格的形式来显示数据的容器标签。
<thead> 用来包裹多列表格的表头(<tr>)的容器标签
<tbody> 用来包裹多列表格的表格行(<tr>)的容器标签
<tr> 用来包裹单元格(<td><th>)集合的表格行。
<td> 用来定义单元格
<th> 用来标注列(或行,依赖于上下文和摆放的位置)中的特殊的单元格。
必须放在<thead>标签中。
<caption> 用来描述和概括表格的作用,尤其适合在屏幕阅读器。

表格样式选项

选项名称 样式名 说明
默认 没有样式
基本样式 .table 只有单元行之间的分割线
边框 .table-bordered 表格外边框和圆角
斑马线 .table-striped 在奇数行(1, 3, 5 等等)添加浅灰色背景色
紧凑表格 .table-condensed 所有单元格td and th元素内补白减半,从8像素减少到4像素

默认会对表格增加一些基本的样式,比如基本的边框样式等以保证表格的可读性。如果需要更多的样式,则需要增加.table样式名。
通过样式名.table-striped可以添加斑马线效果,但需要注意的是,由于斑马线效果使用的是:nth-child来实现的,所以IE7-IE8是不支持的(当然也包括IE6)。
通过样式名.table-bordered样式名来定义表格的圆角和边框效果。通过样式名.table-condensed的设置,可以使表格看起来更加的紧凑,它实际是通过将单元格的内补白减半(padding由8像素减小到4像素)的方式来实现的。
通过这些表格样式选项的组合,可以展现出你需要的不同的效果。

表单

Bootstrap中表单部分的设计,不仅针对具体的表单域做了样式的定义,还提供了一些布局类型来展示表单集合。共有4种表单布局类型:

  • 垂直对齐 (默认)
  • 搜索类型
  • 内联
  • 水平对齐

不同类型的表单布局更换需要对结构做一些调整,但是表单控件本身不需要做任何的修改。
Bootstrap的表单定义包含了所有基础的表单控件的样式定义,还增加了一些自定义的组件样式定义,如输入框的前置/后置文本以及复选框列表。每个表单控件还会有如错误,警告,成功以及不可用等状态的显示。

4种表单布局类型

Bootstrap提供了简单的结构和设计来显示常见的web表单。

类型名称 样式名 描述
垂直对齐 (默认) .form-vertical (不是必须的) 分层的,做对齐的表单控件
内联 .form-inline 向左对齐并在同一行内显示完成的表单
搜索类型 .form-search 为搜索框附加典型的圆角效果
水平对齐 .form-horizontal 每行向左浮动,标签文本向右对齐

Bootstrap的表单样式设计相对较简洁,实现的效果通常都不需要增加额外的标签。
默认的表单布局是垂直方向对齐的,通过对表单<form>设置对应的样式名来定义表单的布局类型。如,设置样式名为.form-inline,则表单布局类型切换到内联布局,则所有的表单控件的显示模式变为display:inline-block,正如你了解的,它们会在同一行内显示。而搜索类型的布局,主要提供了圆角的样式。
所谓水平对齐类型可能是我们最常见的表单布局类型样式——左边是标签文案用<label>来表示表单的含义;右边是表单控件。具体使用方法和效果可以参考示例文件。
关于表单控件的状态,Bootstrap支持表单控件的聚焦和不可用状态展示,默认去除了webkit浏览器默认的outline效果,并增加了盒阴影box-shadow来代替原有的聚焦效果。

表单扩展控件

前置 & 后置的输入框

表单组—带有前置或后置文本—为你的输入框提供了一种简便的方式来更好的传达用意。如示例页面中——Twitter用 @ 符号来标识用户名,还有用 $ 标识资产。

复选框和单选框

升级到1.4版本以后,Bootstrap需要用额外的标签包裹复选款和单选框来将它们组合起来。而现在,之需要简单的用<label>标签来包裹<input type="checkbox">就可以了。
同行显示的复选框和单选框也是被支持的。只需要给.checkbox.radio标签增加样式名.inline就行了。

Inline forms and append/prepend

在同一行内显示前置或后置文本输入框,需要确保.add-on的元素和input元素放在同一行,并且它们之间不能有空格。

表单帮助信息

添加帮助信息到<span>标签中来显示内联的提示信息。也可以在输入框元素后面使用<p>来显示块级提示信息。

按钮

按钮 样式名 描述
btn 标准的带渐变的灰色按钮效果
btn btn-primary 给默认的按钮增加额外的视觉效果,用来表示一些主要的行为。
btn btn-info 用来取代默认的样式
btn btn-success 表明一个成功的行为
btn btn-warning 表明应当要谨慎执行该操作
btn btn-danger 表明是一个有风险的操作
btn btn-inverse 可选的按钮样式,没有明显的语意。
Alternate dark gray button, not tied to a semantic action or use

为行为创建按钮

作为约定,按钮标签(button)应当只用于动作,而超链接则用于对象的描述。举个例子,“下载”应该是一个按钮(button)而“最近的活动”则应该是一个链接。
凡是使用.btn样式名的元素都会有按钮的样式。但是应当只使用<a><button>元素来作为按钮显示。

跨浏览器兼容

关于跨浏览器的兼容,很显然IE又拖后腿了——IE9对背景渐变支持不够良好,所以Bootstrap移除了对它的支持。

不同尺寸的按钮

通过额外添加样式名.btn-large.btn-small,或.btn-mini来显示为不同的尺寸。

不可用状态(disabled)

对于不可用的按钮,通过添加样式名.disabled并给按钮<button>添加disabled属性来表现。

同一个样式名,不同的标签

事实上,通过添加.btn样式名就可以渲染出按钮的样式。按钮的标签可以是<a><button>或 <input>标签。但是你最好还是根据实际的上下文场景来选择标签。

图标 Glyphicons提供

关于sprite技术这边就不再多说了,如果有不了解的朋友可以google一下。Bootstrap的图标就使用了sprite的方式。
Bootstrap的图标使用<i>标签作为所有图标的显示容器,通过添加约定的样式名来显示对应的图标。共有120个图标供大家使用,你可以在原文档,示例页面或者在sprites.less文件中找到完整的样式列表。
以上就是本章节的内容,更具体的信息可以在Bootstrap官方文档中查看。Bootstrap对于不了解CSS或者烦恼于跨浏览样式定义以及希望快速使用、敏捷开发的朋友是大有裨益的,但是在使用时还是建议根据自己的需要进行选择。

 

文章出处:http://www.36ria.com/5466

你可能感兴趣的:(bootstrap)