什么是Bootstrap?
Bootstrap是一种标准化的响应式页面的解决方案,包含js,css的大型框架,采用的了媒体查询的方式,主要通过设置css,和html的手段来制定页面总体结构在不同设备端的不同表现,个人觉得这是一种''制式''化的做法,这样的好处就是适合多人协作,减少开发周期,使得模板易制定,其最主要的核心思想展现在"栅格系统"上.
(Ps.对我提到的名词不太理解的同学可以看我的专题文章补补)
1,响应式布局
环境配置
Bootstrap中文网
下载位置:http://v3.bootcss.com/getting-started/#download
注意下载:
下载.png
由于Bootstrap的源码中,css文件采用的是less的写入方式,因此需要预编译才可以转化为css,为了方便这里就推荐下载第一个;
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery-3.1.1.js"></script>
<script src="./js/bootstrap.min.js"></script>
记得下载jquery哟.
Bootstrap必须依赖jquery
Bootstrap与jquery.jpg
栅格系统
了解Bootstrap就先要了解其核心思想:"栅格系统",个人觉得你也可以将''栅格系统''看做"表格系统",因为他采取了行和列这样的布局方式,
先看图!
栅格系统的基本设定:
栅格系统.PNG
栅格系统以''行''和''列''为单位,每一行最多12列最小是1列,行的宽度是由列宽撑开的,这里的列代表了你的div(或其他标签)的宽度,(Ps.这里你只要知道,一行可容纳12列就好,而高度是由内容撑开的,不必理会)
列规则表.PNG
在看表的时候你一定感觉千万个wc,这是啥?
如果你没有觉得wc,那么大神请移步,这是一个入门篇...
首先看表头,它标注了媒体查询的最小宽度,其次留意class前缀一旦超过最小宽度就会触发,并到下一个设备的状态,可以先记住几个简单的规则,帮助你理解表头内容,我们可以这样理解:
在设备号非触发状态下都是独占宽度的,一旦触发就会保持所设置的宽度;
还不明白请看代码:
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<--class="col-md-6"这是"中型设备台式电脑"的设备号,以及所占的列数-->
<--当触发md时将会为其设置跨6列的宽度,即全屏宽度的一半-->
<div class="col-md-6"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<--这是填充文档-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
我们根据表格知道中型电脑的设备的屏幕是大于992px的,因此做出测试,红色块中是此时设备的宽,代码也贴出
$(window).resize(function(){
let bodyW = $('body').width();
$('#windowWidth').html(bodyW);
})
</script> ```
当我们的设备宽小于992px时:**不会触发col-md-6**
如果你注意到了两边的空白,请看表中的最**大容器宽度**
并且在未触发的情况下,是默认居中的
直到我们的设备宽度大于等于992px时:才会触发col-md-6:
当然也包括了大型台式机的屏设备宽度:
now!你已经掌握了Bootstrap核心思想:''栅格系统''的基本概念了,Bootstrap的布局基本就基于''栅格系统'',当然要学习的东西还很多,毕竟制式化的框架,要记的东西也比较多,但是把规则搞懂,万变不离其宗嘛,Bootstrap入门文章还会继续更新**当然如果这篇文章有帮到你,请不吝点赞,欢迎留言交流:)**