Bootstrap

Bootstrap

概念

传统的使用div+CSS实现响应式布局，为了适配各种设备，会写大量的CSS代码，导致开发效率降低。Bootstrap是一个移动端优先用于快速搭建响应式布局的前端UI框架，能够使用已经写好的代码用于搭建出一个具有良好适应性的页面。Bootstrap内置了很多的组件，比如轮播图、标签页、分页、表单等，用户可以直接使用。Bootstrap还提供了一套用于构建响应式布局的栅格系统，用于快速搭建一个良好适应性的页面布局。但Bootstrap有些内置组件不易修改，其本身用了JavaScript来实现的。

目前国内常用Bootstrap版本是3.3.7 ，很稳定，其内部使用了浮动布局来实现响应式。国外以及国内大公司常用的是4.6版本。4.6版本不兼容IE低版本。Bootstrap3使用Less语言，有4种栅格类，使用px为单位，使用push和pull向左右移动，使用floatl的布局方式。Bootstrap4使用Sass语言编写，有5种栅格类，除部分margin:和padding使用px，其余使用rem和em为单位，偏移列通过offset-类设置选择弹性盒模型（flexbox）。且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="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">
</head>
<body>
    <!-- 所有内容:测试按钮 -->
    <button class="btn btn-info">测试效果</button>
    <!--所有内容结束 -->
    <!-- 保证使用bootstrap的组件能够正常工作 -->
    <script src="jquery-3.0.0.min.js文件地址"></script>
    <script src="bootstrap.min.js文件地址"></script>
    <script src="bootstrap.bundle.min.js文件地址"></script>
</body>
</html>

两种常见使用流程

  • 单独的使用CSS部分。如果页面只使用栅格系统或者不需求js的组件，只需要引入CSS即可。
  • 如果要使用一些带js的插件，必须引入js文件。

栅格系统

概念

Bootstrap内置的一整套用于快速搭建响应式布局的系统，内置了很多的用于布局的类，我们需要按照它所要求的规范去使用内置的class来搭建页面。

主要内容

  • 12列系统

    Bootstrap会将一行看成12列，12列由该行的内容进行分配。

  • 布局的HTML架构

    • 最外层容器(指的一个模块，)会给.container让容器本身有自适应效果
      • 屏幕宽度>=1200(xl) 容器宽度为1140px
      • 屏幕宽度>=992(lg) 容器宽度为960px
      • 屏幕宽度>=768(md) 容器宽度为720px
      • 屏幕宽度>=568(sm) 容器宽度为540px
      • 屏幕宽度<568 容器宽度为100%
    • .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
        • 特小：默认是一行一个:col-12
      • 希望每一行的内容列数自动分配，给.row的每个直接子标签添加.col

常见组件

可查看中文文档

按钮

<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>
033

表单

<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>
034

表格

<table class="table">

</table>
035

卡片

<div class="card" style="width: 18rem;">
    <img src="image/id1.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">花瓶1</h5>
        <p class="card-text">好看又不贵</p>
        <a href="#" class="btn btn-primary">立即购买</a>
    </div>
</div>
036

警告框

<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>
037

轮播图

 <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>
         <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
         <li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
     </ol>
     <div class="carousel-inner">
         <div class="carousel-item active">
             <img src="image/banner1.jpg" class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
             <img src="image/banner2.jpg" class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
             <img src="image/banner3.jpg" class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
             <img src="image/banner4.jpg" class="d-block w-100" alt="...">
         </div>
         <div class="carousel-item">
             <img src="image/banner5.jpg" class="d-block w-100" alt="...">
         </div>
     </div>
     <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
         <span class="sr-only">Previous</span>
     </a>
     <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
         <span class="carousel-control-next-icon" aria-hidden="true"></span>
         <span class="sr-only">Next</span>
     </a>
</div>
038

下拉菜单

<div class="dropdown">
    <button 
            class="btn btn-secondary dropdown-toggle" 
            type="button" 
            id="dropdownMenuButton" 
            data-toggle="dropdown" 
            aria-haspopup="true" 
            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>
039

标签页

<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>
</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>
040

模态框

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo1">
    Launch demo modal
</button>
<div class="modal fade" id="demo1" 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">登录</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">重置</button>
                <button type="button" class="btn btn-primary">登录</button>
            </div>
        </div>
    </div>
</div>

​ 041 042

posted @   AncilunKiang  阅读(450)  评论(0)  编辑  收藏  举报
相关博文：
· CSS布局
· CSS进阶
· bootstrap
· 48.Bootstrap基础
· Bootstrap - 响应式布局
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示