Bootstrap

# Bootstrap

一、介绍

1.开源、强大、优雅

2.内置了大量的CSS类

3.html(自己写)+css(提供)+js(提供) js依赖jQuery

4.UI框架很多 要学会用手册查找

5.不同的版本类名有所区别,或进行了删除,或进行更改

6.课程学的是4.0版本

# 布局容器

1.container 定宽容器

设置基础的样式(响应式布局)

2.container 变宽容器

变宽容器随着屏幕宽度的变化均保持100%,但存在左右15px内边距

h1~h6 与h1~h6标签大小一致

display1~4

2.文字的对齐方式

文字在元素(块)中,水平对齐方式

text-center 居中

text-left 居左

text-right 居右

响应式写法

text-*-center

*代表可以写响应式:sm md lg xl

可以写多个类 根据屏幕的不同宽度会自动对应相关类使用

3.字体样式

font-weight-bold 加粗

font-weight-light 细体

font-weight-normal 普通

4.文本颜色和背景颜色

text-light 文本颜色

bg-info 背景颜色

primary 蓝色 |success 绿色 |danger 红色|

dark 深色 |light 亮色 | info 孔雀蓝 |white 白色

# 元素设置

1.宽高

主要基于父元素的宽度设置子元素的相对宽度

宽度相对父元素:25% 50% 75% 100%

高度相对父级:25% 50% 75% 100%

w-25、w-50、w-75、w-100

h-25、h-50、h-75、h-100

2.内外边距

m:外边距

p:内边距

p-?、m-?: 问号代表,提供了五个尺寸 1~5,默认是0尺寸 0代表去除

p-*、m-*-?:*代表响应式:sm、md、lg、xl

p-#、m-#:#：代表方向：t,l,r,b 如:pb 下内边距,ml左外边距

m-auto 外边距居中,在父元素中的块级元素水平居中

3.边框

基础类:border 必须要写 其他样式均属修饰

border:四边边框

border-top上边框

border-bottom下边框

border-right右边框

border-left左边框

# 按钮

1.按钮的基础类必写 btn 必写

2.按钮的颜色 btn-danger

3.镂空按钮 btn-outline-info

4.大/小按钮

btn-lg

btn-sm

5.块级按钮 btn-block

# 浮动布局

1.元素的显示

d-inline 行

d-block块

d-inline-block 行内块

d-none 消失

d-*-xx 响应式  *代表sm 、md 、lg、xl

2.浮动清除浮动

float-left 右浮动

float-right 左浮动

clearfix 清除浮动 要写给浮动的父元素

3.列表样式

list-unstyled 清除列表标识符 ，并清除ul内边距

 

# 元素设置

1.补充圆角

- 元素必须有宽高，边框线

- boot默认提供的圆角角度小不适合实际使用

- rounded-circle 元使用频率高一点

2.定位

- 在boot中绝对定位 position-absolute和相对定位 因自定义样式过多，所以使用者这两个类不方便

- fixed-top    固定在顶部

- fixed-bottom 固定在底部

# flex属性

1. d-flex让容器使用flex布局

2. 项目在容器内换行

-flex-wrap项目在容器内换行

-flex-nowrap项目在容器内不换行

3.水平对齐

- justify-content-between 两端对齐

- justify-content-around 两臂间隔

- justify-content-start

- justify-content-end

- justify-content-center

# 表格

1.table 是表格的基础类 写在最外层table标签中,样式会撑满整个父级宽度,有默认样式

2.table-border 是将整个table 都加四个方向边框 写在最外层table标签中

3.table 的颜色 ,可以直接使用table+颜色加在最外层table标签中

4.鼠标在单独一行的悬停效果 table-hover,也要加在最外层table标签中

5.table 的表头boot提供了两种主题,深色thead-dark浅色thead-light,都写在thead标签中

# 栅格布局

栅格布局用于页面布局,使boot的核心内容

主要作用在"不同"终端显示"不同效果"

栅格具有行(row)和列(col)的概念一行有12个列的位置

列可以通过数字制定在12列中占有几份,?就是在12份中占有几份1-12

1.问题 container 默认左右15像素内边距哪里去了?

container 默认左右15像素内边距被row类的左右15px外边距征用了

原因有2

- 保证了每个15px宽度达到均等

- 每一个col也有左右15像素的内边距,因此最前和最后的col列再加container的内边距,将会变成30px的距离，过于大

2.问题 不是说不同终端不同效果?

栅格布局是存在响应式效果的

col-*-？ *代表, xl ,lg md sm 还有不写的效果(小于576px)使用响应式数字 可以保证不同终端不同效果

3.栅格偏移

offset-*-?*代表响应式，？代表数字1-11 表示列向右移几份 ，不能超过11 超过会换行

4.栅格底层是弹性的，因此栅格是可以使用弹性属性的.row就成为容器,col就成为项目

如果出现嵌套的栅格布局.row>col>row>col,不允许出现列中直接写列中间必须加一层row

6.在布局中直接使用列当作某个(商品)外层,列有内边距,没外边距,所以两个商品元素会紧紧挨在一起，不考虑缝隙的可以适应直接将列当作外层的布局方法，如以下情况

7.如果商品有空间，不可以紧紧挨在一起