Bootstrap学习

v3版本

下载bootstrap源码，将dist目录拷贝到项目文件中，重新命名。

创建模板页面代码

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

布局容器和栅格网格系统

布局容器

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

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

效果如下：image-20220912143815302

.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

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

效果如下：

image-20220912143856665

栅格网格系统

Bootstrap提供一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

网格系统的原理非常简单，仅仅是通过定义容器大小，评分12份（或24份或32份），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

image-20220912145336194

container、row、xs(xsmall phones)、sm（small tablets）、md(middle desktops)、lg(larger desktops)

<div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: #5cb85c">4列</div>
        <div class="col-md-8" style="background-color: #999999">8列</div>
    </div>
</div>

注意：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
列偏移

添加类属性col-md-offset-1数字为偏移的格子数。

列排序

列排序就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*向前是pull，向后是push。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-10" style="background-color: #5cb85c">4列</div>
        <div class="col-md-8 col-md-pull-1" style="background-color: #999999">8列</div>
    </div>
</div>
列嵌套

常用样式

排版
标题

bootstrap和普通HTML页面一样，定义标题都是使用

到

，只不过bootstrap覆盖了其默认的样式，使用其在浏览器下显示的效果一样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1-.h6的六个类名。同时后面可以紧跟着一行小的副标题或使用.small

<div class="container">
    <h1>这是一个一级标题<small>这是一个副标题</small></h1>
    <div class="h1">这是一个一级标题<span class="small">这是一个副标题</span></div>
</div>

效果保持一致

段落

通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）。可以使用以下标签给文本做突出样式处理：

:小号字

:加粗

:斜体

<div class="col-md-12">
    <p class="lead"><small>这是一个</small><b>测</b><i>试</i>段落<em>的</em><strong>句子</strong></p>
</div>
强调

通过颜色来表示强调

.text-muted 提示，使用浅灰色（#999）

.text-primary 主要，使用蓝色（#428bca）

.text-success 成功，使用浅绿色（#3c763d）

.text-info 通知信息，使用浅蓝色（#31708f）

.text-warning 警告，使用黄色（#8a6d3b）

.text-danger 危险，使用褐色（#a94442）

<div class="col-md-12">
    <div class="text-muted">提示效果</div>
    <div class="text-primary">主要效果</div>
    <div class="text-success">成功效果</div>
    <div class="text-info">信息效果</div>
    <div class="text-warning">警告效果</div>
    <div class="text-danger">危险效果</div>
</div>
对齐效果

为了简化操作，bootstrap通过定义四个类名来控制文本的对齐风格：.text-left左对齐、.text-center居中对齐、.text-right右对齐、.text-justify两端对齐

列表
去点列表

class="list-unstyled"

<!--去点列表-->
          <ul class="list-unstyled">
              <li>无序列表1</li>
              <li>无序列表2</li>
          </ul>
内联列表

class="list-inline"

  <!--内联列表-->
<ul class="list-inline">
    <li>首页</li>
    <li>多选</li>
    <li>次选</li>
</ul>
定义列表
为标题
为内容 
<!--定义列表-->
<dl class="dl-horizontal">
    <dt>这是一个标题啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</dt>
    <dd>这是一个内容</dd>
    <dd>如果标题超过了160px的宽度的话，则会自动加3个点进行省略。</dd>
</dl>
代码

bootstrap提供了三种代码风格：

  1. 使用来显示单行内联代码

  2. 使用

    来显示多行块代码
    

    样式：pre-scrollable（height,max-height高度固定，为340px，超过存在滚动条）
    

    3.使用来显示用户输入代码，如快捷键。
    

    3. 



表格
bootstrap为表格提供了1种基础样式和4种附加样式以及一个支持响应式的表格。在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。


基础样式
.table 基础表格


附加样式
.table-striped 斑马线表格


.table-bordered 带边框的表格


.table-hover 鼠标悬停高亮的表格


.table-conensed 紧凑型表格，单元格没内距或者内距较其他表格的内距小。


tr、th、td样式
提供了五种不同的类名，每中类名控制了行的不同背景颜色


.active 将悬停的颜色应用在行或者单元格上


.sucess 表示成功的操作


.info 表示信息变化的操作


.warning 表示一个警告的操作


.danger 表示一个危险的操作


<!--表格-->
<div class="col-md-12">
    <table class="table table-bordered table-hover">
        <tr class="active">
            <th>JavaSE</th>
            <th>数据库</th>
        </tr>
        <tr class="danger">
            <td>面向对象</td>
            <td>oracle</td>
        </tr>
        <tr class="success">
            <td>数组</td>
            <td>mysql</td>
        </tr>
    </table>
</div>