bootstrap设计理念
2017-02-07 本文已影响110人
Iris_mao
一、栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。网页的布局就在12列的基础上进行等比例划分。
栅格系统.png
二、排版
-
标题
标题等级从h1到h6，字体大小如下图
标题.png
-
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，段落元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
页面主体.png
其中文本的中心内容可以通过样式控制将字体变大
中心内容.png
-
内联文本元素
1.标记文本：用淡黄色背景颜色标记（#fcf8e3）
标记文本.png
2.被删除文本：用横线化除的方式展示
被删除文本.png
3.着重文本：通过加粗或者斜体的方式展示
着重文本.png
4.缩略语：当鼠标悬停在缩写和缩写词上时就会显示完整内容，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。
缩略语.png
5.引用文本：在你的文档中引用其他来源的内容。
引用样式.png
三、表格
-
基本实例：少量的内补（padding）和水平方向的分隔线
基本表格.png
-
条纹状表格：每一行增加斑马条纹样式。
条纹状表格.png
-
带边框的表格：为表格和其中的每个单元格增加边框。
带边框的表格.png
-
鼠标悬停：每一行对鼠标悬停状态作出响应，当鼠标停留在某一行的时候有颜色显示
鼠标悬停.png
-
紧缩表格：让表格更加紧凑，单元格中的内补（padding）均会减半。
紧缩表格.png
-
状态颜色：为单元格设置不同的颜色表示不同的状态
表格不同的状态.png
四、表单
-
表单的宽度依然遵循栅格系统，大小可以通过样式进行控制，bootstrap里控制的大小如下
表单大小.png
-
水平排列的表单组的尺寸
水平排列的表单组.png
五、按钮
-
bootstrap中的预定义样式（宽度依然可以根据栅格系统进行控制）：
按钮预定义样式.png
-
按钮尺寸
按钮尺寸.png
-
颜色
颜色.png
六、导航
-
标签页
标签页.png
-
胶囊式标签页
胶囊式标签页.png
七、分页
-
分页
分页.png
-
翻页
翻页.png
八、徽章
徽章样式.png
九、面板（像其他组件一样，可以简单地通过改变颜色加入有情境效果的状态类，给特定的内容使用更针对特定情境的面版。）
面板.png
