Bootstrap 探索之旅
探索前的准备
Bootstrap 是一个快速搭建网站的框架，我们如果说需要使用这个框架，我们需要引用它。
引用一个框架有两种方式
下载文件引入
1、通过官网的下载包将其引入在项目css文件和js文件。
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
<script type="text/javascript" src="dist/js/jquery.min.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.min.js"></script>
* Bootstrap框架是基于JQuery的一个框架，所以需要在引入bootstrap框架前引入JQuery框架
下载的Bootstrap文件是不存在JQuery，所以我们需要去JQuery的官网里去下载JQuery文件。
2、通过在线CDN引入
推荐： BootCDN 是服务器在国内的且范围广泛的的一个在线CDN网站。
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
开始探索Bootstrap
我们引入完成后就正式的将Bootstrap框架搭建完成，现在就开始我们的探索之旅吧~
内置样式的简单运用
Bootstrap是可以快速的搭建网页，其原因就是它为我们完成了表单，按钮等等组件的样式封装。我们无需再写样式即可设计出简洁好看的样式。
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
我们以按钮为例子，我们发现我们将按钮分为了七种样式default默认，primary首选项，success成功，info信息，warning警告，danger微信，link连接；分成了四种尺寸xs超小尺寸，sm小尺寸，默认尺寸，lg大尺寸。
这些Bootstrap为我们封装好的样式我们直接来调用，机器缩短了我们的时间，当然如果要在这里举例子做演示的画是不可能的，因为大部分的例子大同小异，而且Bootstrap的单词量高达1000+，所以更多的需要我们实践的过程进行积累。
栅格系统
如果说Bootstrap仅仅只是一个简单的样式的封装，那么他的存在的意义不是很大，Bootstrap的运用的重点是栅格系统。
我们都知道在写页面布局的时候用<table>表格可以很快的进行元素对齐，但是<table>表格及其增加了代码的可维护性的难度，为了解决这一个问题于是便有了栅格系统这一个概念。
栅格系统是将每一行分为12个格子，设置每个元素所占用的格子数，快速的对齐和布局。
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-2">2</div>
<div class="col-md-2">3</div>
<div class="col-md-3">4</div>
<div class="col-md-4">5</div>
</div>
</div>
col-md-1的写法是不是超级像<table>表格跨列的使用，但是我们可能不太明白md的含义。
| 类前缀 | 描述 |
|---|---|
| .col-xs- | 超小屏幕 |
| .col-sm- | 小屏幕 |
| .col-md- | 中等屏幕 |
| .col-lg- | 大屏幕 |
要说Bootstrap的精华之处也就在这里了，我们可以设置不同大小屏幕下的元素所占用的格子数，这便是响应式了。
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12">2</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-xs-12">4</div>
<div class="col-lg-4 col-md-1 col-sm-6 col-xs-12">5</div>
</div>
</div>
列偏移（col-md-offset-）
有些时候我们并不能想占满12个格子，也并不想从第一个的格子开始。
我们每创建一行（.row），下一行的格子会另取一行；
每个元素偏移一定的格子.col-md-offset-，就会从偏移的格子数开始。**
<div class="row">
<div class="col-md-1">1</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-1">2</div>
</div>
<div class="row">
<div class="col-md-1 col-md-offset-2">3</div>
</div>
如果一行超出了12个格子，那么会另取一行。
<div class="col-md-12">1</div>
<div class="col-md-1">2</div>
列排序（col-md-push- / col-md-pull-）
列排序顾名思义将元素进行一个排序，但是我个人认为在这里比喻的很抽象；列排序有col-md-push-和col-md-pull-，我是这样理解它们的。
col-md-push-是将元素推过去n格
col-md-pull-是将元素拉回来n格
<div class="row">
<div class="col-md-8">1</div>
<div class="col-md-4">2</div>
</div>
<div class="row">
<div class="col-md-8 col-md-push-4">1</div>
<div class="col-md-4 col-md-pull-8">2</div>
</div>
如上所示，我们将第二行的元素1推过去4格，将元素2拉回来8格，这样就实现了元素在md屏幕下元素的反转，而在其他屏幕下不反转。
元素可见性（.visible-）
除了可以响应式的改变元素的所占比例，偏移和排序外，还可以通过不同大小屏幕的控制元素的显示隐藏。
<div class="visible-xs">xs超小屏</div>
<div class="visible-sm">sm小屏</div>
<div class="visible-md">md中屏</div>
<div class="visible-lg">lg大屏</div>
以上都是一下静态的样式的封装，我们在刚刚引入文件的过程中我们也引入了JavaScript的文件，那么除了一些响应式的布局，还有一些动画，我们看看简单的例子。
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">LOGO</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="">首页</a></li>
<li><a href="">登录</a></li>
<li><a href="">注册</a></li>
</ul>
</div>
</div>
</nav>
这就是Bootstrap的魅力所在了，用最少的代码，做更多的事情；当然js部门还有其他的部分，因为涉及到JQuery的部分，我们暂时写到这里，后期还会再继续分享Bootstrap的js部分。
