搜档网
当前位置:搜档网 › bootstrap知识结构体系

bootstrap知识结构体系

bootstrap知识结构体系
bootstrap知识结构体系

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.sodocs.net/doc/f87322575.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.向父

元素添加role=”form”.

ii.把标签和控件放在一个带有class.form-group的

中,这是获取最佳间距需要的。

iii.向所有文本元素