bootstrap知识结构体系
![bootstrap知识结构体系](https://img.360docs.net/imgf6/1sqspg4wudp2z3x8gpasz91ygej0tvdu-61.webp)
![bootstrap知识结构体系](https://img.360docs.net/imgf6/1sqspg4wudp2z3x8gpasz91ygej0tvdu-12.webp)
Bootstrap
1bootstrap教程
a)需要准备的知识html,css,javascritpt
2Bootstrap简介
a)Bootstrap前端框架,基于html,css,javaScript的
b)移动设备优先,所有主流的浏览前都支持bootstrap
c)Bootstrap包的内容
i.基本结构
ii.Css
iii.组件
iv.javaScript插件
3Bootstrap环境安装
Bootstrap CSS
4Bootstrap CSS概览
a)Html5文档类型(Doctype)
i.Bootstrap使用了一下html5元素和css属性,为了能够正常显示,需要使用html5文档类型(Doctype)。
b)移动设备优先,在bootstrap3默认的css本身就对移动设备友好支持
c)响应式图像class=”img-responsive”
d)全局显示、排版和链接
e)避免浏览器的不一致
f)容器(Container)
5Bootstrap网格系统
a)Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12
列。
b)什么是网格
c)什么是bootstrap网格系统
d)移动设备优先策略:内容,布局,渐进增强
e)Bootstrap网格系统的工作原理
i.行必须放置在.container class内,以便获得适当的对齐和内边距
ii.使用行来创建列的水平组。
iii.内容应该放置在列内,且唯有列可以是行的直接子元素。
iv.预定义的网格类,比如.row和.col-xs-4,可用于快速创建网格布局
v.列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负,表示第一列和最后一列的偏移。
vi.网格系统是通过指定您想要横跨的十二个可用的列来创建的,例如,要创建三个相等的列,则使用三个.col-xs-4
6Bootstrap排版
a)标题
b)内联标题
c)强调
d)地址
e)引用
f)列表
i.有序列表
ii.无序列表
iii.定义列表
g)更多排版类
i.使段落突出
ii.设置小文本(设置为父文本的85%大小)
iii.设定文本左对齐
iv.设定文本居中对齐
v.设定文本右对齐
vi.设定文本对齐,段落中超出屏幕部分文字自动换行
vii.段落中超出屏幕部分不换行
viii.设定文本小写
ix.设定文本大写
x.设定单词首字母大写
xi.显示再元素中的文本以小号字体展示,且可以将小写字母转换成大写字母
xii.设定应用右对齐
xiii.移除默认的列表样式,列表项中左对齐
xiv.将所有列表项放置同一行
xv.该类设置了浮动和偏移,应用于
- 元素和
- 元素中
xvi.使用
元素可滚动,代码块区域最大高度为340px,内容一旦超过这个高度,就会在y轴出现滚动条7Bootstrap代码
a)Bootstrap允许两种方式显示代码
i.Code标签
ii.Pre标签
b)更多示例
i.
ii.:按键提示:ctrl+p
iii.
:多行代码
iv.
:多行代码带有滚动条
v.:电脑程序输出sample output
vi.
:同一行代码片段:span,div
8Bootstrap表格
a)Bootstrap支持的一些表格元素:
i.
:为表格添加基础样式
ii.:表格标题行的容器元素,用来标识表格列
:表格主体中的表格行的容器元素iii.
iv.
v.
vi.
vii.
:关于表格存储内容的描述或总结 b)表格类:下表样式可用于表格中:
i..table:为任意
添加基本样式(只有横向分割线)
ii..table-striped:在
内添加斑马线形式的条纹iii..table-bordered:为所有表格的单元格添加边框
iv..table-hover:在
内的任一行启用鼠标悬停状态v..table-condensed:让表格更加紧凑
c)
, 和 类:下面的类可用于表格的行或者单元格: i..active:将悬停的颜色应用在行或者单元格上
ii..success:表示成功的操作样式
https://www.360docs.net/doc/f27322575.html,:表示信息变化的操作
iv..warning:表示一个警告的操作
v..danger表示一个危险的操作
d)可选的表格类
i.条纹表格
ii.边框表格
iii.悬停表格
iv.精简表格
v.上下文类:允许改变表格行行或单个单元格的背景颜色
1..active:对某一特定的行或单元格应用悬停颜色
2..success:表示一个成功的或积极的动作
3..warning:表示一个需要注意的警告
4..danger表示一个危险的或潜在的负面动作
这些类可被应用到
、 或 。 vi.响应式表格:
1.通过任意的.table包在.table-responsive class内,您可以让表格水平滚动以适应小型设备
(小于768px),当大于768px的宽的大型设备上查看,会自动调整大小适应屏幕。
9Bootstrap表单
a)表单布局
i.垂直表单
ii.内联表单
iii.水平表单
b)垂直或基本表单:基本的表单结构是bootstrap自带的,个别的表单空间自动接收一些全局样式。下面列出基本表单的创建步骤:
i.向父