Python前端编程-Bootstrap介绍

2019年3月29日13:12:06 发表评论 716 views

第1章 Bootstrap介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架，它是为实现快速开发Web应用程序而设计的一套前端工具包，支持响应式布局，并且在V3版本之后坚持移动设备优先。

1.1 Bootstrap下载

1.2 Bootstrap环境搭建

1.2.1 目录结构

bootstrap-3.3.7-dist
├── css                                          // CSS文件
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css                        // 核心CSS样式压缩文件
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css                      // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css                  // 主题相关样式压缩文件
│   └── bootstrap-theme.min.css.map
├── fonts                                        // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js                                           // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js                         // 核心JS压缩文件
    └── npm.js

1.2.2 处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以需下载对应版本的jQuery文件来保证Bootstrap相关组件运行正常。

第2章 Bootstrap全局样式

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式，我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

2.1 格栅系统

2.1.1 什么是格栅系统

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

2.1.2 格栅系统特点

  • “行（row）”必须包含在.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 每一行（row）均分成12列（col-xx-**），每列必须放在row中。
  • 只有列能作为行的直接子元素（列和行搭配着用）
  • 每一个标签可以自定义占的列数（col-xx-**）。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

2.1.3 格栅参数

超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列
.container 最大宽度 None（自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12

【示例】：

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

【效果】：

Python前端编程-Bootstrap介绍

2.1.4 列偏移

.col-md-offset-*    // 将列向右侧偏移*列，如.col-md-offset-4类将.col-md-4元素向右偏移4列的宽度

【示例】：
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

【效果】：

Python前端编程-Bootstrap介绍

2.1.5 列排序

.col-md-push-*      // 将列放到右侧
.col-md-pull-*      // 将列放到左侧

【示例】：
<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

【效果】：

Python前端编程-Bootstrap介绍

更多：https://v3.bootcss.com/css/#grid

2.2 排版

2.2.1 标题相关

2.2.1.1 标题

<!--使用h标签-->
<h1>一级标题36px</h1>
<h2>二级标题30px</h2>
<h3>三级标题24px</h3>
<h4>四级标题18px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
除了使用h标签，Bootstrap内置了相应的全局样式：
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题30px</span>
<span class="h3">三级标题24px</span>
<span class="h4">四级标题18px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>

2.2.1.2 副标题

在标题内可以包含 <small> 标签或赋予 .small 类的元素用来标记副标题（小号文本）：

<h1>一级标题<small>小标题</small></h1>
<h1>一级标题<span class="small">小标题</span></h1>

2.2.2 页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

2.2.2.1 中心内容

.lead类             // 让段落突出显示

2.2.2.2 内联文本元素

<mark>              // 高亮文本
<del> / <s>         // 删除文本，<span style="text-decoration: line-through;">文本中间有一条横线</span>
<ins> / <u>         // 插入文本，<u>文本下面有一条横线</u>
<strong>            // 着重，<strong>加粗文本</strong>
<em>                // 强调，<em>斜体</em>

Tips：可以使用 <b> 和 <i> 标签，<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

2.2.2.3 文本对齐

text-left       // 左对齐
text-right      // 右对齐
text-center     // 居中对齐

【示例】：
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

【效果】：

Python前端编程-Bootstrap介绍

2.2.2.4 文本大小写

text-lowercase      // 全部变小写
text-uppercase      // 全部变大写
text-capitalize     // 首字母大写

【示例】：
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

【效果】：

Python前端编程-Bootstrap介绍

2.2.3 缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容。

2.2.3.1 基本缩略语

【示例】：

<abbr title="attribute">attr</abbr>

【效果】：

Python前端编程-Bootstrap介绍

2.2.3.2 首字母缩略语

【示例】：缩略语后面的字会稍微小一点

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

【效果】：

Python前端编程-Bootstrap介绍

2.2.4 地址

在每行结尾添加 <br> 可以保留需要的样式。

【示例】：

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

【效果】：

Python前端编程-Bootstrap介绍

2.2.5 引用

2.2.5.1 默认样式的引用

【示例】：

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

【效果】：

Python前端编程-Bootstrap介绍

2.2.5.2 带命名来源的引用

添加 <footer> 用于标明引用来源，来源的名称可以包裹进 <cite>标签中，通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。

【示例】：

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

【效果】：

Python前端编程-Bootstrap介绍

【示例】：

<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

【效果】：

Python前端编程-Bootstrap介绍

2.2.6 列表

2.2.6.1 内联列表

【示例】：

<ul class="list-inline">
  <li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/css/#type-lists

2.2.7 描述

【示例】：普通描述

<dl>
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

【效果】：

Python前端编程-Bootstrap介绍

【示例】：水平描述

<dl class="dl-horizontal">
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>

【效果】：

Python前端编程-Bootstrap介绍

2.3 代码

<code>              //内联代码
<kbd>               // 用户输入
<pre>               // 代码块
<var>               // 变量
<samp>              // 程序输出

2.3.1 内联代码

【示例】：

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

【效果】：

Python前端编程-Bootstrap介绍

2.3.2 用户输入

【示例】：

To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

【效果】：

Python前端编程-Bootstrap介绍

2.3.3 代码块

【示例】：

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

【效果】：

Python前端编程-Bootstrap介绍

2.3.4 变量

【示例】：

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/css/#code

2.4 表格

Class 描述
.table-striped 条纹状表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停变色的表格
.table-condensed 紧缩型表格
.table-responsive 响应式表格

2.4.1 条纹表格

【示例】：

<table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

【效果】：

Python前端编程-Bootstrap介绍

2.4.2 带边框表格

【示例】：

<table class="table table-bordered">
  ...
</table>

【效果】：

Python前端编程-Bootstrap介绍

2.4.3 鼠标悬停变色表格

【示例】：

<table class="table table-hover">
  ...
</table>

【效果】：

Python前端编程-Bootstrap介绍

2.4.4 紧缩表格

【示例】：

<table class="table table-condensed">
  ...
</table>

【效果】：

Python前端编程-Bootstrap介绍

2.4.5 响应式表格

【示例】：

<div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>

【效果】：宽度变小后出现控制条

Python前端编程-Bootstrap介绍

2.4.6 状态类

Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

【示例】：

<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Column heading</th>
          <th>Column heading</th>
          <th>Column heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="active">
          <th scope="row">2</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="success">
          <th scope="row">3</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="info">
          <th scope="row">4</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="warning">
          <th scope="row">5</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="danger">
          <th scope="row">6</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
    </table>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/css/#tables

2.5 表单

单独的表单控件会被自动赋予一些全局样式，所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%，将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

2.5.1 内联表单

【示例】：

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

【效果】：

Python前端编程-Bootstrap介绍

Tips：注意事项：

1. 只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。

2. 不要将表单组直接和输入框组混合使用，建议将输入框组嵌套到表单组中使用。

3. 一定要添加 label 标签。

2.5.2 水平表单

【示例】：

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

【效果】：

Python前端编程-Bootstrap介绍

2.5.3 带图标的表单

【示例】：

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/css/#forms

2.6 按钮

2.6.1 标签元素按钮

【示例】：

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

【效果】：

Python前端编程-Bootstrap介绍

2.6.2 预定义样式

【示例】：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

【效果】：

Python前端编程-Bootstrap介绍

2.6.3 按钮尺寸

【示例】：

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

【效果】：

Python前端编程-Bootstrap介绍

2.6.4 状态类

Class 描述
active 激活状态
disabled 禁用状态

参考：https://v3.bootcss.com/css/#buttons

2.7 图片

2.7.1 响应式图片

<img src="..." class="img-responsive" alt="Responsive image">

2.7.2 图片形状

img-rounded     // 圆角矩形
img-circle      // 圆形
img-thumbnail   // 矩形

【示例】：
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

【效果】：

Python前端编程-Bootstrap介绍

2.8 辅助类

2.8.1 文本颜色

【示例】：

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

【效果】：

Python前端编程-Bootstrap介绍

2.8.2 背景颜色

【示例】：

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

【效果】：

Python前端编程-Bootstrap介绍

2.8.3 关闭按钮

【示例】：

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

【效果】：

Python前端编程-Bootstrap介绍

2.8.4 下拉三角

【示例】：

<span class="caret"></span>

【效果】：

Python前端编程-Bootstrap介绍

2.8.5 快速浮动

通过添加一个类，可以将任意元素向左或向右浮动，!important 被用来明确 CSS 样式的优先级。

【示例】：

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

2.8.6 内容块居中

【示例】：

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

2.8.7 清除浮动

【示例】：

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

2.8.8 显示与隐藏

【示例】：

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

参考：https://v3.bootcss.com/css/#helper-classes

第3章 常用Bootstrap组件

3.1 字体图标

【示例】：

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#glyphicons-glyphs

3.2 下拉菜单

【示例】：

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

【效果】：

Python前端编程-Bootstrap介绍

Tips：使用上拉菜单必须要jQurey配合，否则不生效。

参考：https://v3.bootcss.com/components/#dropdowns

3.3 按钮组

【示例】：

<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Default button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#btn-groups

3.4 按钮式下拉菜单

【示例】：

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <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>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#btn-dropdowns

3.5 输入框组

【示例】：

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#input-groups

3.6 导航

【示例】：

<ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#">Home</a></li>
      <li role="presentation"><a href="#">Help</a></li>
      <li role="presentation" class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
          Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <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>
      </li>
</ul>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#nav

3.7 导航条

【示例】：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#navbar

3.8 分页

【示例】：

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

【效果】：

Python前端编程-Bootstrap介绍

【示例】：

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#pagination

3.9 标签

【示例】：

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#labels

3.10 徽章

【示例】：

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

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#badges

3.11 巨幕

【示例】：

<div class="jumbotron">
      <h1>Hello, world!</h1>
      <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#jumbotron

3.12 页头

页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。

【示例】：

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

【效果】：

Python前端编程-Bootstrap介绍

3.13 缩略图

【示例】：

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#thumbnails

3.14 警告框

【示例】：

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#alerts

3.15 进度条

【示例】：

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

【效果】：

Python前端编程-Bootstrap介绍

参考：https://v3.bootcss.com/components/#progress

【示例】：模拟滚动的进度条

 

3.16 其他

参考：https://v3.bootcss.com/components/#media

第4章 响应式开发

4.1 响应式开发原因

随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

4.2 响应式作用

利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

4.3 涉及的技术

4.3.1 [email protected]查询

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

4.3.1.1 常见属性

  • device-width, device-height：屏幕宽、高
  • width,height：渲染窗口宽、高
  • orientation：设备方向
  • resolution：设备分辨率

4.3.1.2 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

不同的媒体使用不同的stylesheet：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

4.3.2 viewport

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

4.3.2.1 设置viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

  • width：控制 viewport 的大小，可以指定的一个值，如600或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale：允许用户缩放到的最大比例。
  • minimum-scale：允许用户缩放到的最小比例。
  • user-scalable：用户是否可以手动缩放。

4.3.3 Bootstrap的栅格系统

  • container
  • row
  • column

Tips：使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

第5章 JavaScript插件

5.1 模态框

5.1.1 模态框的HTML代码放置的位置

务必将模态框的HTML代码放在文档的最高层级内（也就是说尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

5.1.2 HTML代码

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<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">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

5.1.2.1 注意事项

  • 通过为模态框设置.bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
  • 通过.fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
  • 通过在.modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

5.1.3 调用方式

5.1.3.1 通过data属性

通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性用来指向被控制的模态框。

<button type="button" data-toggle="modal" data-target="#myModal">显示模态框</button>

5.1.3.2 通过JS代码调用

$('#myModal').modal("show");  // 显示
$('#myModal').modal("hide")   // 隐藏

5.1.4 常用参数

名称 可选值 默认值 描述
backdrop true/false/'static' true false表示有没有遮罩层，'static'表示点击遮罩层不关闭模态框
keyboard true/false true 键盘上的 esc 键被按下时关闭模态框。
show true/false true 模态框初始化之后就立即显示出来。

5.1.4.1 方法

$('#myModal').modal({
  keyboard: false
})

5.2 轮播图

5.2.1 HTML代码

<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="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <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>
可以在为图片添加介绍信息：
<div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

5.2.1.1 方法

设置切换间隔为2秒，默认是5秒：

$('.carousel').carousel({
  interval: 2000
})

5.3 FontAwesome字体

详细用法参见Font Awesome

5.4 SweetAlert系列

详细用法参见：

SweetAlert

SweetAlert2

SweetAlert 到 SweetAlert2 升级指南

5.4.1 基本使用

swal("标题","内容","success);

使用SweetAlert在Ajax提交成功（done）或失败（error）时分别提示不用的内容。

【示例】：更新之前

function deleteRecord(recordID) {
    swal({
        title: "确定要删除这个产品吗？",
        text: "删除后可就无法恢复了。",
        type: "warning",
        showCancelButton: true,
        closeOnConfirm: false,
        confirmButtonText: "是的，我要删除！",
        confirmButtonColor: "#ec6c62",
        cancelButtonText: "容我三思"
    }, function (isConfirm) {
        if (!isConfirm) return;
        $.ajax({
            type: "post",
            url: "/delete/",
            data: {"id": recordID},
            success: function (data) {
                var dataObj = $.parseJSON(data);
                if (dataObj.status === 0) { //后端删除成功
                    swal("删除成功", dataObj.info, "success");
                    $("#p-" + recordID).remove()  //删除页面中那一行数据
                } else {
                    swal("出错啦。。。", dataObj.msg, "error");  //后端删除失败
                }
            },
            error: function () {  // ajax请求失败
                swal("啊哦。。。", "服务器走丢了。。。", "error");
            }
        })
    });
}

【示例】：更新之后
swal({
  title: "这里写标题",
  text: "这里放内容",
  icon: "warning",  // 这里放图标的类型（success,warning,info,error）
  buttons: {
    cancel: {
      text: "容我三思",
      visible: true,
      value: false
    },
    confirm: {
      text: "我就是要删除"
    }
  }
}).then(function (isConfirm) {
    if (isConfirm){
      swal("你死定了", {button: "确认"});
    }

5.5 Toastr通知

详细用法参见：Toastr

【示例】

toastr["success"]("你已经成功被绿!")

5.6 jQueryLazyload懒加载

【示例】

<!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">
  <title>懒加载示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  ...
  <div><img src="img/0.jpg" alt="" class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>
</html>

5.7 模板

管理后台模板Metronic

第6章 参考资料

https://www.cnblogs.com/liwenzhou/p/8214637.html

https://getbootstrap.com

http://www.bootcss.com/

weinxin
我的微信
如果有技术上的问题可以扫一扫我的微信
版权声明
1. 本网站名称：Leon的博客
2. 本站永久网址：https://blog.leonshadow.cn
3. 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ632113590进行删除处理。
4. 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6. 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
liyang