首页
学习
活动
专区
工具
TVP
发布

Bootstrap 响应式框架 第三集

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、在页面中创建多个按钮,每个按钮上显示一个图标

首页(房子),配置(齿轮),刷新,定位,购物车,发邮件,照相机,播放相关(播放,暂停,上一曲,下一曲 ...)

下一篇
举报
领券