前言
打个比方:如果需要做一个ppt,是从空白页开始制作块呢?还是下载一个模板,将图片文字替换进去更快呢?
1.1下载编译后的bootstrap文档,link标签本地关联
1.2引用cdn,如下:
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
传说jquery,js放在body标签中网页加载速度更快?
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
2.如何实现响应式布局
在浏览器宽度被拉伸或者缩小的时候,自动的加入媒体查询判断,利用这种方法来实现响应式
如下:
在浏览器不同宽度时对于内容的加入了媒体查询判断来确定页面布局
2.如果要进行格栅布局,需要放置在一个叫row的容器里,一个row里面分为12个单位
比如:
col-md-4——4/12:33.333%
col-md-8——8/12:66.666%
3.每种格栅的临界点
sm(小)——min-width: 768px
md(中)——min-width: 992px
lg(大)——min-width:1200px
4.混合使用格栅
我们假设设备宽度为x
768px≤x<992px,会按照col-sm-x排列
992px≤x<1200px,会按照col-md-x排列
x≥1200px,会按照col-lg-x排列
比如:
5.格栅位置的推拉(在bootatrap 3中使用push/pull来实现)
push和pull可以用来给元素换位置
比如:
左边的push(推到)右边,右边的pull(拉到)左边
6.格栅的嵌套使用
在分下来的格栅中依然可以再插入一个row并且下级依然可以再嵌套
7.偏移(offset)跟推/拉(push/pull)的区别
offset是利用margin-left来把左边的位置撑开,所以只能往右移动
而push&pull是利用相对定位来实现的
而push/pull因为是相对定位,既可以左偏移也可以右偏移,可以给元素换位置
还有一点,如果一行的偏移量+实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。
8.显示与隐藏
8.1隐藏:hidden-
@media (max-width:767px) {
.hidden-xs {
display: none !important
}
}
@media (min-width:768px) and (max-width:991px) {
.hidden-sm {
display: none !important
}
}
@media (min-width:992px) and (max-width:1199px) {
.hidden-md {
display: none !important
}
}
@media (min-width:1200px) {
.hidden-lg {
display: none !important
}
}
举例如下:
当屏幕宽度小于768px时候,左边主题消失了
8.2显示:visible-
@media (max-width:767px) {
.visible-xs {
display: block !important
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm {
display: block !important
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md {
display: block !important
}
@media (min-width:1200px) {
.visible-lg {
display: block !important
}
当屏幕宽度小于768px时,出现了之前没有的文字
9.导航栏nav的制作
主要用到nav系的标签
如下:
10.1fixed
navbar-fixed-top:在页面顶部固定
navbar-fixed-bottom:在页面底部固定
如下:
10.2static
navbar-static-top:会随着滚动条的滚动而位置变化
11.导航栏搜索框的制作
navbar-form:form表单
form-control:输入框样式
glyphicon-search:搜索按钮样式
12.创建一个按钮
btn:button这个大类
navbar-btn:导航栏中的btn
btn-primary:btn的样式
btn-sm:btn的大小
13.创建一个登录注册按钮
和上面的导航栏是一样的处理方式
collapse:折叠
navbar-collapse:导航栏中的折叠
a.确定需要折叠的部分,这部分外面加上一个div,使用折叠系的类名,并且给这个div自己起一个类名
b.建立一个折叠的按钮,设定一个导航栏开关,开关作用在折叠,折叠的对象是a中的div(用到a中自己起的那个类名)
c.将按钮和保留的部分加上一个navbar-header,表明这是导航栏的头部
如下:
使用12等分都是很方便的事情。相比之下,10等分的话,1,2,5,10整除,被3、4都不能整除,划分比例就不那么爽。
Col-有15px的左右padding
打个比方:如果需要做一个ppt,是从空白页开始制作块呢?还是下载一个模板,将图片文字替换进去更快呢?
所以使用bootstrap框架的可以速度和效率的生成一个html5网页
本文主要针对bootstrap3
1.如何关联bootstrap1.1下载编译后的bootstrap文档,link标签本地关联
1.2引用cdn,如下:
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
传说jquery,js放在body标签中网页加载速度更快?
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
2.如何实现响应式布局
在浏览器宽度被拉伸或者缩小的时候,自动的加入媒体查询判断,利用这种方法来实现响应式
如下:
在浏览器不同宽度时对于内容的加入了媒体查询判断来确定页面布局
2.如果要进行格栅布局,需要放置在一个叫row的容器里,一个row里面分为12个单位
比如:
col-md-4——4/12:33.333%
col-md-8——8/12:66.666%
3.每种格栅的临界点
sm(小)——min-width: 768px
md(中)——min-width: 992px
lg(大)——min-width:1200px
4.混合使用格栅
我们假设设备宽度为x
768px≤x<992px,会按照col-sm-x排列
992px≤x<1200px,会按照col-md-x排列
x≥1200px,会按照col-lg-x排列
比如:
5.格栅位置的推拉(在bootatrap 3中使用push/pull来实现)
push和pull可以用来给元素换位置
比如:
左边的push(推到)右边,右边的pull(拉到)左边
6.格栅的嵌套使用
在分下来的格栅中依然可以再插入一个row并且下级依然可以再嵌套
7.偏移(offset)跟推/拉(push/pull)的区别
offset是利用margin-left来把左边的位置撑开,所以只能往右移动
而push&pull是利用相对定位来实现的
而push/pull因为是相对定位,既可以左偏移也可以右偏移,可以给元素换位置
还有一点,如果一行的偏移量+实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。
8.显示与隐藏
8.1隐藏:hidden-
@media (max-width:767px) {
.hidden-xs {
display: none !important
}
}
@media (min-width:768px) and (max-width:991px) {
.hidden-sm {
display: none !important
}
}
@media (min-width:992px) and (max-width:1199px) {
.hidden-md {
display: none !important
}
}
@media (min-width:1200px) {
.hidden-lg {
display: none !important
}
}
举例如下:
当屏幕宽度小于768px时候,左边主题消失了
8.2显示:visible-
@media (max-width:767px) {
.visible-xs {
display: block !important
}
@media (min-width:768px) and (max-width:991px) {
.visible-sm {
display: block !important
}
@media (min-width:992px) and (max-width:1199px) {
.visible-md {
display: block !important
}
@media (min-width:1200px) {
.visible-lg {
display: block !important
}
当屏幕宽度小于768px时,出现了之前没有的文字
9.导航栏nav的制作
主要用到nav系的标签
如下:
可以看出来,在写类名时要先写它用的是什么类,再写具体是个什么样的类
10.1fixed
navbar-fixed-top:在页面顶部固定
navbar-fixed-bottom:在页面底部固定
如下:
10.2static
navbar-static-top:会随着滚动条的滚动而位置变化
11.导航栏搜索框的制作
navbar-form:form表单
form-control:输入框样式
glyphicon-search:搜索按钮样式
12.创建一个按钮
btn:button这个大类
navbar-btn:导航栏中的btn
btn-primary:btn的样式
btn-sm:btn的大小
13.创建一个登录注册按钮
和上面的导航栏是一样的处理方式
collapse:折叠
navbar-collapse:导航栏中的折叠
a.确定需要折叠的部分,这部分外面加上一个div,使用折叠系的类名,并且给这个div自己起一个类名
b.建立一个折叠的按钮,设定一个导航栏开关,开关作用在折叠,折叠的对象是a中的div(用到a中自己起的那个类名)
c.将按钮和保留的部分加上一个navbar-header,表明这是导航栏的头部
如下:
更多讨论
1.为什么bootstrap布局划分屏幕空间采用的是12等分,而不是别的什么等分?
它可以被1、2、3、4、6、12共6个数字整除,本来就是用来分空间的系统,当然可以更好的被整除最好了,这样怎么分都愉快。比如
两个div分空间,分别占用50%,或者一个1/3一个2/3,或者1/4对3/4
3个div分空间,分别占用1/3,或者两个1/6一个2/3,或者两个1/4对1/2使用12等分都是很方便的事情。相比之下,10等分的话,1,2,5,10整除,被3、4都不能整除,划分比例就不那么爽。
2.bootstrap有哪些常用组件?
下拉菜单,摁钮组,导航,标签,列表,巨幕......
3.cotainer,row,colum的初始属性
container有15px的左右padding
row有-15px的左右marginCol-有15px的左右padding