关于前端:前端框架Bootstrap

10次阅读

共计 13190 个字符，预计需要花费 33 分钟才能阅读完成。

简介 

Bootstrap 是一个用于疾速开发 Web 应用程序和网站的前端框架
是基于 HTML，CSS，JavaScript 的

为什么要应用 Bootstrap？1. 挪动设施优先：自 Bootstrap3 起，框架蕴含了贯通于整个库的挪动设施优先的款式
2. 浏览器反对：所有支流浏览器都反对
3. 容易上手
4. 响应式设计：其响应式 CSS 可能自适应于台式机，平板电脑和手机
5. 为开发人员创立接口提供了一个简洁对立的解决方案
6. 蕴含了功能强大的内置组件，易于定制
7. 提供了基于 web 的定制
8. 是开源的

Bootstrap 包的内容：根本构造：提供了一个带网格零碎，链接款式，背景的根本构造
CSS：全局的 CSS 设置，定义根本的 HTML 元素款式，可扩大的 class，以及一个先进的网格零碎
组件：蕴含了几十个重要的组件
JavaScript：蕴含了十几个自定义的 JQuery 插件
定制：可定制 Bootstrap 组件，less 变量和 JQuery 插件来失去你的版本

bootstrap3.0 文档：https://v3.bootcss.com/
bootstrap4.0 文档：https://v4.bootcss.com/

Bootstrap 的开发工具 

 任意前端开发工具即可
专门针对 Bootstrap 的开发工具：Jetstrap（https://jetstrap.com/）LayoutIt（https://www.bootcss.com/p/layoutit/）bootswatchr（http://bootswatchr.com/）

Bootstrap 的应用 

1. 下载压缩包：编译并压缩后的 CSS、JavaScript 和字体文件。不蕴含文档和源码文件
2. CDN 引入：（要先引入 jquery）<!-- 最新版本的 Bootstrap 外围 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（个别不必引入）-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 外围 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap3 和 Bootstrap4 的区别 

Bootstrap3：应用 less 语言编写
应用 float 的布局形式
应用 px 为单位
共有 4 种栅格类，顺次是特小 (col-xs-)、小 (col-sm-)、中 (col-md-)、大 (col-lg-)
应用 push 和 pull 向左和向右挪动 

Bootstrap4：应用 sass 语言编写
应用 flex 的布局形式
全副应用了 rem 和 em 为单位（除了局部的 margin 和 padding 应用 px）共有 5 种栅格类，顺次是特小 (col-)、小 (col-sm-)、中 (col-md-)、大 (col-lg-)、特大 (col-xl-)
偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。

Bootstrap— 全局款式 

 特点：代码整洁，格调对立，好看易用
根本的 HTML 元素均能够通过 class 设置款式并失去加强成果

一些全局类名和标签：对于题目：题目：h1-h6 / .h1-.h6
副标题：small

对于文本：对齐：.text-left / .text-center / .text-right
大小写：.text-lowercase / .text-uppercase / .text-capitalize（首字母大写）文本色彩：text-muted/primary/success/info/warning/...
...

对于表格：带边框：.table-bordered
条纹状：.table-striped
悬停变色：.table-hover
紧凑格调：.table-condensed
通过一些状态类能够为行或单元格设置色彩：.active：鼠标悬停在行或单元格上时所设置的色彩
.success：标识胜利或踊跃的动作
.info：标识一般的提示信息或动作
.warning：标识正告或须要用户留神
.danger：标识危险或潜在的带来负面影响的动作
...

对于表单：.form-control：表单元素被默认设置宽度属性为 width: 100%
.form-group：将 label 元素和后面提到的控件包裹在这个类中能够取得最好的排列
.form-inline：可使其内容左对齐并且体现为 inline-block 级别的控件（只实用于视口（viewport）至多在 768px 宽度时（视口宽度再小的话就会使表单折叠））按钮色彩：.btn-default / .btn-success / .btn-primary / .btn-info / .btn-warning / .btn-danger / .btn-link ...
按钮大小：.btn-lg / .btn-sm
...

对于图片：.img-responsive：让图片反对响应式布局（设置了 max-width:100%; height:auto; display:block 属性）.center-block：让设置了.img-responsive 类的图片程度居中
.img-rounded：设置圆角
.img-circle：设置为圆形
.img-thumbnail：设置带有边框的圆角图形
...

对于浮动：.pull-left：左浮动
.pull-right：右浮动
.clearfix：革除浮动（在父元素上加）对于显示和暗藏：.show：显示
.hidden：暗藏

Bootstrap—meta 标签中的 viewport

 属性：width，height，user-scalable（是否容许缩放），initial-scale（网页初始化时的大小），maxmum-scale（容许用户缩放到的最大比例），minimun-scale（容许用户缩放到的最小比例）

Bootstrap— 栅格零碎 

 随着屏幕或视口尺寸的减少，零碎会主动分为最多 12 列

栅格参数：bootstrap4 有 5 种栅格布局：

bootstrap3 有 4 种栅格布局：

.col-lg-x：在大屏中占的 x /12
.col-md-x：在中屏中占的 x /12
.col-lg-x：在小屏中占的 x /12
.col-xs-x：在超小屏中占的 x /12

栅格布局的容器：.container 和.container-fluid
.container 类用于固定宽度并反对响应式布局的容器，容器能够被嵌套，然而大多数布局并不需要这么做（起码档次的嵌套构建出的网页更优雅 - 译者注）.container-fluid 类，能够使 div 宽度扩大到整个宽度（如果没有被其它 CSS 容器蕴含，则应是浏览器运行时的宽度，否则应是父容器中容许的最大宽度，个别视为 100% 宽度）。主动布局列：等宽：<div class="container">
    <div class="row">
        <div class="col">col1</div>
        <div class="col">col2</div>
    </div>
</div>

等宽多行：（插入.w-100 要将列拆分为新行。.w100 仿佛与.clearfix 有时能够达到同样的网页成果）<div class="container">
    <div class="row">
        <div class="col">col</div>
        <div class="col">col</div>
        <div class="w-100"></div>
        <div class="col">col</div>
        <div class="col">col</div>
    </div>
</div>

设置一列宽度：<div class="container">
    <div class="row">
        <div class="col">
        </div>
        <div class="col-6">
        </div>
        <div class="col">
        </div>
    </div>
</div>

可变宽度内容：（应用 col-{breakpoint}-auto 类可依据其内容的天然宽度来调整列的大小）<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
        </div>
        <div class="col-md-auto">
        </div>
        <div class="col col-lg-2">
        </div>
    </div>
</div>

Bootstrap— 响应式设计 

 针对浏览设施优化页面中既有内容的一种办法
为了实用不同的屏幕宽度，应用 CSS 的媒体查问（media query）来检测浏览器视口的宽度
不同的屏幕应用不同的样式表，不同的设施应用不同的断点 


 设置断点依据状况失效对应的 css 属性：@media (only) screen(/print/speech/...) and (max-width:xxx) and (min-width:xxx){...}（only 是为了在不反对媒体查问的浏览器中暗藏样式表，浏览器解决以 only 结尾的关键词时将会疏忽 only）对不同设施的显示和暗藏：


Bootstrap— 字体图标 

 特点：体积小便于加载，无需反复设计，不便援用
对应的类指定对应的图标

Bootstrap— 组件怪异属性 

1. role：用于示意一个一般的标签，使之语义化，不便浏览器对其具体性能进行辨认
   如：<div role="button"></div>，也即是将 div 元素转换为 button 按钮性能进行应用
2. aria-label：设置的值能让读屏软件给读出来（当咱们没有给输入框设置 label 时，当其取得焦点时，屏幕阅读器会读出 aria-label 属性的值，aria-label 不会在视觉上出现成果。aria-label 只有加在可被 tab 到的元素上，读屏才会读出其中的内容）如：<input type="text" class="form-control" placeholder="xxxx" aria-label="xxx">
3. tabIndex：设置键盘的 tab 键在控件中进行挪动（焦点的挪动程序）4. data-：能够此为前缀来增加一些自定义的属性内容（用于存储页面或应用程序的公有自定义数据。不应该蕴含任何大写字母）...

Bootstrap— 组件下拉菜单 

.dropdown：管制组件为下拉
.dropdown-toggle：表明了这个是下拉列表
.dropdown-menu-right：右对齐（代替了.pull-right）divider：分割线 
下拉菜单的事件：data-toggle="dropdown/collpase"
...

Bootstrap— 组件控件组 

.input-group：示意控件组
.input-group-addon：可搁置额定内容及图标
...

Bootstrap— 组件按钮组 

.btn-group：示意按钮组（加上父元素上）.btn-default/success/...：设置按钮对应款式色彩
...

Bootstrap— 组件导航 

 以一个带有 class 为.nav 的无序列表开始
.nav-tabs 代表可切换的导航
.nav-pills 代表胶囊导航
.nav-justified 使导航垂直（两端对齐）...

Bootstrap— 组件分页 

.pagination：在父元素中增加示意分页
.pager：搁置在翻页区域
.previous：把链接向左对齐
.next：把链接向右对齐
...

Bootstrap— 组件进度条 

.progress：示意进度条外框
.progress-bar：进度条滑板挪动的局部
可通过一些状态类扭转进度条色彩
.progress-bar-striped：使进度条色彩突变
...

Bootstrap— 组件列表 

.list-group：列表组
.list-group-item：列表项
.list-group-item-heading：列表题目
.list-group-item-text：列表文本
.badge：状态数（徽章）...

Bootstrap— 组件面板 

.panel：面板外框
.panel-heading：面板头
.panel-body：面板内容
.panel-footer：面板的注脚
...

Bootstrap— 组件巨幕 

.jumbortron：示意巨幕（增加在父元素上）如果须要让巨幕组件的宽度与浏览器宽度统一并且没有圆角，请把此组件放在所有.container 元素的里面，并在组件外部增加一个.container 元素
<div class="jumbotron">
    <div class="container">
        ...
    </div>
</div>
...

Bootstrap— 组件媒体对象 

.media：示意一个媒体对象
.media-left：在一个内容块的左侧
.media-body：是媒体对象中的主体内容（经常是图片侧边的内容）.media-right：在一个内容块的右侧（常放在.media-body 的前面）.media-heading：媒体对象的题目
.media-object：媒体对象中的对象，经常是图片
...

Bootstrap— 组件 well

 把.well 用在元素上，就能有嵌入（inset）的简略成果
<div class="well well-lg">...</div>（大的成果）<div class="well well-sm">...</div>（小的成果）<div class="well">...</div>（失常成果）...

Bootstrap— 响应式的嵌入 

 类.embed-responsive-item 间接利用在 <iframe>、<embed>、<video> 和 <object> 元素上
<!-- 16:9 的屏幕宽高比 -->
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 的屏幕宽高比 -->
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Bootstrap— 组件旋转图标 

 圆形旋转：<div class='spinner-border'></div>
突变缩放：<div class='spinner-grow'></div>
地位：利用弹性布局：<div class="d-flex justify-content-center">  // 程度居中对齐
    <div class="spinner-border" role="status">
    </div>
</div>
<div class="d-flex justify-content-end">  // 右对齐
    <div class="spinner-border" role="status">
    </div>
</div>
<div class="d-flex justify-items-center">  // 垂直居中对齐
    <div class="spinner-border" role="status">
    </div>
</div>
利用浮动：<div class="clearfix">
    <div class="spinner-border float-right">  // 右浮动
    </div>
</div>
利用文本对齐：<div class="text-center">  // 居中对齐
    <div class="spinner-border>  
    </div>
</div>
<div class="text-right">  // 右对齐
    <div class="spinner-border>  
    </div>
</div>
大小：<div class="spinner-border/grow spinner-border-sm" role="status"> 
</div>
<div class="spinner-border" style="width: xxrem; height: xxrem;" role="status">  // 自定义大小
</div>
利用到按钮上：<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border/grow spinner-border-sm" role="status" aria-hidden="true"></span>
</button>

Bootstrap— 插件 

 插件依赖于 Bootstrap.js，基于 JQuery
通过 data 属性管制页面交互
$(document).off('.data-api') 解除属性绑定

Bootstrap— 插件模态框 

 模态框：（默认是暗藏的）<div class="modal>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">  // 头部内容
            </div>
            <div class="modal-body">   // 主体内容
            </div>
            <div class="modal-footer">  // 底部内容
            </div>
        </div>
    </div>
</div>

data 的参数：

 一些办法：

 一些事件：

 绑定插件：data-toggle='modal'
data-target='自定义的插件名（id，...）'

Bootstrap— 插件下拉菜单 

 下拉菜单：<div class="dropdown">
    <button id="dLabel" type="button" data-toggle="dropdown">  // 下拉菜单的按钮  
        <span class="caret"></span>   // 下箭头
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">   // 下拉菜单的子内容
        ...
    </ul>
</div>

一些办法：$().dropdown('toggle')
切换给定导航栏或选项卡式导航的下拉菜单。一些事件：

 绑定插件：data-toggle='dropdown'
data-target='自定义的插件名（id，...）'

Bootstrap— 插件滚动监听 

 滚动监听：<body data-spy="scroll" data-target="#navbar-example">
    ...
    <div id="navbar-example">
        <ul class="nav nav-tabs" role="tablist">
        ...
        </ul>
    </div>
    ...
</body>

一些办法：

 一些参数：

 一些事件：

 绑定插件：data-spy="scroll" 
data-target="#navbar-example"

Bootstrap— 插件标签页 

 标签页：<div>
    <!-- Nav tabs 导航栏 -->
    <ul class="nav nav-tabs/nav-pills" role="tablist">   
        <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab"/data-toggle="pill">...</a></li>
        ...    
    </ul>

    <!-- Tab panes 选项卡窗格 -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        ...
    </div>
</div>


让选项卡有淡入淡出的成果：

 一些办法：

 一些事件：

 绑定插件：data-toggle="tab"/data-toggle="pill"

Bootstrap— 插件工具提醒 

 工具提醒：<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="xxxx（提醒的信息）">Tooltip on left</button>  // 左部提醒
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>    // 顶部提醒
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>   // 底部提醒
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>   // 右部提醒

data 的参数：

 一些办法：

 一些事件：

 绑定插件：data-toggle="tooltip" 
data-placement="xxx（方向）"

Bootstrap— 插件弹出框 

 弹出框：<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left（弹出方向）" data-content="xxx（弹出框显示的内容）">   // 左侧弹出
    ...
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="xxx（弹出框显示的内容）">  // 顶部弹出
    ...
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="xxx（弹出框显示的内容）">   // 底部弹出
    ...
</button>
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="xxx（弹出框显示的内容）">   // 右侧弹出
    ...
</button>

点击弹出框并让其隐没：通过应用 focus 触发器能够在用户点击弹出框是让其隐没
在标签（必须是 a 标签，不能是 button 标签）中增加：data-trigger="focus"，还必须蕴含 role="button" 和 tabindex 属性

data 参数：

 一些办法：

 一些事件：

 绑定插件：data-toggle="popover" 
data-placement="弹出方向" 
data-content="弹出框显示的内容"

Bootstrap— 插件正告框 

 正告框：<div class='alert alert-danger'> 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">   // 敞开按钮
        <span aria-hidden="true">&times;</span>
    </button>
    内容...
</div>
为敞开按钮增加 data-dismiss="alert" 属性就能够使其主动为正告框赋予敞开性能

一些办法：

 一些事件：

Bootstrap— 插件按钮 

 状态按钮
通过增加 data-loading-text="Loading..." 能够为按钮设置正在加载的状态（从 v3.3.5 版本开始，此个性不再倡议应用，并且曾经在 v4 版本中删除了）<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
    Loading state
</button>
<script>
$('#myButton').on('click', function () {var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
})
</script>

单选按钮：<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
    Single toggle
</button>

复选按钮：<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" autocomplete="off" checked> Checkbox 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" autocomplete="off"> Checkbox 3
    </label>
</div>

对于预切换的按钮，必须将.active 类和 aria-pressed="true" 属性增加到您 button 本人

一些办法：

Bootstrap— 插件折叠 

 能够应用带有 href 属性的链接，或带有 data-target 属性的按钮
在这两种状况下，data-toggle="collapse" 都是必须的
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
</button>
<div class="collapse" id="collapseExample">   // 折叠局部
    <div class="well">
        ...
    </div>
</div>

折叠过程中折叠局部的类的过渡状态：（从暗藏到显示）.collapse：暗藏内容
.collapsing：在过渡期间利用
.collapse.in：显示内容

data 参数：

 一些办法：

 一些事件：


Bootstrap— 插件轮播 

<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='...'>
            <div class="carousel-caption">  // 类 carousel-caption 为幻灯片增加字幕
                ...
            </div>
        </div>
        <div class="item">
            <img src='...'>
            <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>
  
data 参数：


 一些办法：

 一些事件：


Bootstrap— 插件附加导航 

<div class="container">
      <div id="myAffix">
        <ul class="nav nav-pills nav-stacked" data-spy='affix'>
          <li class='active'><a href="#"> 第一 </a></li>
          <li><a href="#"> 第二 </a></li>
          <li><a href="#"> 第三 </a></li>
          <li><a href="#"> 第四 </a></li>
        </ul>
    </div>
</div>

设置附加导航间隔顶部的间隔：data-offset-top="xxx" 
设置附加导航间隔底部的间隔：data-offset-bottom="xxx"

data 参数：


 一些办法：

 一些事件：

正文完
前端
发表至： 前端
2021-03-13
 0
关于前端:浅谈浏览器的渲染过程重绘与回流
关于前端:详细解说一次性低代码和持续化低代码的关键区别在哪里
关于前端:前端开发从入门到进阶完全指南不用再迷茫前端要怎么学啦
关于前端:2023年流行的-WordPress-SEO-插件Yoast-SEO