标签：nta   ==   规范   实例   stripe   导入   style   响应   添加   

Bootstrap 

1.介绍

1.Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。

2.Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。  它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

3.Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

4.Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 

2.作用

1.可以快速搭建出好看的页面。
2.最受欢迎的html，css和js框架
3.用于响应式布局，移动设备优先的web项目。

3.使用流程

1.下载

网址：http://v3.bootcss.com/

2.导入css文件

1.link 导入

　　1.使用本地的文件，本地开发推荐使用

　　　　rel = "stylesheet"  声明文件类型

　　2.使用 CDN

3.复制粘贴

1.规则

　　每个规则对应不同的样式

　　我们要做的：

　　　　1.找到我们需要的规则（html等）

　　　　2.复制、粘贴

2.详细介绍各种规则

1.栅格系统

　　　1.  .container 它是一个容器，先有它

　　　2.  .row  它是一行，它放在  .container 里， 可以有多个

　　　3.  .column 它是一列， 它放在 .row 里， 它默认分为12 列。

　　　列：

　　　　　12 列

　　　　　col-xx-l    col-xx-2  col-md-6

　　　　　中间的字母：（表示大小）

　　　　　lg > md > sm > xs

　　　　　大屏 > 一般pc电脑 > 平板 > 手机

　　　　　列偏移：

　　　　　　　col-xx-offset-4  col-md-2

　　　　　快速偏移：

　　　　　　　左： pull-left

　　　　　　　右： pull-right

2.文本类

　　1.标题

　　　　h 标签

　　2.文档  P标签

　　　　对齐： Text_center

　　　　地址

　　3.列表

　　　　1.无序列表

　　　　2.有序列表

　　　　3.横着的列表（内联列表）导航里用到

　　4.代码等标签

　　5.表格

　　　　1.table

　　　　2.table-stripe (隔行变色)

　　　　3.table-border (带边框)

　　　　4.table-hover (鼠标移上去变色)

　　　　5.table-condensed (紧凑，内边距 缩小一半)

　　6.状态类（点击之后的颜色）

　　　　1.active

　　　　2.success 绿色

　　　　3.danger  红色

　　　　4.warning 黄色

　　　　5.info 　淡蓝色

　　7.表单

　　　　1.帮助信息 aria-describedby

　　　　2. has-success 放到 form-group 的标签里

　　　　3.has-error

　　　　4.input 大小

　　　　5.disabled  不可以状态

　　8.大小

　　　　1.lg

　　　　2.正常大小

　　　　3.sm

　　　　4.xs

　　9. 按钮

　　　　1.大小

　　　　2.颜色

　　　　3.disabled 不可以状态

　　　　4.btn-block  块级按钮

　　10.图片

　　　　1.边框角度

　　　　　　- <img src="" alt"" class="img-rounded">

　　　　2.辅助类

　　　　　　1.情境文本颜色

　　　　　　　　<p class=""><p>

　　　　3.关闭按钮

　　　　　　通过一个象征的关闭图标来关闭。

3.组件

　　1.图标

　　　　字体图标的优势：

　　　　　　1.缩放不变色

　　　　　　2.随意改颜色

　　　　　　3.体积小

　　　　字体搭配图标 &nbsp;

　　2.进度条

　　　　颜色

　　　　动起来  active

　　　　条纹 　 striped

　　3.分页

　　　　12345 这种分页

　　　　上一页

　　　　下一页

　　4.下拉菜单

　　　　往下

　　　　往上

　　　　分割线

　　　　禁用

　　　　构成： button  ul

　　5.按钮

　　　　btn-group  role="group"

　　　　嵌套

　　　　垂直的

　　　　两端对齐的按钮组

　　　　按钮组

　　　　　　单按钮下拉菜单

　　　　　　分裂式下拉菜单

　　　　　　尺寸

　　　　　　向上弹出式菜单

　　　　输入框组

　　　　　　基本实例

　　　　　　　　input-group

　　　　　　　　　　span 前后可以右，必须加 Input-group-addon 始终围绕框

　　　　　　尺寸

　　　　　　　　input_group-lg

　　　　　　作为额外元素的多选框和单选框

　　　　　　作为额外元素的按钮和按钮下拉框

　　　　　　作为额外元素的分裂式按钮下拉菜单·

　　6.导航

　　　　1.tab 类型的 nav nav-tabs

　　　　　　下面对应一个ul

　　　　　　il role = "presentaction"

　　　　2.胶囊类型 nav nav-pills

　　　　　　下面对应一个ul

　　　　　　il role = "presentation"

　　　　3.两段对齐 nav-justified

　　　　　　竖着的多一个 nav-stacked

　　　　4.禁用的连接

　　　　5.添加下拉菜单

　　4.导航条

　　　　1.不用放到 container

　　　　　　navbar navbar-ineverse

　　　　2.container / container-fluid

　　　　3.各种拼

　　　　4.导航栏里向右飘  navbar-right

　　　　5. navbar-fixed-top  固定到顶部

　　　　6.navbar-static-top  z-index

　　　　7.面包屑导航

　　5.标签 label  应用场景  -新品发售

　　　　-颜色

　　6.徽章

　　7.巨幕

　　8.缩略图

　　　　col-xs-6 col-md-3   不用的屏幕用不同的样式

　　　　缩略图下面加自定义内容 

　　9.警告框

　　　　alert

　　10.可关闭的警告框

　　　　alert

　　　　span  &times;

　　　　alert-link  报错信息里查看帮助

　　11.媒体对象

　　　　头像+内容 （网友的恢复，聊天对话）

　　　　media

　　　　飘　　media-right

　　12.图片对齐

　　　　media 默认的e

　　　　media-middle  居中

　　　　media-bottom  沉底

　　13. 嵌套的媒体对象

　　　　应用场景  层级评论  写Django、 项目时会用到

前端 ==> Bootstrap

标签：nta   ==   规范   实例   stripe   导入   style   响应   添加   

原文地址：http://www.cnblogs.com/zhongbokun/p/7705281.html