Bootstrap 探索之旅

小鱼儿 2023-06-29 10:45 28阅读 0赞

### Bootstrap 探索之旅 ###

*   *  探索前的准备
     *  开始探索Bootstrap
     *   *  内置样式的简单运用
         *  栅格系统

## 探索前的准备 ##

Bootstrap 是一个快速搭建网站的框架，我们如果说需要使用这个框架，我们需要引用它。  
引用一个框架有两种方式

**下载文件引入**

`1、通过官网的下载包将其引入在项目css文件和js文件。`

***\* Bootstrap框架是基于JQuery的一个框架，所以需要在引入bootstrap框架前引入JQuery框架***  
下载的Bootstrap文件是不存在JQuery，所以我们需要去JQuery的官网里去下载JQuery文件。

`2、通过在线CDN引入`

**推荐：** [BootCDN][] 是服务器在国内的且范围广泛的的一个在线CDN网站。

## 开始探索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>

![在这里插入图片描述][20200112191056254.gif_pic_center]

我们以按钮为例子，我们发现我们将按钮分为了七种样式`default默认`，`primary首选项`，`success成功`，`info信息`，`warning警告`，`danger微信`，`link连接`；分成了四种尺寸`xs超小尺寸`，`sm小尺寸`，`默认尺寸`，`lg大尺寸`。

这些Bootstrap为我们封装好的样式我们直接来调用，机器缩短了我们的时间，当然如果要在这里举例子做演示的画是不可能的，因为大部分的例子大同小异，而且Bootstrap的单词量高达1000+，所以更多的需要我们实践的过程进行积累。

### 栅格系统 ###

如果说Bootstrap仅仅只是一个简单的样式的封装，那么他的存在的意义不是很大，Bootstrap的运用的重点是栅格系统。

我们都知道在写页面布局的时候用`<table>`表格可以很快的进行元素对齐，但是`<table>`表格及其增加了代码的可维护性的难度，为了解决这一个问题于是便有了栅格系统这一个概念。

栅格系统是将每一行分为12个格子，设置每个元素所占用的格子数，快速的对齐和布局。

![在这里插入图片描述][20200112193208822.png_pic_center]  
`col-md-1`的写法是不是超级像`<table>`表格跨列的使用，但是我们可能不太明白`md`的含义。

要说Bootstrap的精华之处也就在这里了，我们可以**设置不同大小屏幕下的元素所占用的格子数**，这便是**响应式**了。

![在这里插入图片描述][20200112195024441.gif_pic_center]  
**列偏移`（col-md-offset-）`**

有些时候我们并不能想占满12个格子，也并不想从第一个的格子开始。

**我们每创建一行`（.row）`，下一行的格子会另取一行；  
每个元素偏移一定的格子`.col-md-offset-`，就会从偏移的格子数开始。**\*\*

![在这里插入图片描述][20200112201318927.png_pic_center]  
如果一行超出了12个格子，那么会**另取一行**。

![在这里插入图片描述][20200112201922832.png_pic_center]  
**列排序`（col-md-push- / col-md-pull-）`**

列排序顾名思义将元素进行一个排序，但是我个人认为在这里比喻的很抽象；列排序有`col-md-push-`和`col-md-pull-`，我是这样理解它们的。

`col-md-push-`是将元素**推过去**n格  
`col-md-pull-`是将元素**拉回来**n格

![在这里插入图片描述][20200112202501251.png_pic_center]  
如上所示，我们将第二行的**元素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>

![在这里插入图片描述][20200112200553574.gif_pic_center]

以上都是一下静态的样式的封装，我们在刚刚引入文件的过程中我们也引入了JavaScript的文件，那么除了一些响应式的布局，还有一些动画，我们看看简单的例子。

![在这里插入图片描述][20200113205836985.gif_pic_center]  
这就是Bootstrap的魅力所在了，用最少的代码，做更多的事情；当然js部门还有其他的部分，因为涉及到JQuery的部分，我们暂时写到这里，后期还会再继续分享Bootstrap的js部分。

[BootCDN]: https://www.bootcdn.cn/
[20200112191056254.gif_pic_center]: https://img-blog.csdnimg.cn/20200112191056254.gif#pic_center
[20200112193208822.png_pic_center]: https://img-blog.csdnimg.cn/20200112193208822.png#pic_center
[20200112195024441.gif_pic_center]: https://img-blog.csdnimg.cn/20200112195024441.gif#pic_center
[20200112201318927.png_pic_center]: https://img-blog.csdnimg.cn/20200112201318927.png#pic_center
[20200112201922832.png_pic_center]: https://img-blog.csdnimg.cn/20200112201922832.png#pic_center
[20200112202501251.png_pic_center]: https://img-blog.csdnimg.cn/20200112202501251.png#pic_center
[20200112200553574.gif_pic_center]: https://img-blog.csdnimg.cn/20200112200553574.gif#pic_center
[20200113205836985.gif_pic_center]: https://img-blog.csdnimg.cn/20200113205836985.gif#pic_center