Bootstrap入门(一)

什么是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**
如果你注意到了两边的空白,请看表中的最**大容器宽度**
并且在未触发的情况下,是默认居中的


![xs.PNG](http:https://img.haomeiwen.com/i3609716/153b601e04b321ef.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



直到我们的设备宽度大于等于992px时:才会触发col-md-6:

![md.PNG](http:https://img.haomeiwen.com/i3609716/5b2ce54422d30716.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

当然也包括了大型台式机的屏设备宽度:

![lg.png](http:https://img.haomeiwen.com/i3609716/ba58185c792f6bda.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

now!你已经掌握了Bootstrap核心思想:''栅格系统''的基本概念了,Bootstrap的布局基本就基于''栅格系统'',当然要学习的东西还很多,毕竟制式化的框架,要记的东西也比较多,但是把规则搞懂,万变不离其宗嘛,Bootstrap入门文章还会继续更新**当然如果这篇文章有帮到你,请不吝点赞,欢迎留言交流:)**