2021Bootstrap框架入门（最新）

最新推荐文章于 2024-06-25 01:34:48 发布

杰瑞同学

最新推荐文章于 2024-06-25 01:34:48 发布

阅读量500

点赞数

分类专栏：前端文章标签： css jquery html bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_48249606/article/details/120298486

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Bootstrap的基础知识，包括其概念、特点、版本差异以及如何引入。重点讲解了Bootstrap的栅格系统，以及如何利用它构建响应式布局。此外，还提到了Bootstrap中的常见组件，如按钮、表单、轮播图等，帮助读者快速上手Bootstrap框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap入门

背景

传统方式是使用div+css实现响应式布局，为了适配各种设备，会写大量的css代码，导致开发效率降低，顺应时代诞生了bootstrap

概念

bootstrap是一个能够快速搭建响应式布局的前端ui框架

特点

内置了很多的组件，比如轮播图、标签页、分页、表单等等，用户可以直接使用
bootstrap提供了一套用于构建响应式布局的栅格系统，用于快速搭建一个适应性良好的页面布局
bootstrap有一些内置组件不易修改，本身用了JavaScript来实现，比如轮播图

版本

目前国内常用版本是3.3.7，版本稳定。内部使用了浮动布局来实现响应式
国外常用版本是4.6版本，以及国内未来普及的版本。内部使用了弹性容器来实现响应式布局
4.6不兼容IE低版本

bootstrap3与bootstrap4的区别

Bootstrap3	Bootstrap4
Less预处理	Sass预处理
4种栅格类	5种栅格类
使用px为单位	使用rem和em为单位（除部分margin和padding使用px）
使用push和pull向左右移动	偏移列通过offset-类设置
使用float的布局方式	选择弹性盒模型（flexbox）

Bootstrap3的4种栅格：

特小（col-xs-）适配手机(<768px)
小（col-sm-）适配平板(≥768px)
中（col-md-）适配电脑(≥992px)
大（col-lg-）适配宽屏电脑(≥1200px)

Bootstrap4的5种栅格：

特小（col-）(<576px)
小（col-sm-）(≥576px)
中（col-md-）(≥768px)
大（col-lg-） (≥992px)
特大（col-xl-）（≥1200px）

Bootstrap4特点：

新增网格层适配了移动端；
全面引入ES6新特性（重写所有JavaScript插件）；
css文件减少了至少40%；
所有文档都用Markdown编辑器重写；
放弃对IE8的支持

引入

引入css
- 官网下载对应版本的生产版本的bootstrap文件
- 页面<head>中通过<link>引入bootstrap.min.css
引入jQuery以及js
- jquery:一个JavaScript框架，主要用于减少页面中的JavaScript代码，bootstrap的组件使用了jQuery，至少引入jQuery3.0以上版本
- 除了jQuery以外，还需要引入bootstrap.min.js以及bootstrap.bundle.min.js

js文件推荐在body标签中使用<script>引入：
<script src="jquery文件地址"></script>
<script src="bootstrap.min.js文件地址"></script>
<script src="bootstrap.bundle.min.js文件地址"></script>

一个标准的使用bootstrap页面初始代码

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- 设置浏览器的兼容模式版本(让IE使用最新的渲染引擎工作) -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 声明在移动端端所用到的属性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>微金所</title>

    <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!-- 条件注释的作用：
      判断条件满足时，就会执行注释中的HTML代码
      条件不满足时，就会当做注释
    -->
    <!-- 
      html5hiv: 让浏览器可以识别HTML5的新标签
      respond:  让低版本浏览器可以使用css3的媒体查询
     -->
    <!-- [if lt IE 9]>
      <script src="lib/html5shiv/html5shiv.js"></script>
      <script src="lib/respond/respond.src.js"></script>
    <![endif] -->

    <!-- 自己写的CSS文件 -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <!-- 必须引入，位置必须这样 -->
    <script src="lib/jquery/jquery.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <!-- 自己写的js文件 -->
    <script src="js/main.js" type="text/javascript"></script>
</body>
</html>

两种常见使用流程

单独使用css：页面只使用栅格系统或者不需要js的组件，只需要引入css即可
如果需要使用一些带js的插件，就必须引入js文件

栅格系统

概念：凭借12列系统、5个默认响应层、sass变量和混合以及数十个预定义类使用强大的移动优先flexbox网格构建各种形状和大小的布局
思想：内置了很多的用于布局的预定义类，我们需要根据它所定义的规范去使用内置的class来搭建页面
主要内容
1. 12列系统
  - bootstrap会将一行看成12列，12列由该行的内容进行分配
2. 布局的HTML架构
  - 最外层容器会设置.container让容器本身有自适应效果
  - container容器内部只允许有.row的直接子标签
    - 每个.row的容器内部采用12列系统
    - 12系统内的标签可以通过bootstrap所提供的内置的类来进行分配列数
    - 可以设置一行在不同屏幕宽度下占据的列数
      特大（1140px）：一行显示2个（col-xl-6）
      大（960px）：一行显示3个（col-lg-4）
      中（720px）：一行显示6个（col-md-2）
      小（540px）：一行显示2个（col-sm-6）
      特小：默认是一行一个（clo-12）
3. 如果希望每一行的内容列数自动分配，可给.row的每个直接子标签添加.col

	超小 <576px	Small ≥576px	Medium ≥768px	Large ≥992px	特大 ≥1200px
最大容器宽度	无（自动）	540像素	720 像素	960 像素	1140 像素
类前缀	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
列数	12	同左	同左	同左	同左
天沟宽度	30px（每列15px）	同左	同左	同左	同左
可嵌套	是的	同左	同左	同左	同左
列排序	是的	同左	同左	同左	同左

常见组件

按钮

<button type="button" class="btn btn-primary">
    Primary
</button>
<button type="button" class="btn btn-info">
    Primary
</button>
<button type="button" class="btn btn-danger">
    Primary
</button>
<button type="button" class="btn btn-light">
    Primary
</button>

表单

<form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="form-group form-check">
      <input type="checkbox" class="form-check-input" id="exampleCheck1">
      <label class="form-check-label" for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

表格(bootstrap3)

<table class=“table table-striped”>
    <tr>
        <td>深圳市</td>
        <td>罗湖区</td>
        <td>星湖花园</td>
    </tr>
    <tr>
        <td>深圳市</td>
        <td>罗湖区</td>
        <td>星湖花园</td>
    </tr>
    <tr>
        <td>深圳市</td>
        <td>罗湖区</td>
        <td>星湖花园</td>
    </tr>
</table>

卡片

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

警告框(js)

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

轮播图(js)

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators"  data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators"  data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

下拉菜单(js)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

标签页（bootstrap3和4已经取消了标签页的样式了，需要自己设置）（http://it028.com/bootstrap-tab-plugin.html）

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            菜鸟教程
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>

模态框（js）

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

网站

https://www.bootcss.com/