bootstrap bootstrap3 学习使用bootstrap v3 中文文档(两天包会)

概念: 它是前端开发框架,让web开发更迅速、简单。
来自Twitter,是目前很受欢迎的前端框架之一。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

特点
1.移动设备优先、
2.响应式设计:采用栅格布局、
3.偏UI,综合框架,包括一些常用的UI组件以及一些JS组件
4.Bootstrap3兼容到IE8

应用场景:bootstrap适应于偏展示类的网站或者项目

固定布局:container
根据浏览器不同分辨率,固定尺寸不同
不同阈值对应的宽度如下:

=1200 width为1170px
=992 width为970px
=768 width为750px
<768 为自适应宽度auto

速成class类
1.Container 固定布局
2. Container-fluid 流体布局
3. Row 行
4. Col-lg-1 栅格占1/12列
5. Col-lg-1 col-sm-3 组合
6. Col-lg-offset-4 偏移4列
7. Col-lg-push-1 从前往后排序1列
8. Col-lg-pull-1 从后往前排序1列
9. Clearfix 清浮动(在要清浮动的元素前写一个空标签,加类)
10.Visible-lg-block 响应式显示
11.Hidden-lg 响应式隐藏
12.Visible-print-lg 打印机显示
13.Hidden-print 打印机隐藏
14.Alert-success 提示框
15.Alert alert-success 圆角提示框
16.Panel-primary 面板父级
17.Panel-heading 面板标题
18.Panel-body 面板主体
19.Form-group 表单form
20.Form-control 表单控件加的,
21.Sr-only 隐藏label
22.Btn 按钮
23.Btn-primary 按钮首选项蓝色
24.Bg-primary 背景蓝色
25.Text-primary 字蓝色
26.Btn-default 默认按钮
27.Btn-link 模仿a链接按钮
28.Btn-lg 按钮大小
29.Active 默认选中
30.Disabled 禁用
31.Btn-block 自适应占满父级宽度
32.Btn-group 普通按钮组
33.Btn-group-justified 自适应按钮组
34.Btn-group-vertical 纵向按钮组
35.Btn-group-lg 按钮组大小
36.Caret 加小三角
37.Dropup 小三角朝上,给btn加
38.Dropdown 下拉列表父级
39.Dropdown-toggle 给btn加
40.Data-toggle=”dropdown” 给btn加
41.Dropdown-menu 给无序列表加
42.Dropdown-menu-right 下拉列表靠右
43.Open 默认打开下拉列表
44.Dropdown-header 添加标题
45.Divider 下拉列表分割线
46.Disabled 下拉列表禁用项给项加
47.Dropup 下拉列表向上弹出
48.Text-center 文字居中
49.Nav nav-tabs 给ul加的,导航
50.Nav-tabs-justified 线的两端对齐导航条
51.Nav-pills 胶囊导航
52.Nav-stacked 纵向导航
53.Nav-justified 自适应
54.Disabled 禁用(给li加)
55.Nav nav-tabs 同49.
56.Tab-content 导航要切换内容的父级
57.Data-toggle=”tab” 触发器加的
58.tab-pane 要切换一条条内容加的
59.Fade 淡入淡出效果
60.In 当前淡入
61.Navbar 导航条
62.Navbar-default 默认(白色)
63.Navbar-inverse 黑色导航条
64.Navbar-static-top 去掉两端圆角
65.Navbar-fixed-top 固定定位页面最上面
66.Navbar-header Logo的父级
67.Navbar-brand logo
68.Navbar-right 右浮动(给ul加)
69.Navbar-btn 导航里的按钮
70.Navbar-link 导航里的A连接
71.Navbar-text 导航里的文字
72.Navbar-form 导航里的表单form,(导航里的搜索框)
73.Navbar-group 导航里的控件父级
74.Navbar-control 导航里的控件
75.
76.Icon-bar 响应式导航的三条杠
77.Data-toggle=’collapse’ 给按钮加
78.Data-traget=”隐藏元素的类” 给按钮加
79.Navbar-toggle 给按钮加
80.Collapse navbar-collapse 给隐藏元素的父级加
81.Table 给表格加的
82.Table-striped 斑马线
83.Table-bordered 给表格加border
84.Table-hover 移入效果
85.Table-condensed 使table更加紧凑, 上下padding减少二分之一
86.Success info warning danger 给th\tr\td加
87.Table-responsive 不换行,宽不够加滚条
88.Form-inline 给form加(一行显示
89.
90.Input-group 搜索框父级
91.Input-group-addon 给span(如放大镜)加
92.Form-control 给控件加
93.Form-horizontal 给form加(栅格布局)
94.Control-label 给label加,(上下居中)
95.Checkbox 多选按钮
96.Radio 单选按钮
97.Multiple 给下拉列表加的,内容展开
98.Form-control-static 静态控件
99.Has-success 加颜色绿色

input后加图标
100.Has-feedback 给form-group加
101.Form-control-feedback 给图标加
102.Input-lg 改变input的高度

猜你喜欢

转载自blog.csdn.net/heshuaicsdn/article/details/79528557