Bootstrap学习笔记_bootstrap学习心得可复制-CSDN博客

本文链接：https://blog.csdn.net/grandpastore/article/details/122966854

1. 概念

是一个前端开发的框架
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
定义了很多css样式和js插件。开发人员可以直接使用这些样式和插件，得到丰富的页面效果
框架：一个半成品软件，开发人员可以在框架的基础上，进行开发，简化代码。
响应式布局：同一套页面可以兼容不同分辨率的设备

2. 标准模板

<!doctype html>
<html lang="zh-CN">
<head>
    
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap</title>

    <!--    BootstrapCDN    -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery  -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

</head>
<body>

</body>
</html>

3. 响应式布局

3.1 栅格系统

概念

将一行平均分成12个格子，可以指定元素占几个格子。
在不同分频率的设备上都是12个格子，但是通过指定不同设备上每个元素所占格子的数目，就可以实现响应式布局

步骤

定义容器，相当于表格中的table
- 两种容器类不能互相嵌套。
- container：两边有留白（比100%宽度小一点）
- container-fluid：每一种设备都是100%宽度（完全占满）
```
<div class="container">
  ...
</div>

<div class="container-fluid">
  ...
</div>
```

定义行，相当于表格中的tr

样式：row

<div class="container-fluid">
    <div class="row">
		...
    </div>
</div>

定义元素，指定该元素在不同设备上，所占的格子数目。
- 样式：col-设备代号-格子数目

在这里插入图片描述

<style>
    .inner{
        border: 1px solid red;
    }
</style>

<div class="container-fluid">
     <div class="row">
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
         <div class="col-lg-1 col-sm-2 inner">栅格</div>
     </div>
</div>

注意

一行中如果格子数目超过12，超出的部分换行
栅格类属性可以向上兼容。栅格类适用于真实设备屏幕宽度大于或等于分界点大小的设备
如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行

4.全局CSS样式

官方文档

https://v3.bootcss.com/css/#overview

4.1 按钮

btn btn-样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yDl2Qr6T-1645000722926)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-20220216154813989.png)]$

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

尺寸：使用 btn-lg、btn-sm、btn-xs 就可以获得不同尺寸的按钮。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5V9wpeFg-1645000722927)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-20220216155514753.png)]$

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>

激活状态：通过添加active实现

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R9YU3dR7-1645000722928)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-20220216155750582.png)]$

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

禁用状态：disabled

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCbSTwio-1645000722928)(C:\Users\11626\AppData\Roaming\Typora\typora-user-images\image-20220216155826146.png)]$

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

4.2 图片

class=“img-responsive”：图片在任意尺寸都占100%（能自己缩放）
图片形状

 <!-- 方 -->
<img src="..." alt="..." class="img-rounded">

 <!-- 圆 -->
<img src="..." alt="..." class="img-circle">

 <!-- 相框 -->
<img src="..." alt="..." class="img-thumbnail">

4.3 表格

table：基础样式
table-striped：条纹状表格
table-bordered：带边框的表格
table-hover：鼠标悬停
table-condensed：紧缩表格
状态类
- active
- success
- info
- warning
- danger

4.4 表单

form-control
更多的查看官方文档

5.组件

官方文档

https://v3.bootcss.com/components/

5.1 导航条

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <!--    汉堡按钮    -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <!--    下拉框    -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <!--下拉项-->
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>

                        <!--    横线      -->
                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-left">
                <div class="form-group">
                <!--    搜索框     -->
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <!--    提交按钮    -->
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            
        </div><
    </div>
</nav>

5.2 分页条

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

6.插件

官方文档

https://v3.bootcss.com/javascript/

6.1 轮播图

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>