《云计算全栈》-pythonweb开发篇：bootstrap应用、全局样式

案例1：编写Bootstrap模板
案例2：使用全局 CSS 样式
案例3：使用常用组件
例4：使用常用插件

1 案例1：编写Bootstrap模板
1.1 问题

【参见COOKBOOK】

使用 BootStrap 模版创建页面

1.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：使用内联样式为

元素设置样式

目录说明：

1)css目录用于存放Bootstrap框架使用的样式文件：

bootstrap.css文件：Bootstrap框架的样式文件

bootstrap.min.css文件：Bootstrap框架的样式压缩文件

bootstrap-theme.css文件：Bootstrap框架的主题文件

2)fonts目录用于存放Bootstrap框架使用的字体文件：

3)js目录用于存放Bootstrap框架使用的核心javascript文件：

bootstrap.js文件：Bootstrap框架的核心javascript文件

bootstrap.min.js文件：Bootstrap框架的核心javascript压缩文件

<!—声明 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ 元数据-->
    <title>my bootstrap test</title>
    <!-- Bootstrap 样式-->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<!—页面内容-->
<div class="container">
    <p>
        press <kbd>ctrl + C</kbd> to break.
    </p>
    <a href="http://www.bootcss.com">bootstrap中文网</a>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery)，想要使用Bootstrap框架，必须要先引入jQuery文 件 -->
<script src="static/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件-->
<script src="static/js/bootstrap.min.js"></script>
</body>
</html>

步骤二：实例演示如图-1所示：
在这里插入图片描述
图-1
2 案例2：使用全局 CSS 样式
2.1 问题

【参见COOKBOOK】

使用全局 CSS 样式定义页面

2.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：HTML5 文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

步骤二：移动设备优先

为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据元素

<meta name="viewport" content="width=device-width, initial-scale=1">

步骤三：将Bootstrap模板补充完整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>my bootstrap test</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
...
...
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
</body>
</html>

步骤四：了解CSS全局样式的设置

1)为 body 元素设置 background-color: #fff;body元素背景色设置为白色

2)使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数

3)为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线

步骤五：布局容器

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

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

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

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

步骤五：按钮

1)按钮预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮：

<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<button type="button" class="btn btn-success">（成功）Success</button>
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!--链接按钮鼠标悬停才有下划线-->
<button type="button" class="btn btn-link">（链接）Link</button>

实例演示如图-2所示：
在这里插入图片描述
图-2

2)按钮尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮

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

实例演示如图-3所示：
在这里插入图片描述
图-3

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>

实例演示如图-4所示：
在这里插入图片描述
图-4

步骤六：文本

1)对齐

<!--设定文本左对齐-->
<p class="text-left">Left aligned text.</p>
<!--设定文本右对齐-->
<p class="text-center">Center aligned text.</p>
<!--设定文本居中对齐-->
<p class="text-right">Right aligned text.</p>
<!--设定文本对齐，段落超出屏幕部分文字自动换行-->
<p class="text-justify">Justified text.</p>
<!--段落超出屏幕部分不换行-->
<p class="text-nowrap">No wrap text.</p>

2)大小写

<!--小写（仅英文）-->
<p class="text-lowercase">Lowercased text.</p>
<!--文字大写（仅英文）-->
<p class="text-uppercase">Uppercased text.</p>
<!--首字母大写-->
<p class="text-capitalize">Capitalized text.</p>

实例演示如图-5所示：
在这里插入图片描述
图-5

3)情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样

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

实例演示如图-6所示：
在这里插入图片描述
图-6

步骤七：列表

1)无样式列表

移除了默认的 list-style 样式和左侧外边距的一组元素

<ul class="list-unstyled">
  <li>...</li>
</ul>

实例演示如图-7所示：
在这里插入图片描述
图-7

2)内联列表

通过设置 display: inline-block，将所有元素放置于同一行。

<ul class="list-inline">
  <li>...</li>
</ul>

实例演示如图-8所示：
在这里插入图片描述
图-8

3)描述

带有描述的短语列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

实例演示如图-9所示：
在这里插入图片描述
图-9

水平排列的描述

.dl-horizontal 可以让

内的短语及其描述排在一行。开始是像

的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

实例演示如图-10所示：
在这里插入图片描述
图-10

步骤八：表单

1)基本表单

实现基本的表单样式

<form action=“” role=“form”>
<div class="form-group">
<label>电子邮件：</label>
<input type="email" class="form-control" placeholder="email地址">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="输入密码">
</div>
<input class=“btn btn-primary” type=“submit”value=“提交”>
</form>

实例演示如图-11所示：
在这里插入图片描述
图-11

2)内联表单

让表单左对齐浮动，并表现为inline-block 内联块结构，为上面代码form元素增加类

<form class="form-inline">

实例演示如图-12所示：
在这里插入图片描述
图-12

3)表单合组

前后增加片段

<form action=“” role=“form”>
        <div class="input-group">
            <div class="input-group-addon">￥</div>
            <input type="text" class="form-control">
            <div class="input-group-addon">.00</div>
        </div>
</form>

实例演示如图-13所示：
在这里插入图片描述
图-13

4)水平排列

让表单内的元素保持水平排列

<form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">电子邮件</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" placeholder="请输入您的电子邮件">
            </div>
        </div>
</form>

注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和

父元素样式同步。

5)复选框和单选框

设置复选框，在一行

<div class="checkbox">
        <label>
            <input type="checkbox">体育
        </label>
</div>
<div class="checkbox">
        <label>
            <input type="checkbox">音乐
        </label>
</div>

设置禁用的复选框

<div class="checkbox disabled">
        <label>
            <input type="checkbox" disabled>音乐
        </label>
</div>

设置内联一行显示的复选框

<label class="checkbox-inline">
        <input type="checkbox">体育
</label>
<label class="checkbox-inline disabled">
        <input type="checkbox" disabled>音乐
</label>

设置单选框

<div class="radio disabled">
        <label>
            <input type="radio" name="sex" disabled>男
        </label>

6)下拉列表

设置下拉列表

<select class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
</select>

3 案例3：使用常用组件
3.1 问题

【参见COOKBOOK】

使用常用组件为页面添加元素

3.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：字体图标

1)Bootstrap提供了一套专用于Web开发/移动开发常用的

一套图标字体——Glyphicons Halflings

基本样式类 glyphicon

其他修饰类

2)注意事项

引入 fonts 文件

不要和其他组件混合使用

只对内容为空的元素起作用

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

实例演示如图-14所示：
在这里插入图片描述
图-14

步骤二：下拉菜单

1)基本格式

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码

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

实例演示如图-15所示：
在这里插入图片描述
图-15

2)标题

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

实例演示如图-16所示：
在这里插入图片描述
图-16

3)分割线

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

实例演示如图-17所示：
在这里插入图片描述
图-17

4)禁用的菜单项

为下拉菜单中的

元素添加 .disabled 类，从而禁用相应的菜单项

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

实例演示如图-18所示：
在这里插入图片描述
图-18

步骤三：按钮组

1)基本按钮组

<div class="btn-group" role="group" aria-label="...">
  <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>

实例演示如图-19所示：
在这里插入图片描述
图-19

2)按钮工具栏

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

实例演示如图-20所示：
在这里插入图片描述
图-20

3)尺寸

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

实例演示如图-21所示：
在这里插入图片描述
图-21

4)垂直排列

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

实例演示如图-22所示：
在这里插入图片描述
图-22

步骤四：警告框

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。

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

实例演示如图-23所示：
在这里插入图片描述
图-23
4 例4：使用常用插件
4.1 问题

【参见COOKBOOK】

使用常用插件为页面添加元素

4.2 步骤

实现此案例需要按照如下步骤进行。

步骤一：标签页

1)标签页

通过data属性:添加data-toggle="tab"或data-toggle="pill"到锚文本链接中

添加nav 和nav-tabs 类到ul中，将会应用Bootstrap标签样式，添加nav和 nav-pills类到ul中，将会应用Bootstrap胶囊式样式

<ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#Pro" data-toggle="tab">Profile</a></li>
        <li><a href="#Pro" data-toggle="tab">Dropdown</a></li>
</ul>

实例演示如图-24所示：
在这里插入图片描述
图-24

2)淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

3)折叠框

data-toggle="collapse"添加到您想要展开或折叠的组件的链接上。

href或data-target属性添加到父组件，它的值是子组件的id。

data-parent属性把折叠面板（accordion）的id添加到要展开或折叠的组件链接上。

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                点击我进行展开，再次点击我进行折叠。第 2 部分
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                点击我进行展开，再次点击我进行折叠。第 3 部分
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>

实例演示如图-25所示：
在这里插入图片描述
图-25

3)工具提示

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个标签添加 data-toggle=“tooltip” 即可。标签的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<button data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>
<button data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</button>
<button data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</button>
<button data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</button>
<button data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

<script>
        $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

实例演示如图-26、图-27所示：
在这里插入图片描述
图-26

图-27

4)弹出框

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。

通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=“popover” 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。。

<a href="#" data-toggle="popover" title="请悬停在我的上面">
    请悬停在我的上面
</a>

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

<script>
        $(function () { $("[data-toggle='popover']").popover(); }); 
</script>

实例演示如图-28所示：
在这里插入图片描述
图-28

解启超

发布了275 篇原创文章 · 获赞 46 · 访问量 2万+

私信关注

《云计算全栈》-pythonweb开发篇：bootstrap应用、全局样式

猜你喜欢