bootstrap的简单介绍

最新推荐文章于 2022-03-21 20:23:05 发布

HelloImyHe

最新推荐文章于 2022-03-21 20:23:05 发布

阅读量873

点赞数 1

本文链接：https://blog.csdn.net/HelloImyHe/article/details/80982118

版权

前言
打个比方：如果需要做一个ppt，是从空白页开始制作块呢？还是下载一个模板，将图片文字替换进去更快呢？

所以使用bootstrap框架的可以速度和效率的生成一个html5网页

本文主要针对bootstrap3

1.如何关联bootstrap
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.导航栏的固定方式
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.创建一个登录注册按钮
和上面的导航栏是一样的处理方式

14.折叠导航栏内容
collapse：折叠
navbar-collapse：导航栏中的折叠
a.确定需要折叠的部分，这部分外面加上一个div，使用折叠系的类名，并且给这个div自己起一个类名
b.建立一个折叠的按钮，设定一个导航栏开关，开关作用在折叠，折叠的对象是a中的div(用到a中自己起的那个类名)
c.将按钮和保留的部分加上一个navbar-header，表明这是导航栏的头部
如下：