没有合适的资源?快使用搜索试试~ 我知道了~
李炎恢bootstrap3.pdf合并版带目录
需积分: 10 33 下载量 7 浏览量
2017-09-15
13:29:42
上传
评论
收藏 3.57MB PDF 举报
温馨提示
第一章 bootstrap介绍 第二章 排版样式 第三章 表格和按钮 第四章 表单和图片 第五章 栅格系统 第六章 辅助类和响应式工具 第七章 图标菜单按钮组件 第八章 输入框和导航组件 .............共二十章,后面带开发实例!
资源推荐
资源详情
资源评论






第 1 章 Bootstrap 介绍
学习要点:
1.Bootstrap 概述
2.Bootstrap 特点
3.Bootstrap 结构
4.创建第一个页面
5.学习的各项准备
主讲教师:李炎恢
本课程由 北风网 和 瓢城 Web 俱乐部 提供
本节课我们主要了解一下 Boostrap 历史、特点、用途,以及为什么选择 Boostrap 来开
发我们的 Web 项目。
一.Bootstrap 概述
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于
HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美,可用于快速、简单地
构建基于 PC 及移动端设备的 Web 页面需求。
2010 年 6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历
各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布。经过很长时间的迭代升
级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端
的开源框架。
Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD
以及手机移动端的页面访问。
Bootstrap 下载及演示:
国内文档翻译官网:http://www.bootcss.com
瓢城 Web 俱乐部官网:http://www.ycku.com
二.Bootstrap 特点
Bootstrap 非常流行,得益于它非常实用的功能和特点。主要核心功能特点如下:
(1).跨设备、跨浏览器
可以兼容所有现代浏览器,包括比较诟病的 IE7、8。当然,本课程不再考虑 IE9 以下
浏览器。
(2).响应式布局
不但可以支持 PC 端的各种分辨率的显示,还支持移动端 PAD、手机等屏幕的响应式切
换显示。
(3).提供的全面的组件
Bootstrap 提供了实用性很强的组件,包括:导航、标签、工具条、按钮等一系列组
件,方便开发者调用。
(4).内置 jQuery 插件
Bootstrap 提供了很多实用性的 jquery 插件,这些插件方便开发者实现 Web 中各种

常规特效。
(5).支持 HTML5、CSS3
HTML5 语义化标签和 CSS3 属性,都得到很好的支持。
(6).支持 LESS 动态样式
LESS 使用变量、嵌套、操作混合编码,编写更快、更灵活的 CSS。它和 Bootstrap 能
很好的配合开发。
三.Bootstrap 结构
首先,想要了解 Boostrap 的文档结构,需要在官网先把它下载到本地。Bootstrap
下载地址如下:
Bootstrap 下载地址:http://v3.bootcss.com/ (选择生产环境即可,v3.3.4)
解压后,目录呈现这样的结构:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个 css 后缀的文件,其中包含 min 字样的,是压缩版本,一般使用
这个;不包含的属于没有压缩的,可以学习了解 css 代码的文件;而 map 后缀的文件则是
css 源码映射表,在一些特定的浏览器工具中使用。
2.js 目录包含两个文件,是未压缩和压缩的 js 文件。
3.fonts 目录包含了不同后缀的字体文件。
四.创建第一个页面
我们创建一个 HTML5 的页面,并且将 Bootstrap 的核心文件引入,然后测试是否正常
显示。
//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="UTF-8">
<title>Bootstrap 介绍</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
五.学习的各项准备
1.开发工具,我们使用 Sublime Text3 作为 Bootstrap 的开发工具,并且安装了 Emmet
代码生成插件;
2.测试工具,除了常规的现代浏览器,其次就是作为移动端的测试工具,我们这里采
用的是 Opera Mobile Emulator,和 Chrome 的移动 Web 测试工具。
3.所需基础,至少有 HTML5 第一季课程的基础,Bootstrap 内置了很多 jQuery 插件,
虽然使用起来比 jQuery 或 JS 本身要简单的多,但如果有 jQuery 和 JS 课程的基础,那学
习理解力就更加深入;
4.课程分辨率:基础课程,我们使用 1024 x 768 来录制,但某些特殊部分,比如响
应式和项目课程,需要大分辨率录制,会采用 1440 x 900 来录制。
感谢收看本次教程!
本课程是由北风网
(ibeifeng.com)
瓢城
Web
俱乐部
(ycku.com)
联合提供:
本次主讲老师:李炎恢
谢谢大家,再见!

第 2 章 排版样式
学习要点:
1.页面排版
主讲教师:李炎恢
本课程由 北风网 和 瓢城 Web 俱乐部 提供
本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题、页面
主体、对齐、列表等常规内容。
一.页面排版
Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。
1.页面主体
Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即
20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。
//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
2.标题
//从 h1 到 h6
<h1>Bootstrap 框架</h1> //36px
<h2>Bootstrap 框架</h2> //30px
<h3>Bootstrap 框架</h3> //24px
<h4>Bootstrap 框架</h4> //18px
<h5>Bootstrap 框架</h5> //14px
<h6>Bootstrap 框架</h6> //12px
我们从 Firebug 查看元素了解到,Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,
并且还支持普通内联元素定义 class=(.h1 ~ h6)来实现相同的功能。
//内联元素使用标题字体
<span class="h1">Bootstrap</span>
注:通过 Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保
证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。
在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题,
//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>

<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6>
通过 Firebug 查看,我们发现 h1 ~ h3 下 small 元素的大小只占父元素的 65%,那么
通过计算(查看 Firebug 计算后的样式),h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px;
h4 ~ h6 下 small 元素的大小只占父元素的 75% ,分别为:13.5px、10.5px、9px。
在 h1 ~ h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为 1,粗度
为 400。
3.内联文本元素
//添加标记,<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p>
//各种加线条的文本
<del>Bootstrap 框架</del> //删除的文本
<s>Bootstrap 框架</s> //无用的文本
<ins>Bootstrap 框架</ins> //插入的文本
<u>Bootstrap 框架</u> //效果同上,下划线文本
//各种强调的文本
<small>Bootstrap 框架</small> //标准字号的 85%
<strong>Bootstrap 框架</strong> //加粗 700
<em>Bootstrap 框架</em> //倾斜
4.对齐
//设置文本对齐
<p class="text-left">Bootstrap 框架</p> //居左
<p class="text-center">Bootstrap 框架</p> //居中
<p class="text-right">Bootstrap 框架</p> //居右
<p class="text-justify">Bootstrap 框架</p> //两端对齐,支持度不佳
<p class="text-nowrap">Bootstrap 框架</p> //不换行
5.大小写
//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写
6.缩略语
//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>
剩余99页未读,继续阅读
资源评论


倦旅人
- 粉丝: 2
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 软件技术基础习题答案.doc
- 计算机网络课设——中型企业网络组建实施方案与实施方案.doc
- 计算机软件工程维护策略.docx
- 中职计算机教学创新性对策初探.docx
- C语言程序设计方案实验报告实验七结构体和联合体程序设计方案.doc
- 基于三菱PLC的交通灯控制系统设计.docx
- 第二章施工总进度与网络计划.doc
- 计算机应用基础线上线下混合式教学改革.docx
- 国内外服装品牌电子商务模式对比分析.doc
- PPT模板:计算机原理15-字节与十六进制.pptx
- 关于电力工程项目管理模式创新与应用的探究.docx
- 电子商务专业信息技术课程群规划设置研究.docx
- 信息系统项目管理案例分析项目成本管理.doc
- 自动驾驶出租车的发展状况与展望.docx
- 电气自动化控制技术在煤矿生产中的应用分析1.docx
- 售后服务软件行业深度调查及发展前景研究报告记录.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



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