bootstrap基础

相信大多数后端开发人员的html，css并不是太好（主要说我）。想要做一些网页效果，难度会比较大。看了下bootstrap这个前端框架，发现这个框架比较好的解决了网页效果制作中一般性问题。总的来说，bootstrap可以帮助我们在尽量不写css的情况下，就能实现一些大众效果。非常适合后台开发。以下为自己整理的一些学习笔记，方便日后追查

笔记分为几部分，基础部分，组件类，插件类

基础部分

列表

ul 无序列表

ol有序列表

去点列表 ol/ul class list-unstyled

内联列表 ol/ul class list-inline

 

列表 dl dt dd

水平列表 dl class dl-horizontal

 

代码

<code>  针对于单个单词或单个句子的代码

<pre>  针对于多行代码（也就是成块的代码）class pre-scrollable

<kbd>  表示用户要通过键盘输入的内容

 

表格

table 提供的几种表格，class区分, 写在table上

table 基础表格

table-striped 斑马线表格

table-bordered 带边框表格

table-hover 鼠标悬停高亮显示表格

table-condensed 紧凑型表格

table-responsive 响应式表格

表格行颜色， class区分，写在tr上

active 表示当前活动的信息 #f5f5f5

success 表示成功或正确的行为 #dff0d8

info 表示中立的信息或行为 #d9edf7

warning 表示警告，需要特别注意 #fcf8e3

danger 表示危险或者可能是错误的行为 #f2dede

 

表单

为避免控件在各种表单中不出错，控件添加 class form-control 选择性

水平表单 form class form-horizontal

内联表单 form class form-inline 

输入框 input type text

下拉选择框 select 多选 multiple

文本域 textarea

复选框 checkbox 单选按钮 radio

表单控件大小 适用于input textarea，select。 class input-sm 小, input-lg 大

表单控件禁用状态 disabled

表单验证状态 class has-warning 警告黄色 has-error 错误红色 has-success 成功绿色。小图标支持 class has-feedback

表单提示信息  class help-block help-inline

 

按钮 

基本按钮 class btn

默认按钮 class btn-default

多标签支持 不仅仅button标签可以用来做button，也可以用其他标签来制作，比如span，div

定制风格 class btn为基础，追加 btn-default 默认，btn-primary 主要，btn-success 成功，btn-info 信息，btn-warning 警告，btn-danger 危险，btn-link 链接

按钮大小 class btn为基础，追加 btn-lg 变大，btn-sm 变小，btn-xs 超小

块状按钮（铺满整行） class btn-block

 

图像

img标签 class img-responsive 响应式图片，img-rounded 圆角，img-circle 圆形，img-thumbnail缩略图 大小不改变

 

图标

通过css3的font-face属性配合字体实现图标效果

bootstrap使用了 glyphicon，作用于内联元素 详见 http://getbootstrap.com/components/#glyphicons

 

网格（栅格）系统

网格系统的实现原理非常简单，仅仅是通过定义容器大小，默认平分12份(也可以平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

class

容器 container

行 row

列 col-xs-*， col-sm-*，col-md-*，col-lg-* 不同尺寸不同class

列右偏移 col-md(xs,sm,lg)-offset-* 向右偏移多少列

列排序（推拉）col-md(xs,sm,lg) -push-*，col-md(xs,sm,lg) -pull-* 左拉右推

列嵌套  可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列

 

---

 

组件类

菜单，按钮，导航

下拉菜单 使用方法

下拉分隔线  下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能

 

下拉菜单标题 通过class dropdown-header 控制，作用在li上

 

下拉菜单对齐 通过class控制 作用在ul上 pull-right, dropdown-menu-right 右对齐，dropdown-menu-left 左对齐

 

下拉菜单状态 通过class控制 ，active 当前选中状态，disabled 禁用状态

案例

 

效果

按钮

按钮组  将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮 通过class btn-group控制

 

按钮工具栏  在富文本编辑器中，将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组。只需将class btn-group 放在大的容器btn-toolbar中。对于按钮组可以对按钮大小进行控制，按钮组btn-group上追加 btn-group-lg 大按钮组， btn-group-sm小按钮组，btn-group-xs超小按钮组

按钮（嵌套分组）类似水平导航  把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级

按钮（垂直分组）  btn-group 换成 btn-group-vertical

按钮（等分按钮） 整个按钮组宽度是容器的100%，而按钮组里面的每个按钮平分整个容器宽度。 按钮组btn-group上追加 btn-group-justified

按钮下来菜单  本质就是普通的下拉菜单，只不过把外层容器 dropdown换成了btn-group

按钮向上向下三角形 通过css代码实现。 按钮的向下三角形，向下是通过在<button>标签中添加一个<span>，class为caret;向上需要在btn-group上追加 dropup

 嵌套分组案例

效果

导航

导航借助于ul无序列表

 

导航基础样式 ul添加class nav

标签型导航 ul追加 nav-tabs

胶囊型导航 ul追加 nav-pills

垂直导航 ul追加 nav-stacked

自适应导航 ul追加 nav-justified

二级导航 只需在以上导航的基础上，将li作为父容器，使用类名dropdown,同时li中嵌套一层下来列表。此方法不适合3级导航

面包屑导航 借助ol，ol加入class breadcrumb

二级导航案例

效果

导航条

导航条和导航的明显差别在于导航条有一个背景色

基础导航条 第一步，首先在制作导航的列表（<ul class="nav">）基础上添加class navbar-nav;第二部，在列表外部添加一个容器（div）,并且使用class navbar navbar-default

导航条添加标题 通过class navbar-header和navbar-brand

带表单导航条 在navbar容器中放置一个class为 navbar-form的表单form

固定导航条 导航条可以固定在窗口顶部会底部 通过在外部容器navbar上追加 class navbar-fixed-top 浏览器顶部 navbar-fixed-bottom 浏览器底部

响应式导航条 用到查官网

反色导航条 另一种风格导航条，黑底白字，比较高大上 只需把navbar-default换成navbar-inverse即可

分页导航（带页码） 使用ul>li>a结构，在ul标签上加 class pagination，可设置大小，追加 class pagination-lg 变大 pagination-sm 变小

分页导航（翻页）使用ul>li>a结构，在ul标签上加 class pager，可设置对齐 li上追加 class previous 居左 next 居右

标签（比如new） 使用span,添加class label label-default(primary,success,info,warning,danger)对应不同颜色

徽章（比如几条未读短消息）  使用span，添加class badge

 导航条案例

效果

---

 缩略图

警示框

进度条

媒体对象

列表组

面板

插件类

弹出框

手风琴

图片轮播

。。。