《前端Front-end Crush》Bootstrap ＜小权＞

我是先学完Vue 再来学习的，但实际上只要掌握Html和CSS就好。

Bootstrap的一个特性是提供一些现成的元素，比如说比较好看的按钮，比较方便的表单，和一些网页上常见的选项和功能，说白了就是提供了一个好看一点的组件，只要掌握起特性并引入其中，很容易就能上手

学习网站：www.bootcss.com

(我一开始看了看视频，后面发现压根没必要，官网提供非常靠谱的中文文档学习平台足够了)

时长 ：（1-2天）

学习目的：为了能够快速构造出一个自己喜欢的网站的按钮和表单。

下一站：Layui（如果格式差不多）我会转战去学React 和Angular.js

第一，引入 只要是学到前端，多半部分都要砸在js上面，所以学会引入源文件是非常重要的：

首先注意一点，看到官网的说辞： 

所以引入BootStrap前 务必先引入Jquery

官网中给出了在线文档：也就是说如果你想简单的引入他们的样式（且你的电脑一般都是连着网络）那复制这几行代码即可：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

 离线的话需要把代码整段拷贝下来（一般用不到）官网也有教程，不再赘述。

引入：

复制到原本的代码中，创造一个子标签

示例：

<h1>你好，世界</h1>

打开浏览器，会看到：

有人会说：这不和HTML里面一样吗？

如果你曾细心观察过你用HTML所创立的标题，这个标题显然是比这个要粗的，当然，我们可以移除掉一开始导入的那几段Bs文件代码

就会变成：

 由此可以发现，引入BootStrap后，字体的样式就会发生改变，而这个改变，压根不需要操作其他步骤去实现。非常方便。

一.布局容器

在学HTML对页面进行排版的时候，我们就已经了解到了，任何创作都要在一张画板上面进行，在布局中，一般有两种布局方式

我们一般用<div>标签进行创建

<div class="container">运用了固定宽度并支持响应式布局的容器。这是一个块状元素div</div>

同样的，在官网我们还有另外一种方式：

<div class="container-fluid">类用于 100% 宽度，占据全部视口（viewport）的容器 块状元素div</div>

：

设置完容器之后，我们开始对页面进行布局：

BootStrap提出了一个新型的布局：栅格系统布局，通过行（row）中创造一系列的列

比如:

<div class="row"> 
    <div class="col-md-1">这是一个位列只占1的列状元素</div>
<div>

位列1的元素显示出来是这样子的

文字多了会放不下从而放到第二列 而将页面缩小会占满整一个屏幕的一行

像这样：

 栅格系统中规定一行的长度为12，如果超过了，就会显示在下面去

下面是4个的：代码如下：

  <div class="col-md-1" style="background-color:aqua">1</div>
            <div class="col-md-1" style="background-color:green">1</div>
            <div class="col-md-1" style="background-color:black">1</div>
            <div class="col-md-1" style="background-color:yellow">1</div>

 

当然你也可以去用其他的

当然，作为设计流式布局的BootStrap自然想到了不同设备使用的不同情况：
通过在一个类中设立相对应设备相适应的栅格系统，大大地增加了不同设备使用基于BootStrap开发的页面布局中的兼容性。

例如：（摘自官网）

如果不想将相邻两个栅格放在一起：就可以使用.col-md-offset-*(*代表为元素增加左侧的边距margin)

通过调整页面边距调整元素偏移的宽度。

嵌套列：为了内置的栅格系统内容嵌套（即套娃）可以：

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

会得出来这样的效果：

  

二.剩余部分内容

:

看完BootStrap的整一个开发文档，发现剩下的功能只需要了解就好（挑比较常用的），需要的时候可以到官网去查看相应的API文档。

1.代码：<code>标签包括内联样式的代码片段 展示效果是这样的

<div>I don't think it really matters to me
                <code>This is my code at this way @circaOVO</code></div>

        </div>

效果：

 2.*表格

表格是一个比较成熟的体系结构（一开始没有弄清楚表格的使用操作，只是讲了有《table》给其设立.table标签，但官方文档没有，我去查询了菜鸟入门我才明白）

大体模式：

 <table class="table">
                  <caption>基本的表格布局</caption>
                  <thead>
                    <tr>
                      <th>名称</th>
                      <th>城市</th>
                      <th>国家</th>
                      <th>岁数</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Kingsley</td>
                      <td>Chengdu</td>
                      <td>China</td>
                      <td>18</td>
                    </tr>
                    <tr>
                      <td>Circa</td>
                      <td>shenzhen</td>
                      <td>United State</td>
                      <td>26</td>
                    </tr>
                  </tbody>
                </table>
                <!-- table的使用方式：
                先做一个大括号应用于table标签，
              caption作为表格标题
              然后开始thead 作为一个表头当中的内容，
              然后用tr作为一行中的单行元素
              表格的内容（不含表格）作为全表格里面的内容表格用tbody表示
              td为单元格的内容-->

复制到容器中会看到这样(暴露年龄了哈哈哈):

 表格有很多种样式：条纹的，带边框的，包括可以在鼠标悬停上面做操作的。

3.表单

这里就比较综合了，在学过了HTML基本的标签，我们要尝试设立一个登录界面，

BootStrap在里面将其美化的不错——至少像个人样。

这里截取了官方的文档：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

输入完成后，是这样的：

 如果你没有用到BootStrap，那就会是这样的。。。（wtf）

最后就是基本上的实例了，我打算开发一个基于Vue框架和Boostrap的样式开发一个Excel表格。

（懒癌了 这个博客我写了快4天）

有机会再见！886