基础CSS

在框架的基础上,对HTML基础元素进行样式定义,并利用可扩展的class增强其展示效果,从而提供形式新颖,风格一致的外观和体验。

标题 & body copy

排版尺度

整个排版系统的单位尺度都取决于variables.less文件中的两个Less变量:@baseFontSize@baseLineHeight。 前者决定全局的默认字体大小font-size,后者决定默认的行高line-height。

我们利用这些变量,配合一些数学运算,就可以得到定义样式时所需的margins, paddings, line-heights等等。

body text例子

许小年:政府掌握了越来越多的资源,制订了日益烦琐的管理方法,为了获得企业发展所需要的资源,或者是仅仅为了生活下去,企业不得不按照潜规则与企业打交道。我非常赞同绿公司提出的要“守本分”,但是要想企业守本分,首先政府要守本分,“逼良为娼”还不是最可怕的,回过头来的“扫黄”才是致命的一击!

余华:在涉及敏感话题时,我以前总是希望别人说出我想说的话。别人有风险,自已很安全。后来意识到如果人人都和我一样,那么我们可能长久生活在风险里。要想抵达安全,风险是必经之路。所以我开始自已说了,越来越多的人已经在自己说了……荷马史诗里描述黑压压的兵勇前进时的情景:他们将大地踩得轰然作响。

h1. 中国共产党万岁

h2. 千年王八万年龟

h3. 我们在下一盘很大的棋

h4. 官人,你这麻将打成相公了

h5. 发言人:谁说中国互联网不自由了?
h6. 404 error 网址找不到

强调,地址,缩写

元素 用法 选项
<strong> 加粗强调一组文字
<em> 倾斜强调一组文字
<abbr> 包装缩写词,当鼠标经过时显示缩写词完整含义。比如少先队

可使用 title 属性存放完整字词信息

使用 .initialism 类可以将缩略词大写。
<address> 用于包装联系信息的最外层元素或整个信息。 使用 <br> 换行以保持格式不变

强调文字的例子

李宗苗:车辆年检,195元/辆全深圳300万辆,年收5.85亿元。

杨佩昌:在德国,汽车、公司都无需年检。我问德国人:汽车不年检,坏了怎么办?答:自己修车。问:企业不年检,公司倒闭如潮怎么办?德国人答:你看德国是这样的吗?我问:德国政府为何不强制年检?德国人反问:谁给了政府这个权力?如果政府对年检感兴趣,说明这种事对它有好处。

注意: 在HTML5仍可以使用 <b><i> 标签,但是它们的用途已经发生了改变。 <b> 仅仅用来加粗单词或短语,没有任何语义上的含义。而 <i> 主要用在语音和技术等方面。

地址的例子

这有两个使用 <address> 标签的例子:

TVlike文化有限公司
哪个省哪个市无名大道404号
佚名大厦89层64号
P: (123) 456-7890
有关负责人
[email protected]

缩写的例子

使用 title 属性的缩写词会带有点状(dotted)底边线,鼠标经过时会显示带问号的箭头,并提示完整的字词信息。

对缩写词元素应用 .initialism 会减小一号字体大小,以协调排版效果。

例子:Html 是自切片面包问世以来最棒的发明。

例子:共青团是一个光荣而伟大的组织哟~

引用

元素 用法 选项
<blockquote> 用于引用外部内容的块级元素

cite 属性存放来源URL

.pull-left.pull-right 决定是内容居左还是居右
<small> 可选元素,用于添加针对用户的引用,通常用于引言的作者。 可以将引言或出处置于 <cite> 标签内。

<blockquote> 嵌套 HTML 即可实现引用。 对于连续的引用内容,建议使用 <p> 标签。

还可以添加一个可选的 <small> 元素来表示引用的出处,该元素会利用样式在内容前加入宽度为一个字长的破折号 &mdash;

<blockquote>
  <p>一天吃六个胶囊,一天三次、一次两个,没有吃掉多少铬。</p>
  <small>卫生部合理用药专家孙忠实</small>
</blockquote>

引用的例子

默认引用样式如下:

一天吃六个胶囊,一天三次、一次两个,没有吃掉多少铬。

卫生部合理用药专家孙忠实 于人民网强国论坛

class="pull-right" 将引用内容居右:

我曾沾的光使我终身受益,因家庭牵连,我被关进监狱。五年的监狱生活,使我经受了磨难,锻炼了意志,学会了思考,懂得了公平,民主,法制对一个社会是多么重要;温饱,自由,尊严对一个人是多么重要!

薄熙来 于1993年3月于大连经贸会

列表

无序号

<ul>

  • Django是个好框架
  • Pyramid是个好框架
  • Tornado是个好框架
  • Flask是个好框架
  • Uliweb是个好框架
    • MVT模型
    • 组织结构
    • 资源共享的处理方式
    • URL映射
    • View和Template
    • ORM
    • I18N
    • 功能扩展
    • 命令行工具
    • 运行环境支持
    • 其它特点
  • Bottle是个好框架
  • Rails是个好框架
  • Yii是个好框架

无样式

<ul class="unstyled">

  • 以动手实践为荣 , 以只看不练为耻;
  • 以打印日志为荣 , 以单步跟踪为耻;
  • 以空格缩进为荣 , 以制表缩进为耻;
  • 以单元测试为荣 , 以人工测试为耻;
    • UnitTest很不错
    • Nose也很好用
    • 配合Profile很爽
    • 配合pdb也不错
  • 以模块复用为荣 , 以复制粘贴为耻;
  • 以多态应用为荣 , 以分支判断为耻;
  • 以Pythonic为荣 , 以冗余拖沓为耻;
  • 以总结分享为荣 , 以跪求其解为耻;

有序号

<ol>

  1. 以热爱祖国为荣,以危害祖国为耻吗?
  2. 以服务人民为荣,以背离人民为耻吗?
  3. 以崇尚科学为荣,以愚昧无知为耻吗?
  4. 以辛勤劳动为荣,以好逸恶劳为耻吗?
  5. 以团结互助为荣,以损人利己为耻吗?
  6. 以诚实守信为荣,以见利忘义为耻吗?
  7. 以遵纪守法为荣,以违法乱纪为耻吗?
  8. 以艰苦奋斗为荣,以骄奢淫逸为耻吗?

描述

<dl>

描述列表
适用于术语的定义/解释
Django
Django 是一种高级的基于python的web开发框架;
Django推崇一种快速,整洁而且实用主义哲学的设计及开发方式
Tornado
Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本。

水平状态的描述

<dl class="dl-horizontal">

描述列表
适用于术语的定义/解释
Django
Django 是一种高级的基于python的web开发框架;
Django推崇一种快速,整洁而且实用主义哲学的设计及开发方式
Tornado
Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本。

行级代码片段

使用 <code> 包装行级代码片段

例如,<code>section</code> 应该被做为行级代码包装。

基本块状内容

使用<pre> 对多行代码进行包装。 切记一定要对代码中的每个<>进行转义,这样方能得到正常的渲染结果。

<p>示范文本...</p>
<pre>
  &lt;p&gt;示范文本...&lt;/p&gt;
</pre>

注意: 尽可能地让 <pre> 左对齐;因为会渲染所有空格和tab(就是你键盘左边的那个tab键)。

还可以使用 .pre-scrollable 给代码区域设置350px的最大高度并设置一个纵向滚动条。

Google Prettify 美化代码

<pre> 元素上应用 .prettyprint.linenums 增强代码渲染效果。 .linenums 用于显示行号。

<p>示范文本...</p>
<pre class="prettyprint
     linenums">
  &lt;p&gt;示范文本...&lt;/p&gt;
</pre>

下载 google-code-prettify 并查看 使用指南.

表格标记

标签 描述
<table> 用以包装表格化的数据
<thead> 容纳表格标题行 (<tr>)以标识表格列,
<tbody> 容纳表格行 (<tr>)
<tr> 容纳行内的一组单元格 (<td> or <th>)
<td> 默认的表格单元格
<th> 用于列头(或是行,取决于标签所在位置和区域)的特殊标签
必须置于 <thead> 标签内。
<caption> 表格用途的描述或摘要,对屏幕阅读器(视障人士读屏软件)非常有用
<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

表格选项

名称 描述
默认 None 无样式,仅仅有列和行
基本 .table 行与行之间以水平线相隔
有边线 .table-bordered 表格外围均有外边框
间隔背景 .table-striped 奇数行背景设为浅灰色
紧凑 .table-condensed 竖直方向padding缩减一半,从8px变为4px,所有的 tdth 元素都受影响

表格的例子

1. 默认表格样式

仅使用一组边线对表格进行格式化,以保证可读性并维持表格结构不变。 从 2.0 版本开始, 该效果不再做为默认,必须使用 .table

<table class="table">
  …
</table>
# 电视剧 类型 年代
1 爱情公寓 都市爱情喜剧 2010
2 邪恶力量 悬疑魔幻 2005
3 神探伽俐略 推理探案 2008

2. 背景交替的表格

添加 .table-striped 让表格变得生动一点。

注意: 该效果要用到 :nth-child CSS 选择器,IE7-IE8不支持该特性,因而也无法呈现效果。

<table class="table table-striped">
  …
</table>
# 电视剧 类型 年代
1 爱情公寓 都市爱情喜剧 2010
2 邪恶力量 悬疑魔幻 2005
3 神探伽俐略 推理探案 2008

3. 有边线的表格

为整个表格添加边线,出于美观考虑,每个边角都呈现圆角。

<table class="table table-bordered">
  …
</table>
# 电视剧 类型 年代
1 爱情公寓 都市爱情喜剧 2010
2 邪恶力量 悬疑魔幻 2005
3 神探伽俐略 推理探案 2008

4. 紧凑表格

添加 .table-condensed 让表格更加紧凑,所有表格单元的padding都会减半(从8px到4px)

<table class="table table-condensed">
  …
</table>
# 电视剧 类型 年代
1 爱情公寓 都市爱情喜剧 2010
2 邪恶力量 悬疑魔幻 2005
3 神探伽俐略 推理探案 2008

5. 组合使用

自由组合搭配表格类以实现不同的外观。

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
# 电视剧 类型 年代
1 爱情公寓 都市爱情喜剧 2010
2 邪恶力量 悬疑魔幻 2005
3 神探伽俐略 推理探案 2008

灵活的HTML和CSS

Bootstrap的优异之处在于:不管我们在应用中怎样使用表单输入元素和控件,其展示效果都特别棒! 无需使用过多的HTML,况且我们已经还内置了几种常用模式。

更复杂的布局可以用简单而可扩展的类实现,更利于样式化和事件绑定。

包含四种布局

Bootstrap提供了下列四种表单布局:

  • 垂直式布局 (默认)
  • 搜索式布局
  • 行式布局
  • 水平式布局

四种布局虽然在标记上有不些许同,但都使用同样的表单控件,在表单行为上也是一致的。

控件状态以及其他

Bootstrap对于所有的基本表单控件(如input,textarea,select等等)都进行了样式定义。 同时也提供了一组自定义组件,比如前置/后置输入框和复合选框列表。

每种表单控件都有 error, warning, success 等不同状态,Bootstrap还包括了控件禁用时的样式。

四种表单

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

名称 描述
垂直式 (默认) .form-vertical (非必填,默认) 堆叠式的,所有控件的标签文字都左对齐
行式 .form-inline 标签文字左对齐,控件以inline-block紧凑形式存在
搜索式 .form-search 经典的搜索美化方案,对文本框进行圆化
水平式 .form-horizontal 左浮动,标签与其对应的控件居于同一行,标签文字右对齐

表单单例 仅仅使用表单控件,无须额外标记

基本表单

2.0版本开始使用更为简洁灵活的表单默认样式,只使用表单控件,无须额外标记。

<form class="well">
  <label>标签名称</label>
  <input type="text" class="span3" placeholder="请输入文字...">
  <span class="help-inline">相关提示信息</span>
  <p class="help-block">块状帮助文字...</p>
  <label class="checkbox">
    <input type="checkbox"> 选我选我
  </label>
  <button type="submit" class="btn">Submit</button>
</form>

表单表单

借鉴了Webkit的默认样式,使用 .form-search 圆化搜索文本框

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

行级表单

使用 .form-inline.form-horizontal 将原始的块状文本框样式变成 inline-block。

<form class="well form-inline">
  <input type="text" class="input-small" placeholder="邮件">
  <input type="password" class="input-small" placeholder="密码">
  <label class="checkbox">
    <input type="checkbox"> 记住我
  </label>
  <button type="submit" class="btn">登录</button>
</form>

水平布局表单

Bootstrap支持的控件

除了文本域之外,任何HTML5输入框都是该样式

标记的例子

根据上面的例子,这里将展示如何标记一个控件组。 需要用到 .control-group, .control-label, 和 .controls 类。

<form class="form-horizontal">
  <fieldset>
    <legend>完善资料</legend>
    <div class="control-group">
      <label class="control-label" for="input01">您的尊姓大名</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">字母,数字,汉字皆可</p>
      </div>
    </div>
    <div class="control-group">
      <label class="control-label" for="input01">您的twitter网址</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="input01">
        <p class="help-block">请输入您的twitter网址,以便我们收录</p>
      </div>
    </div>
  </fieldset>
</form>
完善资料

字母,数字,汉字皆可

请输入您的twitter网址,以便我们收录

包含哪些控件

左侧即是bootstrap支持的所有默认表单控件:

  • 文本输入框 (文本,密码,邮件等等)
  • 复选框
  • 单选框
  • 下拉框
  • 多选框
  • 上传框
  • 文本域

2.0版对表单默认布局的改变

1.4版之前,Bootstrap使用水平布局做为默认表单样式。从2.0版开始,我们不再默认水平布局,而采用更灵活更易扩展的垂直式布局做为默认布局。


表单控件状态
不可编辑,只读
警告信息
错误信息
耶!
耶!

重新设计的浏览器状态

Bootstrap重新设计了浏览器本身所定义的 focuseddisabled 状态。 我们去除了Webkit默认的 outline 并对 :focus 状态应用了 box-shadow


表单验证

Bootstrap还包含error,warning,success的验证样式。使用时将error类添加到控件外层的 .control-group 元素上即可。

<fieldset
  class="control-group error">
  …
</fieldset>

扩展表单控件

同样是使用 .span* 类来指定输入框大小

静态类指定的尺寸与栅格系统的尺寸并不匹配,且自适应响应式样式,只对几种控件有效(比如 inputselect).

@

这里显示帮助信息

.00
这里显示帮助信息
$.00

注意 建议使用label标签将option选项包裹起来,这样可以提供更大的点击区域,提升表单可用性。

前置 & 后置输入框

带前置/后置文本的输入组更有助于我们为输入框提供更多内容。在左侧的例子中,我们用@表示Twiiter某人,用$表示货币。


单选框和复选框

在1.4版本之前,Bootstrap罗列单选框和复选框时,要将它嵌套到到其他标记内。 从2.0版开始,只须用 <label class="checkbox"> 包含 <input type="checkbox"> 即可。

Bootstrap也支持行级单选框和复选框。只要对 .checkbox.radio 应用 .inline 即可。


行级表单的前置/后置文本

在行级表单中使用前置/后置文本的输入框时,一定要确认 .add-oninput 在同一行,之间不得有空行和间隔。


表单帮助/提示文本

对表单中的输入框添加帮助/提示文本时,添加 <span class="help-inline"> 就是使用行级帮助文本; 在输入框后添加 <p class="help-block"> 就是使用块状帮助文本。

按钮 类class="" 描述
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 类,或是在 <button> 元素中设置 disabled 属性,却可将其变成禁用状态。

首要链接 链接

注意! 我们把 .disabled 做为工具类来用,就象使用 .active 一样,因而无须添加.btn前缀。

按钮类可用于多种标签

可以在<a>, <button>, <input> 等元素上使用 .btn 类。

超链接按钮
<a class="btn" href="">超链接按钮</a>
<button class="btn" type="submit">
  button按钮
</button>
<input class="btn" type="button"
         value="input-button按钮">
<input class="btn" type="submit"
         value="input-submit按钮">

做为最佳实践,出于跨浏览器兼容的考虑,建议您根据内容为按钮选择最合适的元素。比如你正在使用 input ,就可以将按钮设计为 <input type="submit">

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

使用css sprite

我们将所有图标放入一个文件中,这样就避免了每次使用不同图标时都发起额外的请求。 借助 background-position 修改背景位置,一整张图片可以显示出多个小图标。我们在twitter.com就是这么用的,效果不错。

和其他组件一样,出于命名和识别的方便,所有图标类都有一个 .icon- 前缀。 这样会避免与其他组件相冲突。

Glyphicons 允许我们在开源工具箱中使用他们设计的小型图标,前提是我们要在文档中提供链接和声明。 如果您的项目也使用了这组图标,不妨也这么做。

如何使用

Bootstrap用 <i> 标签显示图标。图标类只有一个共同的前缀,没有基准类。 用法如下:

<i class="icon-search"></i>

.icon-white 类显示反白图标:

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

有120种图标可供显示,只须对 <i> 标签使用相应的图标类即可,完整图标列表在 sprites.less 文件中。

强调! 在图标毗邻文本时,比如buttons或导航链接,要保证在 <i> 与文本之间有空格。

使用场景

图标是个好东西,不过用在什么场合却是个值得商榷的问题。下面是一些适用场景:

  • 用于增强侧边导航栏的视觉效果
  • 用于制作纯图标的导航栏
  • 帮助用户理解按钮的作用
  • 帮助用户间通过链接分享内容

一般来说,任何可以使用 <i> 标签的地方,都可以将其变成图标

例子

可用在按钮,按钮组的工具条,导航栏或是输入框的前缀中。