Bootstrap-前端框架

Uncategorized

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
。。。。。。。。。。。。。
Bootstrap4 与 Bootstrap3
Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。
http:/ /www.iis7.com/b/wzjk/
同时 Bootstrap.min.css 的体积减少了40%以上。
。。。。。。。。。。。。
创建第一个 Bootstrap 4 页面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。
HTML5 doctype 在文档头部声明，并设置对应编码
。。。。。。。
移动设备优先
为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。
如右所示：
width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。
。。。。。。。。。。
Bootstrap 4 CDN
国内推荐使用 BootCDN 上的库：
Bootstrap4 CDN

：

：

：

：
。。。。。。
容器类
Bootstrap 4 需要一个容器元素来包裹网站的内容。
我们可以使用以下两个容器类：
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数，Bootstrap 4 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
。。。。。。。
网格类
Bootstrap 4 网格系统有以下 5 个类:
.col- 针对所有设备
.col-sm- 平板 – 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 – 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 – 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 – 屏幕宽度等于或大于 1200px)
。。。。。。。。
网格系统规则
Bootstrap4 网格系统规则：
网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
使用行来创建水平的列组。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
网格列是通过跨越指定的 12 个可用列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。
Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap4 文字排版
Bootstrap 4 默认设置
Bootstrap 4 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 “Helvetica Neue”, Helvetica, Arial, sans-serif。
此外，所有的

元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
。。。。。。。。。。

–

Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。

(2.5rem = 40px)

(2rem = 32px)

(1.75rem = 28px)

(1.5rem = 24px)

(1.25rem = 20px)
(1rem = 16px)

。。。。。。。。。。。
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
。。。。。。。。。。

在 Bootstrap 4 中 HTML 元素用于创建字号更小的颜色更浅的文本
。。。。。。。。。。

Bootstrap 4 定义 为黄色背景及有一定的内边距。
。。。。。。。。。。

Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框
。。。。。。。。。。


对于引用的内容可以在

上添加 .blockquote 类

。。。。。。。。。。


Bootstrap 4 定义 HTML
元素

。。。。。。。。。。



Bootstrap 4 定义 HTML 元素，使字体变粉色。
。。。。。。。。。。

Bootstrap 4 定义 HTML 元素，使字体背景色变黑。
。。。。。。。。。。 
 

Bootstrap 4 定义 HTML 
 元素 

。。。。。。。。。。 

更多排版类：在class中加 

.font-weight-bold，加粗文本 

.font-weight-normal，普通文本 

.font-weight-light，更细的文本 

.font-italic，斜体文本 

.lead，让段落更突出 

.small，指定更小文本 (为父元素的 85% ) 

.text-left，左对齐 

.text-center，居中  

.text-right，右对齐  

.text-justify，设定文本对齐,段落中超出屏幕部分文字自动换行 

.text-nowrap    ，段落中超出屏幕部分不换行 

.text-lowercase，设定文本小写 

.text-uppercase，设定文本大写 

.text-capitalize，设定单词首字母大写 

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

.list-unstyled， 移除默认的列表样式，列表项中左对齐 (
    和
    中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
    .list-inline，将所有列表项放置同一行
    .pre-scrollable，使 
     元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条 
    
:::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
    
Bootstrap4 颜色 
    
Bootstrap 4 提供的有意义的文字颜色有：.text-muted， .text-primary， .text-success， .text-info， .text-warning,， .text-danger， .text-secondary， .text-white，.text-dark，.text-light 
    
Bootstrap 4 提供的背景颜色有：.bg-primary， .bg-success， .bg-info， .bg-warning， .bg-danger， .bg-secondary， .bg-dark， .bg-light 
    
::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
    
Bootstrap4 表格 
    
。。。。。。。。。。。 
    
Bootstrap4 基础表格 
    
Bootstrap4 通过 .table 类来设置基础表格的样式 
    
，是表头，默认加粗字体 
    
，是表格列 
    
，是表格单元格 
    
。。。。。。。。。。。 
    
条纹表格 
    
通过添加 .table-striped 类，您将在  内的行上看到条纹 
    
。。。。。。。。。。。 
    
带边框表格 
    
.table-bordered 类可以为表格添加边框 
    
。。。。。。。。。。。 
    
鼠标悬停状态表格 
    
.table-hover 类可以为表格的每一行添加鼠标悬停效果（默认灰色背景） 
    
。。。。。。。。。。。 
    
黑色背景表格 
    
.table-dark 类可以为表格添加黑色背景 
    
。。。。。。。。。。。 
    
黑色条纹表格 
    
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格 
    
。。。。。。。。。。。 
    
鼠标悬停效果 - 黑色背景表格 
    
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果 
    
。。。。。。。。。。。 
    
指定意义的颜色类： 
    
.table-primary，蓝色: 指定这是一个重要的操作 
    
.table-success，绿色: 指定这是一个允许执行的操作 
    
.table-danger，红色: 指定这是可以危险的操作 
    
.table-info，浅蓝色: 表示内容已变更 
    
.table-warning，橘色: 表示需要注意的操作 
    
.table-active，灰色: 用于鼠标悬停效果 
    
.table-secondary，灰色: 表示内容不怎么重要 
    
.table-light，浅灰色，可以是表格行的背景 
    
.table-dark，深灰色，可以是表格行的背景 
    
。。。。。。。。。。。 
    
表头颜色 
    
在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景。 
    
在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。 
    
。。。。。。。。。。。 
    
响应式表格 
    
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条） 
    
你可以通过以下类设定在指定屏幕宽度下显示滚动条： 
    
类名                               屏幕宽度 
    
.table-responsive-sm    < 576px 
    
.table-responsive-md    < 768px 
    
.table-responsive-lg        < 992px 
    
.table-responsive-xl        < 1200px 
    
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
    
Bootstrap4 图像形状 
    
。。。。。。。。。。。 
    
圆角图片 
    
.rounded 类可以让图片显示圆角效果 
    
。。。。。。。。。。。 
    
椭圆图片 
    
.rounded-circle 类可以设置椭圆形图片 
    
。。。。。。。。。。。 
    
缩略图 
    
.img-thumbnail 类用于设置图片缩略图(图片有边框) 
    
。。。。。。。。。。。 
    
图片对齐方式 
    
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐 
    
。。。。。。。。。。。 
    
响应式图片 
    
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。 
    
我们可以通过在  标签中添加 .img-fluid 类来设置响应式图片。 
    
.img-fluid 类设置了 max-width: 100% ，height: auto 
    
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
    
Bootstrap4 Jumbotron(超大屏幕) 
    
Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息，Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。 
    
以通过在 
            
    
              元素 中添加 .jumbotron 类来创建 jumbotron 
             
    
。。。。。。。。。。。 
             
    
全屏幕的 Jumbotron 
             
    
如果你想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现 
             
    
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
             
    
Bootstrap4 信息提示框 
             
    
Bootstrap 4 可以很容易实现信息提示框。 
             
    
提示框可以使用 .alert 类, 后面加上 .alert-success， .alert-info， .alert-warning， .alert-danger， .alert-primary， .alert-secondary， .alert-light 或 .alert-dark 类来实现 
             
    
。。。。。。。。。。 
             
    
提示框添加链接 
             
    
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接 
             
    
。。。。。。。。。。 
             
    
关闭提示框 
             
    
我们可以在提示框中的 div 中添加 .alert-dismissable 类，然后在关闭按钮的链接上添加 class=”close” 和 data-dismiss=”alert” 类来设置提示框的关闭操作。 
             
    
提示: × (×) 是 HTML 实体字符，来表示关闭操作，而不是字母 “x” 
             
    
。。。。。。。。。 
             
    
提示框动画 
             
    
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果 
             
    
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
             
    
Bootstrap4 按钮(btn) 
             
    
Bootstrap 4 提供了不同样式的按钮，按钮类可用于 
             , , 或 元素上 
     。。。。。。。。。 
     按钮设置边框，btn-outline 
     。。。。。。。。。 
     块级按钮 
     通过添加 .btn-block 类可以设置块级按钮 
     。。。。。。。。。 
     激活和禁用的按钮 
     按钮可设置为激活或者禁止点击的状态。 
     .active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意     
              元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。 
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
     Bootstrap4 按钮组 
     Bootstrap 4 中允许我们将按钮放在同一行上。 
     可以在     
             
    
               元素上添加 .btn-group 类来创建按钮组，我们可以使用 .btn-group-lg|sm|xs 类来设置按钮组的大小。 
              
     。。。。。。。。。 
              
     垂直按钮组 
              
     可以使用 .btn-group-vertical 类来创建垂直的按钮组： 
              
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
              
     Bootstrap4 徽章（Badges） 
              
     徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 
               元素上即可。 徽章可以根据父元素的大小的变化而变化 
     徽章（Badges），可以嵌入元素内 
     。。。。。。。。。 
     药丸形状徽章 
     使用 .badge-pill 类来设置药丸形状徽章: 
     ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
     Bootstrap4 进度条 
     进度条可以显示用户任务的完成过程。 
     创建一个基本的进度条的步骤如下： 
     添加一个带有 .progress 类的     
              
    
               。 
               
     接着，在上面的 
               
    
                 内，添加一个带有 class .progress-bar 的空的 
                
    
                 。 
                 
     添加一个带有百分比表示的宽度的 style 属性，例如 style=”width:70%” 表示进度条在 70% 的位置。默认颜色蓝色 
                 
     进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改它 
                 
     。。。。。。。。。 
                 
     条纹的进度条 
                 
     可以使用 .progress-bar-striped 类来设置条纹进度条 
                 
     。。。。。。。。。 
                 
     动画进度条 
                 
     使用 .progress-bar-animated 类可以为进度条添加动画 
                 
     。。。。 
                 
     进度条可以设置多种颜色 
                 
     :::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 
                 
     Bootstrap4 分页 
                 
     网页开发过程，如果碰到内容过多，一般都会做分页处理。 
                 
     Bootstrap 4 可以很简单的实现分页效果。 
                 
     要创建一个基本的分页可以在