BootstrapV4-基础

系列文章目录

一、Bootdtrap简介

Bootstrap 是一个比较流行的前端框架，将HTML、CSS和JavaScript封装成一个个功能组件，用起来十分简单。

Bootstrap中文官网链接

使用方法

• 使用CDN：

  推荐bootCDN，这里我们选择bootstrap的4.6.0版本。找到bootstrap.min.css和bootstrap.bundle.min.js文件（压缩或者不压缩的都行）复制script标签。

  导入CSS文件：

  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
  

  这个标签必须放在head内，并且在其他所有CSS文件的上面。

  导入js文件：

  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
  

  因为bootstrap是依赖于jQuery的，所以要引入jQuery，并且bootstrap的引入标签必须放在jQuery引入标签的下面，二者都放在head标签内。

• 下载使用：

  在官网文档中，找到下载Bootstrap生产文件的按钮，里面包含多个版本，解压后放到项目目录。

  选择bootstrap.css和bootstrap.bundle.js两个文件引入可以了。和上面一样，要注意引入标签的位置。

二、布局容器

• 元素左右两侧留白：设置class属性为container。

  通常情况下，我们会先写一个两侧留白的div标签，然后把后续内容写在该标签内。大多数网站都采用了两侧留白的布局。

• 元素左右两侧不留白：设置class属性为container-fluid。

三、栅格系统

1. 基本用法

class="row"可以将标签划分为1到12列，至于到底划分为几列，就取决于子标签的数量了。

<div class="container">
    <!-- 划分了两列，每列占6/12 -->
    <div class="row">
        <div class="col-md-6">1 of 2</div>
        <div class="col-md-6">2 of 2</div>
    </div>

    <!-- 划分了两三列，每列占4/12 -->
    <div class="row">
        <div class="col-md-4">1 of 3</div>
        <div class="col-md-4">2 of 3</div>
        <div class="col-md-4">3 of 3</div>