Bootstrap安装和使用

bootstrap简介

Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。

安装bootstrap

1、进入bootstrap官网

2、选择版本，点击下载bootstrap（这里以v4.6为例）

3、点击下载bootstrap生产文件

4、解压文件

也可以直接导入Boostrap CDN

https://www.bootcdn.cn/twitter-bootstrap/

<head>
  <meta charset="UTF-8">
  <title>网格系统</title>
  <!--CDN导入-->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet">
</head>

注意版本！

bootstrap的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格系统</title>
    <link rel="stylesheet" type="text/css" href="lib/css/bootstrap.min.css"/>
</head>
<body>
<!--
容器布局:
  container 类用于固定宽度并支持响应式布局的容器。
  container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
-->
<div class="container">
  <!--行元素-->
  <div class="row">
    <!--
    列元素:一行总共12列，如果超过了12列则会到下一行
    -->
    <div class="col-md-4" style="background-color: red">第一块</div>
    <div class="col-md-4" style="background-color: #1e7e34">第二块</div>
    <div class="col-md-4" style="background-color: #005cbf">第三块</div>
  </div>

  <div class="row">
    <div class="col-md-4" style="background-color: #20c997">第一块</div>
    <div class="col-md-4" style="background-color: #dc3545">第二块</div>
    <div class="col-md-5" style="background-color: #491217">第三块</div>
  </div>

  <div class="row">
    <div class="col-md-3 offset-md-10">
      <button type="submit" style="background-color: #4e555b">提交</button>
    </div>
  </div>
</div>
</body>
</html>