案例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)禁用的菜单项
为下拉菜单中的
<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