没有合适的资源?快使用搜索试试~ 我知道了~
首页bootstrap详细学习课件文档
资源详情
资源评论
资源推荐

课件
第一章 bootstrap 概述
1.1 bootstrap 介绍
是由美国 公司开发的,目前最受欢迎的前端框架。 是基于
,, 的前端框架,简单灵活,可以大大提高 开发效率
1.2 bootstrap 特点
移动设备优先: 包含了贯穿整个库的移动设备优先样式
浏览器支持:目前几乎所有的主流浏览器都支持
简单易学: 基础
响应式设计: 的响应式 可以自适应于台式机,平板电脑,手机
简单总结来说:
为开发人员创建接口提供了简单统一 的解决方案
包含了强大的内置组件,便于定制,并且完美适应 !
提供了基于 的定制
开源代码
1.3 bootstrap 版本
目前比较流行的 版本有三种,,,
其 中 是 比 较 旧 的 版 本 , 在 中 的 网 页 很 多 地 方 都 是 可 以 使 用
作为前端框架的,但是主要是针对台式机网页开发,对于移动端开发比较乏
力
,目前最新版本是 "#, 可以完全适应台式机,平板电脑,手
机的网页设计,更加注重响应式原理,更好的使用 !,
,是在 $% 年也就是 四 周年之际推 出的新的前端框 架, 在
的基础上,对 做出了一些相应的改变,例如:从 迁移到
,改进网格系统,全新的自定义选项,重写所有的 "& 代码等。
目前 是最为稳定的版本,所以我们以学习 为主。

1.4 bootstrap 下载和引入
1.4.1 访问官网和下载
中文网地址:'())&&*)
找 到 我 们 的 之 后 可 以 进 入 下 载 页 面 , 其 中 我 么 可 以 下 载 各 个 不 同 的
版本来优化我们的开发
目前 为我们提供了三种下载的样式
生产环境开发包:包含最基本的已经编译好的 一如代码,里面包含, 样式,
代码,+, 字体样式,目录结构如下图所示:
源码:内容较多,包含所有的 源代码,已经编译好的开发环境包,
一些官方实例。目录结构如下图所示:
包:没有编译的 代码,可以让我们通过 编译我们自己定义的样式

1.4.2 引入
在 页面中,我们需要在 '- 标签中,将当前需要用到的 代码和 代码引入
到页面中。
引入 样式:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css"
href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
引入 代码:
script
src="../bootstrap-3.3.5-dist/js/jquery.js"></script>
第二章 全局 CSS 样式
2.1 移动设备优先
为了确保适当的绘制和触屏的缩放,我们需要在 '- 标签中添加 " 属性,
<meta name="viewport" content="width=device-width,
initial-scale=1">
其中 -' 属性控制宽度,由于我们的浏览器是需要在不同的设备上面运行的,所以我们
需要把当前的宽度设置成 -"&.-',而 ,/.&/0 表示网页在加载的时候需要
( 显示。而在移动设备上我们通常要求页面不能左右滑动,能够大大的增加用户的使用
体验,这要是我们需要添加上另外的一些属性
<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
其中 *1* *.&/0$ 和 .&//0, 是用来规定当前用户不能使用缩放功
能,可以让我们当前的页面显示最佳效果。
2.2 布局容器
需要为页面内容和栅格系统提供一个容器,&,, 或者 &,,.2 -
&,, 类用于固定宽度并且支持响应式布局的容器

<div class="container">
</div>
&,,.2 - 类用于 $$3宽度,占据全部视图的容器
<div class="container-fluid">
</div>
2.3 栅格系统
提供了一套响应式,移动设备优先的流式栅格系统,可以随着屏幕或者视口的
大小改变而改变,系统会自动分为最多 列。它还包含了易于使用的预定义类,强大的
*1, 用于生成更具语义的布局
2.3.1 介绍和工作原理
栅格系统用于通过一系列的行和列的组合来创建页面布局样式。
工作原理:
行,必须包含在&,,4固定宽度5或&,,.2 -4$$35宽度中,以方便围
棋赋予合适的排列4/6*,5和内补4--,65
通过行在水平方向创建一组列
内容应该放在列内,并且只有列可以作为行的直接子元素
我们可以通过 和&/.1. 这样的预定义类,来快速创建栅格布局
通过为列设置 --,6 属性,可以创建列与列之间的间隔,通过为 元素设置复
制 *6, 从而可以抵消&,, 元素设置的 --,6。这样就间接的取消了列中
的 --,6
2.3.2 多媒体查询
媒体查询就是有条件的 规则,它适用于一些规定某些特殊规定条件的 ,
在 的媒体查询中允许基于视口大小进行移动,显示隐藏内容。
一般情况下的媒体查询:
<style>
/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) {
...

}
/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) {
...
}
/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) {
...
}
</style>
有些时候我们也会在媒体查询的代码中包含 *1.-',从而将 的影响限制在更小
范围的屏幕之内
<style>
@media (max-width: @screen-xs-max) {
...
}
@media (min-width: @screen-sm-min) and (max-width:
@screen-sm-max) {
...
}
@media (min-width: @screen-md-min) and (max-width:
@screen-md-max) {
...
}
@media (min-width: @screen-lg-min) {
...
}
</style>
2.3.3 网格选项
超 小 设 备 手 机
47#8915
小型设备,平板
电 脑
4:0#8915
中性设配台式电
脑4:0;;15
超大型台式电脑
4:0$$15
网格行为 一般水平 以折叠开始,断
点以上是水平
以折叠开始,断
点以上是水平
以折叠开始,断
点以上是水平
最大容器宽度
,, #%$1 ;#$1 #$1
剩余63页未读,继续阅读

















安全验证
文档复制为VIP权益,开通VIP直接复制

评论0