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

最新推荐文章于 2024-11-16 19:01:07 发布

认真撸代码的小权

最新推荐文章于 2024-11-16 19:01:07 发布

阅读量180

点赞数 1

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/CircaOVO/article/details/125959396

版权

本文详细介绍了如何快速学习和使用Bootstrap，包括如何引入Bootstrap库，理解其栅格系统，以及创建表格和表单。通过实例展示了Bootstrap如何简化网页设计，特别是对于快速构建响应式布局。学习Bootstrap只需1-2天，适合前端开发者提升效率。

摘要由CSDN通过智能技术生成

我是先学完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>

输入完成后，是这样的：