学习Bootstrap（1）——安装、排版、表格

本文链接：https://blog.youkuaiyun.com/lb569484787/article/details/102532872

Bootstrap是一个框架。

一、Bootstrap安装

官网可以安装但是太慢了。这里可以下载http://down.chinaz.com/soft/38979.htm

然后再代码里要加入这个呀：

<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
 </html>

二、Bootstrap CSS

1.Bootstrap 网格系统（Grid System）

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

工作原理

（1）行放在.container class内，用行创建水平组。
（2）内容放在列内，通过内边距创建列与列之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
（3）预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
（4）网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：
在这里插入图片描述

基本的网格结构

下面是 Bootstrap 网格的基本结构：.col-xs-* 类

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

响应式列重叠： .clearfix
列偏移： .col-md-offset-*
嵌套列：添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。
列排序： .col-md-push-*（向后）和 .col-md-pull-*（向前）类的内置网格列的顺序，其中 * 范围是从 1 到 11。

2.Bootstrap排版

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

（1）标题
有h1 到 h6的样式。

内联子标题：在元素两旁添加 ，或者添加 .small class

<h1>我是标题1 h1. <p class="small">我是副标题1 h1</p> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>

（2）引导主体副本
添加强调文本——添加 class="lead"，这将得到更大更粗、行高更高的文本。

（3）强调
HTML 的默认强调标签：
（设置文本为父文本大小的 85%）
（设置文本为更粗的文本）
（设置文本为斜体）

bootstrap提供的一些用于强调文本的类：

<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>
<p class="text-primary">本行内容带有一个 primary class</p>
<p class="text-success">本行内容带有一个 success class</p>
<p class="text-info">本行内容带有一个 info class</p>
<p class="text-warning">本行内容带有一个 warning class</p>
<p class="text-danger">本行内容带有一个 danger class</p>

结果：
在这里插入图片描述

（4）缩写
bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。

.initialism：显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母。

（5）地址
使用<address> 标签，您可以在网页上显示联系信息。
由于 <address> 默认为 display:block;，要使用   标签来为封闭的地址文本添加换行。

（6）引用
使用<blockquote>。其他选项包括，添加一个  标签来标识引用的来源，使用 class .pull-right 向右对齐引用。

（7）列表

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">  #list-unstyled移除样式，列表项中左对齐 
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">#list-inline将所有列表项放置同一行
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal"> #dl-horizontal设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

（8）其他类
.lead：使段落突出显示；
.text-justify：设定文本对齐,段落中超出屏幕部分文字自动换行；
.text-nowrap：段落中超出屏幕部分不换行；
.text-lowercase：设定文本小写；
.text-uppercase：设定文本大写；
.text-capitalize：设定单词首字母大写；
.blockquote-reverse：设定引用右对齐；
.pre-scrollable：使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

3.Bootstrap代码

<code> 标签：内联显示代码。
<pre> 标签：代码需要被显示为一个独立的块元素或者代码有多行。

开始和结束标签使用 unicode 变体： < 和 >。

<var> ：变量赋值，如： x = ab + y；
<kbd> ：按键提示，如： CTRL + P；
<pre class="pre-scrollable"> ：多行代码带有滚动条；
<samp> ：电脑程序输出。

4.Bootstrap表格

标签	描述
`<table>`	为表格添加基础样式。
`<thead>`	表格标题行的容器元素（`<tr>`），用来标识表格列。
`<tbody>`	表格主体中的表格行的容器元素（`<tr>`）。
`<tr>`	一组出现在单行上的表格单元格的容器元素（`<td>` 或 `<th>`）。
`<td>`	默认的表格单元格。
`<th>`	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 `<thead>` 内使用。
`<caption>`	关于表格存储内容的描述或总结。

表格table类：

类	描述
.table	为任意 `<table>` 添加基本样式 (只有横向分隔线)
.table-striped	在 `<tbody>` 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 `<tbody>` 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

条纹表格
.table-striped： <tbody> 内的行上可以看到条纹。

边框表格
.table-bordered ：每个元素周围都有边框，且占整个表格是圆角的。

悬停表格
.table-hover ：当指针悬停在行上时会出现浅灰色背景。

精简表格
.table-condensed ：行内边距（padding）被切为两半，以便让表看起来更紧凑。

响应式表格
通过把任意的 .table 包在 .table-responsive class 内，可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，将看不到任何的差别。

<div class="table-responsive">
  <table class="table">
……
</table>
</div>

`<tr>`, `<th>` 和 `<td>` 类:

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