1、起步
1、<html lang="zh-cn">
2、视口
3、跨浏览器(IE)兼容性
<meta http-equiv="x-ua-compatible" content="IE=edge">
4、Bootstrap.css文件
5、两个兼容性JS文件
1、html5shiv.min.js
2、respond.min.js
6、两个行为依赖JS文件
1、jquery.js
2、bootstrap.js
7、测试的JS文件
bootlint.js
2、全局CSS样式
1、Button
2、Img
3、Table
隔行变色:table-striped
带边框:table-bordered
鼠标悬停:table-hove
响应式表格:table-responsive
4、ul,ol,dl
list-unstyled
list-inline
dl-horizontal
5、栅格布局系统
1、栅格布局系统的最外层必须是 Bootstrap 所提供的容器
2、容器中允许出现若干 "行"
.row
每行都被等分为 12 列
3、在 row 中允许放 若干列,但需要指定每列需要占的列宽(1/12)
<div class="col-lg-*">
<div class="col-md-*">
<div class="col-sm-*">
<div class="col-xs-*">
4、列偏移
指定向右移动几个列的位置
<div class="col-lg-offset-*">
<div class="col-md-offset-*">
<div class="col-sm-offset-*">
<div class="col-xs-offset-*">
===========================================
1、全局CSS样式 - 栅格布局系统(下)
1、栅格布局系统的嵌套
.col-*-*:相当于是一个容器
.container>.row>.col-*-*>.row>.col-*-*
2、适用于不同屏幕的列的class(xs/sm/md/lg),可以兼容更大的屏幕
小屏幕的class 可以兼容大屏幕的显示效果
col-xs-6 : 在 xs 屏幕下,占6列的宽
col-lg-8 : 在 lg 屏幕下,占8列的宽
.col-xs-* : 适用于 xs/sm/md/lg
.col-xs-6 : 在 xs/sm/md/lg 都占6列的宽
.col-sm-* : 适用于 sm/md/lg
.col-md-* : 适用于 md/lg
.col-lg-* : 适用于 lg
大屏幕的内容class是不能兼容小屏幕的,所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的(纵向排列)
3、可以在一个列(div)中,指定在不同屏幕下的宽度占比
<div class="col-xs-12 col-sm-6 col-md-3">
在xs中占12列的宽(一行中只显示一列)
在sm中占6列的宽(1行中能显示2列)
在md中占3列的宽(1行中能显示4列)
4、指定列在特定屏幕下隐藏
.hidden-lg : 在 lg 屏幕下隐藏
.hidden-md : 在 md 屏幕下隐藏
.hidden-sm : 在 sm 屏幕下隐藏
.hidden-xs : 在 xs 屏幕下隐藏
2、全局CSS样式 - 表单
Bootstrap中,表单控件与关联的lable(文本)要放在一个表单控件组中(.form-group)
表单控件组中允许包含以下内容:
1、label :标签文本
2、input :表单控件元素 (class="form-control")
3、提示文本:可选的,提示的内容(class="help-block")
1、表单分类
1、默认表单 (基本表单)
效果:label,控件,提示的文本,全部都是纵向排列
ex:
<form>
<div class="form-group">
<label>用户名:</label>
<input type="text" class="form-control">
<span class="help-block">提示的文本</span>
</div>
</form>
2、内联表单
<form class="form-inline">
.sr-only :
Screen Reader Only
3、水平表单
水平表单 = 表单 + 栅格布局系统
栅格:
最外层:container / container-fluid
行:div.row
列:div.col-*-*
水平表单:
最外层:
.container / .container-fluid
或
<form class="form-horizontal">
行:
div.row 或 div.form-group
一个 .form-group 就是一行
列:
div.col-*-*
或
<label class="col-*-* control-label">
或
<span class="help-block col-*-*">
3、Bootstrap - 组件
1、什么是组件
由多个元素所组成的一个复杂的结构
2、组件 - 下拉菜单(Dropdown)
1、结构
将 触发器 和 菜单 包裹在一个 .dropdown 或 .dropup 或 position:relative 的元素中
1、外层元素
dropdown ,dropup,position:relative
2、内层元素
1、触发器
由<button> 和 <a> 来充当的
class="dropdown-toggle"
data-toggle="dropdown" : 切换菜单的显示 和 隐藏的
2、菜单
由 <ul> 或 <div> 来充当
class="dropdown-menu"
由列表作为菜单时,允许为列表项增加以下class来完成特殊效果:
li.divider : 分割线
li.disabled : 禁用菜单项
li.dropdown-header : 标题
3、组件 - 导航(nav)
1、所有的导航都依赖于 .nav
2、导航分类
1、标签页式导航
<ul class="nav nav-tabs">
<li class="active">
<a href="#">...</a>
</li>
<li>
<a href="#">...</a>
</li>
</ul>
2、胶囊式导航
<ul class="nav nav-pills">
同上 ...
</ul>
3、实现点击切换效果
<li data-toggle="tab"></li>
4、组件 - 图标字体(glyphicon)
在页面中,显示为图标,但本质是文字。允许为图标设置字体,颜色,大小,阴影 ,粗斜体....
Web程序中常用的图标字体:
1、Glyphicons 收费
2、FontAwesome 675个 免费
使用自定义的图标字体时,一定要先添加图标字体的设置,然后再使用图标字体,从而保证客户端也会有图标字体文件
***.css
@font-face{
font-family:"自定义名称";
src:url('图标字体文件的路径');
}
使用 图标字体
选择器{
font-family:"自定义名称";
}
如何在网页中使用图标字体:
1、创建一个元素,必须保证为空
2、让元素的class="glyphicon glyphicon-*"
练习:
1、在页面中创建多个按钮,每个按钮上显示一个图标
首页(房子),配置(齿轮),刷新,定位,购物车,发邮件,照相机,播放相关(播放,暂停,上一曲,下一曲 ...)