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.
vi. | vii. b)表格类:下表样式可用于表格中: i..table:为任意
|
---|