您的位置：360文档中心› Bootstrap简易使用指南

Bootstrap简易使用指南

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Bootstrap简易使用指南

看完使用手册后所作的笔记，可以当做简易使用指南使用。

1.框架

1.1全局样式

使用HTML5的doctype，scaffolding.less中定义全局样式，从2开始使用normalize.css，并使用reset.less进行简化

1.2默认栅格系统

940px宽12列栅格，使用row与span[NUM]的class来控制，使用offset[NUM]来控制偏移，于non-fluid可以直接嵌套，提供了四种响应式方案

1.3流动栅格系统

基于百分比，将row改为row-fluid即可使用，内嵌注意宽度是按照父列的百分比进行计算的

1.4自定义栅格

于variables.css中改变变量，默认列12，宽60px，间隔20px，要保证响应性还得修改responsive.less中内容

1.5布局

container为940px居中，container-fluid则为流体布局

1.6 响应式设计

responsive.less中提供了一组media query：

智能手机《=480px；流式列，非固定宽度

垂直平板《=767px；流式列，非固定宽度

水平平板》=768px；42px 20px

默认》=980px；? ? ?60px ?20px

大分辨率》=1200px；70px 30px

要求添加meta标签，

initail-scale=1.0″>

有诸如.visible-phone等支持类

2.基础CSS

2.1 排版

整个排版单位基于variables.less中@baseFontSize与@baseLineHeight两个变量；

强调：string加粗，em倾斜，abbr缩写【title属性存放显示信息，.initialism会减小缩略词字体】，address【使用br换行】

引用：blockquote【cite属性存放来源URL，.pull-left或right决定内容居左右】，small用于引言作者【会在内容前加入破折号】

列表：ul无序号有黑点，ul.unstyled无样式，ol有数字序号，dl描述，dl.dl-horizontal水平描述

2.2代码

code行级代码，pre块级【<>需要转义，.pre-scrollable可以设置350px最大高度】，应用.prettyprint和.linenums来美化代码【使用google prettify】

2.3表格

table thead【tr】tbody【tr】tr【td或th】th【必须在thead之内】caption；

.table行之间有水平线分割【2.0开始为默认】 .table-borderd 【边角为圆角】.table-striped 奇偶分开【使用:nth-child ie7-8不支持】 .table-condensed 紧凑竖直方向padding减半几个可以组合使用

2.4表单

四种表单：.form-vertical【2.0后默认，控件标签文字左对齐】.form-inline【左对齐，控件inline-block】 .form-search【文本框圆化】 .form-horizontal【左浮动，标签与控件居于同

一行且文字右对齐】

支持控件：文本输入框，单选，复选，下拉，多选，上传，文本域

控件组：.control-group .control-label以及.controls【默认label应该与控件在同一行？】

设计了各种控件状态【如focus，disabled，去除webkit的outline】，包

含.error .warning .success验证样式

扩张控件：.span*来指定输入框大小，使用.input-mini或small或medium或big来指定input 和select控件大小，2.0开始对.checkbox或.radio应用.inline即可实现行级，用

label.checkbox包含input[type=checkbox]即可罗列，前置或后置文本保证.add-on与input 在同行, .help-inline与.help-block设置帮助文本

2.5 按钮

可以应用到a button及input标签上，.btn .btn-primary .btn-info等样式【ie9不兼容】，.btn-large small mini等尺寸，.disabled类或disabled属性可以禁用

2.6 图标

使用.icon-前缀设置，用x显示图标，用.icon-white显示反白图标，图标定义在sprites.less 中

3.组件

3.1按钮

3.1.1按钮组

建议一个组里只用一种元素或