Bootstrap学习笔记

最新推荐文章于 2023-01-18 14:41:31 发布

铭先生学java

最新推荐文章于 2023-01-18 14:41:31 发布

阅读量450

点赞数 1

文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/Mxs_503/article/details/125862175

版权

文章目录

前言
- Bootstrap学习

前言

提示：这是我观看尚硅谷和优极限的Bootstrap视频再结合了W3shcool、菜鸟编程所整理出来的学习笔记：

有了Bootstrap后，写前端页面更方便了！写页面不仅轻松快捷，效果也是你用原生的HTML、CSS、JS、JQuery难写出来的。学了这个后，作为后端开发者的角度来看，写出的页面是足够符合我心意了！

Bootstrap学习

1、Bootstrap简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

优点

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

基本内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap 插件部分详细讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

1.1、使用模板

使用以下给出的这份超级简单的 HTML 模版，或者修改。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

<!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 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.cn/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.cn/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.cn/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>
  </body>
</html>

简洁模板：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--  使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--
      viewport表示用户是否可以缩放页面
      width指定视区的逻辑宽度
      device-width指示视区宽度应为设备的屏幕宽度
      initial-scale指令用于设置web页面的初始缩放比例
      initial-scale=1则将显示未经缩放的web文档
  -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap的HTML标准模板</title>
  <!--  载入Bootstrap的CSS-->
  <link href="IntoBootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello Boostrap</h1>
<!--如果要使用Bootstrap的js插件,必须先调入jQuery-->
<script src="js/jquery-3.6.0.js"></script>
<!--包括所有Boostrap的js插件或者可以根据需要使用的js插件调用-->
<script src="IntoBootstrap/js/bootstrap.min.js"></script>
</body>
</html>

实例模板：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>bootstrap布局</title>
    <link href="../dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>

</body>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
</html>

模板简单说明

引入bootstrap的CSS文件
如果使用它的jquery插件的话，要引入jquery

2、容器布局

2.1、固定容器（Container）

用固定宽度并支持响应式布局的容器

<div class="container">
  ...
</div>

阈值	width/px
大于等于1200（lg 大屏 pc）	1170
大于等于992，小于1200 （md 中屏）	970
大于等于768，小于992 （sm 平板）	750
小于768 （xs 移动手机）	auto

2.2、流体容器（Container-fluid）

用100%宽度，，占据全部视口(viewport)的容器

拓展：

width属性值为auto和100%是不一样的
- 100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度
- auto表示子元素的宽度+内边距+外边距+边框才等于父元素的宽度

3、栅格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

移动设备优先策略

内容
- 决定什么是最重要的。
布局
- 优先设计更小的宽度。
- 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
- 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

代码演示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style>
        .container{
            background-color: yellow;
        }
        div[class|=col]{
            border: 1px solid;
            height: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-8"></div>
        <div class="col-lg-6 col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-8"></div>
        <div class="col-lg-4"></div>
    </div>
    <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script src="../dist/js/bootstrap.js"></script>
</html>

实例—缩略图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=none">
    <title>缩略图</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.css">
    <style>
        h3,p{
            text-align: center;
        }
        a{
            text-decoration: none;
        }
        a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Hello, Thumbnails!</h1>
        <p>这是一个略缩图的实例。</p>
    </div>
    <div class="row">
        <div class="col-lg-3 col-lg-push-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/aliyun.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">阿里云</a></h3>
                    <p>无影云桌面</p>
                    阿里云-全球领先的云计算及人工智能公司。阿里云最全特惠活动聚集于此！
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-push-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/webpack.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">Webpack</a></h3>
                    <p>是前端资源模块化管理和打包工具</p>
                    Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将模块按照依赖打包成前端资源。
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/react.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">React</a></h3>
                    <p>用于构建用户界面的 JavaScript 框架</p>
                    React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/bootstrap.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">优站精选</a></h3>
                    <p>Bootstrap 网站实例</p>
                    Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.js"></script>
</html>

3.1、列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序

<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
        <p>
            排序前
        </p>
        <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
    <br>
    <div class="row">
        <p>
            排序后
        </p>
        <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
        </div>
        <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
        </div>
    </div>
</div>

3.2、列偏移

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

在下面的实例中，我们有 <div class="col-lg-6">cpl-lg-4</div>，我们将使用 .col-md-offset-4 class 来居中这个 div。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列偏移</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
    <style>
        div[class|=col]{
            height: 50px;
            background-color: #1b6d85;
        }
        .row{
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            col-lg-4
        </div>
    </div>
</div>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</html>

3.3、栅格盒模型设计的精妙之处

容器两边具有15px的padding

行两边具有-15px的margin

列两边具有15px的padding

为了维护槽宽的规则，

列两边必须要有15px的padding

为了使列嵌套行

行两边必须要有-15px的margin

为了让容器可以包裹住行

容器两边必须要有15px的padding

3.4、总结

列组合

列总和数不能超12，大于12，则自动换到下一行

列偏移

只需要在列元素上添加“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就向右偏移。
- 例如，你子啊列元素上添加“col-md-offset-8”，表示该列向右以动8个列的宽度（要保证列与偏移列的总书不超过12，不然会导致列断行|换行显示）

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是同各国添加“col-md-push-”和“col-md-pull-”(其中星号代表要排序的列组合数)
向右浮动，如果浮动到右边的位置上正好有列，这个时候，后边的列就会覆盖掉你向右浮动的列（因为代码是从上往下执行的，后面的覆盖掉了前面的）
向左浮动时，如果浮动到左的位置的上正好有列，这个时候，浮动的那个列就会覆盖原本

列嵌套

Bootstrap框架的网格系统还支持列的嵌套
- 你可以在一个列中添加一个或者多个（row）容器，让后在这个行列器中插入列

代码演示

列组合

<h1 style="text-align: center">列组合</h1>
<br/>
1.boostrap的栅格系统把屏幕分成了等分的12列，你所有的列的组合总数不能超过12列，否则就会换行
2.所有的列总数<=12
<div class="container">
    <div class="row">
        <div class="col-lg-3 " style="background-color: yellow">1</div>
        <div class="col-lg-3" style="background-color: #d04181">2</div>
        <div class="col-lg-3" style="background-color: #a4a1a9">3</div>
        <div class="col-lg-3" style="background-color: #004680">4</div>
    </div>
</div>

列嵌套

<h1 style="text-align: center">列嵌套</h1>
<br/>
<div class="container">
    <div class="row">
        <div class="col-lg-6 " style="background-color: yellow">
            <div class="row">
                <div class="col-lg-4" style="background-color: rgba(255,255,0,0.16)">1.1</div>
                <div class="col-lg-4" style="background-color: #ff0008">1.2</div>
                <div class="col-lg-4" style="background-color: #802d00">1.3</div>
            </div>
        </div>
        <div class="col-lg-6" style="background-color: #d04181">2</div>
    </div>
</div>

列偏移

<style>
    div[class|=col]{
        height: 50px;
        background-color: #1b6d85;
    }
    .row{
        height: 50px;
        background-color: yellow;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-lg-4">
            col-lg-4
        </div>
    </div>
</div>
<hr/>
偏移后
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            col-lg-4
        </div>
    </div>
</div>

push与offset的区别

col-md-offset-3（在左侧补充3列）
col-md-push-8（从左侧往右侧推8列）
col-md-pull-2（往左侧拉2列）

从效果上看

offset和push效果一样（基本情况），其实采取的方法是不同的，offset是直接在左侧补列达到偏移的效果，push是通过位置移动达到移动的效果

【对于push与offset，实践新体会】

当我在写表单布局的时候，在插入表单控件单选框时，我设置了label占两列，向右push2列，而后面的单选内容，又设置了占4列，向右推动1列，那就出现了如下问题：

在这里插入图片描述

造成这样，很重要的原因是代码是从前往后执行的，性别虽然向右浮动了2格，但是后面的具体内容占了四列，offset（向右推动了1列），可能又因为form-group的样式的原因出现了这种情况。

而把前面的label改成offset就对了！

4、常用样式

4.1.1、标题

bootstrap对h1~h6的标题效果进行了覆盖，把 HTML 标题（<h1> 到 <h6>）的样式设置为有更粗的 font-weight 以及响应式的 font-size。

如果需要，您还可以在其他元素上使用 .h1 到 .h6 类，使它们表现为标题

display 标题

display 标题用于比普通标题更突出（更大的 font-size 和更细的 font-weight），有六个类可供选择：.display-1 到 .display-6：

small副标题

在 Bootstrap 5 中，HTML <small> 元素（和 .small 类）用于在任何标题中创建较小的辅助文本

代码演示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>标题样式</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
</head>
<body>
1.标题
 bootstrap对h1~h6的标题效果进行了覆盖,提供了对应的类名，为非标题元素设置样式.h1~.h6
 副标题提供了small标签，或者.small类名
2.段落
  通过.lead来突出强调的内容（其作用就是增大文本字号，加粗文本，而且对行搞和margin也做相应的处理）

<h1>标题一<small>我是标题一的副标题</small></h1>
<h2>标题一 <span class="small">我是标题二的副标题</span></h2>
<h3>标题一</h3>
<div class="h1">我是div，h1类</div>
<div class="small">我是div，small类</div>
<p class="lead">lalla</p>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</html>

4.1.2、段落

通过.lead来突出强调的内容（其作用就是增大文本字号，加粗文本，而且对行搞和margin也做相应的处理）

<p class="lead">lalla</p>

4.2、强调

4.2.1、文本颜色

Bootstrap 5 有一些上下文类，可用于提供“由颜色表达的某种意义”。

类名	文本意义
`.text-muted`	此文本已静音。
`.text-primary`	此文字很重要。
`.text-success`	此文本表示成功。
`.text-info`	此文字代表了一些信息。
`.text-warning`	此文本表示警告。
`.text-danger`	此文字代表危险。
`.text-secondary`	次要文本。
`.text-white`	这段文字是白色的（在白色背景上）。
`.text-dark`	此文字为深灰色。
`.text-body`	默认主体颜色（通常为黑色）。
`.text-light`	此文本为浅灰色（在白色背景上）。

在这里插入图片描述
上述图片为菜鸟编程中截取而来【若有侵权行为，请联系我删除！谢谢！】

4.2.2、对齐效果

这个与CSS中的text-align：*

效果一致

<div class="text-left">左对齐</div>
<div class="text-right">右对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-justify">两端对齐</div>

4.3、列表

.list-unstyle这个会是无序列表或有序列表，不显示前面的编号
.list-inline这个会是列表水平排列（有序和无序）
dl-horizontal这个会使描述列表水平排列

代码演示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
</head>
<body>
<!--无序列表-->
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>
<hr/>
<ol>自然数
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>
<hr/>
<hr/>
<div class="text-center">去点列表</div>
<ul class="list-unstyled">
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>
<div class="text-center">水平排列ul</div>
<ul class="list-inline">
    <li>首页</li>
    <li>java学院</li>
    <li>在线课堂</li>
</ul>
<hr/>
<div class="text-center">描述列表</div>
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表是一种样式表语言</dd>
</dl>
<hr/>
<div class="text-center">水平排列dl</div>
<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言</dt>
    <dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
    <dt>测试标题不能超过160px的宽度,否则2个点</dt>
    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果。</dd>
</dl>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</html>

4.4、代码

一般在个人博客上使用较为频繁，用于显示代码的风格/。在Bootstrap主要提供了三种代码风格：

使用<code></code>来显示单行内联代码
使用<pre></pre>来显示多行块代码
- 代码会保留原本的格式，包括空格和换行
- 若想在中显示HTML标签，那就需要用到转义实体字符
- 若你的代码块的代码较多，它还会出现滚动条

样式：pre-scrollable(height,max-height高度固定为340px，超过即出现滚动条)

使用<kbd></kbd>来显示用户输入代码，如快捷键

代码演示

<code>this is the code of java</code>
<hr/>
<code>

    this is the code of java
    this is the code of java
</code>
<hr/>
<code>
    this is the code of java<br/>
    this is the code of java
</code>
<hr/>
<pre>
    代码的内容格式和空行都会被保留
   @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");


        String type = req.getParameter("type");
        System.out.println(type);
        switch (type){
            case "login"-> login(req,resp);

        }
    }
    <ol>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
            <li>...........</li>
         </ol>
</pre>

4.5、表格

4.5.1、表格样式

Bootstrap为表格提供了1种基础样式和4中附加样式以及1格支持响应式的表格中，只需要添加对应的类名就可以得到不同的表格风格

基础样式
- .table：基础表格
附加样式
- .table-striped:斑马线表格
- .table-borderd:带边框的表格
- .table-hover:鼠标悬停高亮的表格
- .table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

4.5.2、tr、th、td样式

提供了物种不同的类名，每种类名控制了行的不同背景颜色

类名	描述	实例
.active	将悬停的颜色应用在行或者单元格上	#f5f5f5
.success	表示成功的操作	# 8
.info	表示信息变化的操作	#d9edf7
.warning	表示格警告的操作	#
.danger	表示一个危险的操作	#f2dede

4.5.3、代码演示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
</head>
<body>
<h1>普通表格CSS</h1>
<table >
    <thead>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Bill</td>
        <td>Gates</td>
        <td>bill@example.com</td>
    </tr>
    <tr>
        <td>Steve</td>
        <td>Jobs</td>
        <td>steve@example.com</td>
    </tr>
    <tr>
        <td>Elon</td>
        <td>Musk</td>
        <td>elon@example.com</td>
    </tr>
    </tbody>
</table>
<hr/>
<h1>bootstrap表格</h1>
<table class="table table-bordered table-hover  table-condensed table-responsive table-striped" >
    <thead>
    <tr class="success">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
    </tr>
    </thead>
    <tbody>
    <tr class="danger">
        <td>Bill</td>
        <td>Gates</td>
        <td>bill@example.com</td>
    </tr>
    <tr class="warning">
        <td>Steve</td>
        <td>Jobs</td>
        <td>steve@example.com</td>
    </tr>
    <tr class="info">
        <td>Elon</td>
        <td>Musk</td>
        <td>elon@example.com</td>
    </tr>
    <tr class="active">
        <td>Elon</td>
        <td>Musk</td>
        <td>elon@example.com</td>
    </tr>
    </tbody>
</table>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</html>

4.6、表单

表单主要功能使用来与与用户左交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

4.6.1、表单控件

.form-control .input-lg(较大) .input-sm(较小)

4.6.1.1、输入框text

.form-control

<div class="row">
    <div class="col-lg-3">
        <input type="text" class="form-control"> <br/></div>
    <div class="col-lg-3">
        <input type="text" class="form-control input-lg"> <br/></div>
    <div class="col-lg-3">
        <input type="text" class="form-control input-sm"> <br/></div>
    <br/>
</div>

4.6.1.2、下拉选择框select

多行选择设置：multiple=“multiple”

<div class="col-lg-3">
    <select class="form-control" multiple="multiple">
        <option>请选择城市</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
</div>

4.6.1.3、复选框checkbox

垂直显示：.checkbox

水平显示：.checkbox-inline

<div class="row">
    <div class="col-lg-3">
        <div class="checkbox">
            <label><input type="checkbox" name="hobby">唱歌</label>
        </div>
        <div class="checkbox">
            <label><input type="checkbox" name="hobby">跳舞</label>
        </div>
    </div>
</div>
<hr/>
<div class="row">
    <div class="col-lg-3">
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby">唱歌
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby">跳舞
            </label>
    </div>
</div>

4.6.1.4、单选框radio

垂直显示：.radio

水平显示：.radio-inline

<div class="row">
    <div class="col-lg-3">
        <div class="radio">
        <label><input type="radio" name="sex">男</label>
        </div>
        <div class="radio">
            <label><input type="radio" name="sex">女</label>
        </div>
    </div>
</div>
<hr/>
<div class="row">
    <div class="col-lg-3">
        <label class="radio-inline">
            <input type="radio"  name="sex">男
        </label>
        <label class="radio-inline">
            <input type="radio" name="sex">女
        </label>
    </div>
</div>

4.6.1.5、按钮

使用button实现

基础样式：btn

<div class="btn">按钮</div>

附加样式：btn-primary btn-ibfo btn-success btn-danger btn-link btn-default

<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-warning btn-sm">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>

多标签支持：使用a div span 等制作按钮

<div class="btn">按钮</div>
<span class="btn">按钮</span>
<a href="##" class="btn btn-danger"></a>

按钮大小

使用.btn-lg .btn-sm 或 .btn-xs 就可以获得不同的尺寸的按钮

<button class="btn btn-warning btn-lg">按钮</button>
<button class="btn btn-info btn-sm">按钮</button>
<button class="btn btn-info btn-xs">按钮</button>

按钮禁用

方法1：在标签中添加disable属性（真的禁用）

<button class="btn" disabled="disabled" onclick="alert('hello')">按钮</button>

方法2：在元素标签中添加类名“disabled”（只是样式中禁用，实际功能仍然存在）

<button class="btn disabled" onclick="alert('hello')">按钮</button>

4.6.2、表单布局

基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。下列列出了创建基本表单的的步骤：

向父标签<form>添加role="form"
把标签和控件放在一个带有class.form-group的
中。这是获取最佳间距所必需的。
向所有的文本元素<input> <textarea> <select>添加class=“form-control”

4.6.2.1、水平表单

同一行显示form-horizontal

配合Bootstrap框架的网格系统

<!--水平表单
设置样式：class="form-horizontal" 
-->
<form action="#" class="form-horizontal" role="form">
    <h2 class="text-center">用户信息表</h2>
    <div class="form-group">
        <label for="username" class="control-label col-lg-2 col-lg-offset-2">姓名</label>
        <div class="col-lg-4">
            <input type="text" class="form-control" id="username" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-lg-2 col-lg-offset-2">密码</label>
        <div class="col-lg-4">
            <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-2 col-lg-offset-2">爱好</label>
        <div class="col-lg-4 col-lg-offset-1">
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby"/>唱歌
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby"/>跳舞
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" name="hobby"/>看电影
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-2 col-lg-offset-2">性别</label>
        <div class="col-lg-4 col-lg-offset-1">
            <label class="radio-inline">
                <input type="radio" name="sex"/>男
            </label>
            <label class="radio-inline">
                <input type="radio" name="sex"/>女
            </label>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-lg-2 col-lg-offset-2">籍贯城市</label>
        <div class="col-lg-4">
            <select class="form-control">
                <option>请选择城市</option>
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="remark" class="control-label col-lg-2 col-lg-offset-2">简介</label>
        <div class="col-lg-4">
            <textarea class="form-control" id="remark"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-lg-1 col-lg-offset-5">
            <button class="btn btn-success">提交</button>
        </div>
    </div>
</form>

4.6.2.2、内联表单

将表单的控件都在一行内显示是form-inline

注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别

<form action="#" role="form" class="form-inline">
    <div class="form-group">
        <label for="uname" class="control-label">姓名</label>
        <input type="text" class="form-control" id="uname" placeholder="请输入姓名"/>
    </div>
    <div class="form-group">
        <label for="password" class="control-label">密码</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码"/>
    </div>
    <div class="form-group">
        <button class="btn btn-success">登录</button>
    </div>
</form>

4.7、缩略图

缩略图在电商类的网站很常见，最常见的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让略缩图配合标题、描述内容，按钮等。

<div class="row">
        <div class="col-lg-3 col-lg-push-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/aliyun.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">阿里云</a></h3>
                    <p>无影云桌面</p>
                    阿里云-全球领先的云计算及人工智能公司。阿里云最全特惠活动聚集于此！
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-push-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/webpack.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">Webpack</a></h3>
                    <p>是前端资源模块化管理和打包工具</p>
                    Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将模块按照依赖打包成前端资源。
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-3 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/react.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">React</a></h3>
                    <p>用于构建用户界面的 JavaScript 框架</p>
                    React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6 ">
            <div class="thumbnail">
                <img src="../../img/bootstrap.png" alt="bootstrap">
                <div class="caption">
                    <h3><a href="javascript:;">优站精选</a></h3>
                    <p>Bootstrap 网站实例</p>
                    Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。
                </div>
            </div>
        </div>
    </div>

4.8、面板

默认的.panel组件所做的只是设置基本边框(border)和内补（padding）来包含内容。

.panel-default:默认样式

.panel-heading:面板头

.panel-body:面板主体内容

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

实践例子

<div class="panel panel-success">
    <div class="panel-heading">
        <h2 class="panel-title text-center">框架合集</h2>
    </div>
    <div class="panel-body">
       <div class="container">
           <div class="row">
               <div class="col-sm-6 col-md-4 col-lg-3">
                   <div class="thumbnail">
                       <img src="../../img/bootstrap.png" alt="bootstrap">
                       <div class="caption">
                           <h3>Bootstrap</h3>
                           <p>一个超级容易上手的框架！</p>
                           <p><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-heart"> 喜欢</span></a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-pencil"> 评论</span></a></p>
                       </div>
                   </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-3">
                   <div class="thumbnail">
                       <img src="../../img/aliyun.png" alt="bootstrap">
                       <div class="caption">
                           <h3>Bootstrap</h3>
                           <p>一个超级容易上手的框架！</p>
                           <p><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-heart"> 喜欢</span></a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-pencil"> 评论</span></a></p>
                       </div>
                   </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-3">
                   <div class="thumbnail">
                       <img src="../../img/webpack.png" alt="bootstrap">
                       <div class="caption">
                           <h3>Bootstrap</h3>
                           <p>一个超级容易上手的框架！</p>
                           <p><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-heart"> 喜欢</span></a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-pencil"> 评论</span></a></p>
                       </div>
                   </div>
               </div>
               <div class="col-sm-6 col-md-4 col-lg-3">
                   <div class="thumbnail">
                       <img src="../../img/react.png" alt="bootstrap">
                       <div class="caption">
                           <h3>Bootstrap</h3>
                           <p>一个超级容易上手的框架！</p>
                           <p><a href="#" class="btn btn-primary" role="button"><span class="glyphicon glyphicon-heart"> 喜欢</span></a> <a href="#" class="btn btn-default" role="button"><span class="glyphicon glyphicon-pencil"> 评论</span></a></p>
                       </div>
                   </div>
               </div>
           </div>
       </div>
    </div>
</div>

5、BootStrap插件

5.1、导航

使用下拉与按钮组合可以制作导航

要点：

基本样式：.nav 与“nav-tabs”、"nav-pills"组合制作导航
分类：
- 标签型（nav-tabs）导航
- 胶囊型（nav-pills）导航
- 堆栈（nav-stacked）导航
- 自适应（nav-justified）导航
- 面包屑式（breadcrumb）导航，单独使用样式，不予nav一起使用，直接加入ol、ul中即可，一般用于导航，主要式其的作用告诉用户现在所处页面的位置（当前位置）
状态：
- 选中状态 acctive 样式
- 禁用状态disable
二级菜单

5.1.1、标签式导航

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

5.1.2、胶囊式导航

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

5.2、分页导航

分页随处可见，分为页码导航和翻页导航

页码导航：ul标签上加pagination[pagination-lg | pagination-sm]

翻页导航：ul标签上加pager

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

5.3、下拉菜单

在使用Bootstrap框架的下拉菜单，必须使用两个js

<!--如果使用Bootstrap的js插件，必须先调入jQuery-->
<script scr="你的jquery路径"></script>
<!--包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
<script scr="bootstrap的路径"></script>

要点：

1.使用一个类名为dropdowm 或 btn-group的div包裹整个下拉框：
<div class="dropdown"></div>
2.默认向下dropdown，向上弹起加入.dropup即可
3.使用button作为负菜单，使用类名：dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4.在button中使用font制作下拉罐头
<span class="caret"></span>
5.下拉菜单项使用ul列表，并且定义一个类名为"dropdown-menu"
6.分组分割线：<li>添加类名"divider"来实现添加下拉分隔线的功能
7.分组标题：li添加类名"dropdown-header"来实现分组的功能
8.对齐方式：
    1）、dropdown-menu-left 左对齐 默认样式
    2）、dropdown-menu-right 右对齐
9.激活状态（.active）和禁用状态（.disable）
<!--使用一个类名为dropdown，默认向下dropdown，向上弹起加入.dropup即可--->

代码实例

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>
  </ul>
</div>

5.4、模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可以提供信息、交互

5.4.1、用法

通过data属性：在控制器元素（比如按钮或者连接）上设置属性data-toggle=“modal”,同时设置data-target=”#identifier“或者href=”#identifier“来指定要切换的特定的状态框（带有id=”identifier“）。
通过javaScript：使用这种技术，可以通过javaScript来调用带有id=”identifier“的模态框：

$("#identifier").modal(options);

5.4.2、实例

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <link rel="stylesheet" href="../../dist/css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info" data-toggle="modal" data-target="#myModal">按钮</button>
<button class="btn btn-warning" id="ming-id">按钮</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form action="#" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="username" class="control-label col-lg-2">姓名</label>
                        <div class="col-lg-5 ">
                            <input type="text" placeholder="请输入姓名" class="form-control" id="username"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd" class="control-label col-lg-2">密码</label>
                        <div class="col-lg-5">
                            <input type="password" id="pwd" class="form-control" placeholder="请输入密码">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-success" id="ming-btn">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../js/jquery-3.6.0.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script>
    $("#ming-id").click(function () {
        $("#myModal").modal('show');
    })
    $("#ming-btn").click(function () {
        $("#myModal").modal('hide');
    })
</script>
</html>