bootstrap学习总结简单整理1

看了三天的bootstrap知识，感觉这些css实在太多太复杂了，样式的世界太过多姿多彩，还是留给美工妹子们把，只做一些基本的了解与简单的使用即可。

本文根据csdn免费视频学习后，整理的知识点大纲，细学记得到学院去看：

url：http://edu.csdn.net/course/detail/2740

1、文本情景

text-success、text-muted、info、text-danger、text-waring、text-primary、

这几个单词会经常用到，其实也就是不同的颜色背景或者不同的文本样式来对应不同的提示情况。

各种文本对齐方式：text-left、right、center、justify

2、列表

ul 与 ol 标签

list-unstyled去点

<dl><dt>自定义标签<dt><dl>

3、<pre>

相信这个编辑器就使用了这个标签，就是让代码可以原样输出。

pre-scrollable 滚动条。大于340px后会自动出现

<code>标签 强调代码样式

4、表格

最常用的就是她了

各种样式：

table-borderd边框

table-striped 斑马线

table-condensed 缩小

table-responsive响应式的 这个加到div上，高大上的东西

5、栅格系统

重量级最爱来了，将宽度等分成了12份，col-md-12,各种好用，可以使用<div class="col-md-offset-2">来偏移

<div class="container"><div class="row">  <div class="col-md-6"></div>  <div class="col-md-6"></div></div></div>

<div class="col-md-offset-2">就是左偏二列

<div class="col-md-pull-3">就是右拉三列

<div class="col-md-push-4">就是左拉四列

如果需要嵌套，那么继续套就可以。

6、按钮

这个样式也有很多，和文本情景一样，也有很多定义好的样式。

7、图片

img-rounded圆角

img-circle 圆形

img-thumbnail缩略图

img-reponsive响应式

说到响应式，根据分辨率大小，分别为：

col-md=3、col-sm-3、col-xs-3、还有个最大是啥来着，忘了。。。

8、字体图标

很好的东西，这个有已经定义好的各种图片，比如glyphicon-ok就是对号等等。

9、表单

又是常用的好东西。

form-control表单控件

form-group分组

form-inline 内联表单

form-horizontal 水平表单

select标签还可以多选：multiple属性

表单也和文本情形一样，支持那几个状态：has-success、、、

10、下拉菜单

dropdown：dropdown-toggle+dropdown-menu

还是百度个代码吧：

<li class="dropdown">     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>        <ul class="dropdown-menu">            <li><a href="#">PHP</a></li>            <li><a href="#">MySQL</a></li>            <li class="divider"></li>            <li><a href="#">JavaScript</a>       </ul> </li> 

这个divider是分割线，菜单分段是dropdown-header

菜单的右对齐方式：dropdown-menu-reght

11、按钮组

btn-group 行块除间隙的

btn-group-vertical垂直分组

btn-group-justified等分

dropdown/dropup向上向下

nav-pills 胶囊菜单

nav-pills+nav-stacked垂直菜单，和胶囊菜单配合使用

nav nav-tabs nav-justified响应式菜单

ur>li标签 breadcrumb 面包屑菜单

12、导航条

navbar-default基础导航条

主要就是来看她的

最左边一般来个logo：

navbar-header+navbar-brand

导航条上加表单：可以将表单按钮做到最右边输入框内

navbar-form

navbar-inverse反色导航条，一般用在黑白样式上

pagination 分页导航条：-lg/xs/sm

pager：previous/next上一页/下一页&laquo/&raquo