Bootstrap学习笔记(一)
Bootstrap学习笔记(一)
第一部分:Bootstrap简介
· Bootstrap是目前非常流行的一个框架,它是由Twitter公司的Mark Otto和Jacob Thornton开发并在2011年8月在GitHub上发布的开源作品,其基于HTML、CSS、Javascript。它的一大特点是简单灵活,通过学习Bootstrap我们可以很轻松的开发Web项目。
Bootstrap的特点如下:
- 移动设备优先
- 所有的主流浏览器都支持
- 容易上手,简单易学
- 响应式设计--能够自适于台式机、平板电脑、手机
下面这个是Bootstrap的模板,我们如果要使用Bootstrap,下面的这个布局是最基本的。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
注意:
- 其中 html5shir.js主要是为了让不支持HTML5特性的IE浏览器版本识别HTML5中的元素,respond.js是为了让不支持css3中媒体查询( Media Query )的浏览器(主要是IE9以下的版本)支持媒体查询。
- html5shiv.min.js和respond.min.js在页面顶部引入是为了避免在渲染过程中出现闪动问题,jquery.js和bootstrap.js在页面底部加载视为了避免js的阻断加载导致页面渲染缓慢的问题。
- 如果你不需要使用js组件,那么就不需要引入jQuery和bootstrap.js了。
- 其中的一些文件,我们可以使用Bootstrap中文网提供的免费CDN加速服务--基于国内云厂商的CDN服务,访问速度更快、加速效果更明显、没有速度和宽带限制、永久免费。
-
当然,其中的css和js文件也可以不通过cdn引入,我们也可以通过下面的网站下载得到:
- 下面是推荐CDN
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件,其中包含了所有的已经编译的插件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
当然,其中的css和js文件也可以不通过cdn引入,我们也可以通过下面的网站下载得到:
下面是Bootstrap浏览器、设备支持情况:
第二部分:Bootstrap整体架构
1.css12栅格系统
栅格系统就是:
以规则的网格阵列来指导和规范网页中的版面布局和信息分布。
它将网页的总宽度平分为12份,开发人员可以自由按份组合,以便开发出简洁方便的程序。
2.基础布局组件
在12栅格系统的基础上,Bootstrap提供了多种基础布局组件,比如排版、代码、表格、按钮、表单等等。也就是说,之前我们需要使用很多的css代码来修饰html元素,但是有了bootstrap提供的基础布局组件,我们只需要给元素加上特定名称的类名就可以设计出漂亮的html元素啦,是不是很方便呢!
3.jQuery的引入
Bootstrap中所有的JavaScript插件都依赖于jQuery 1.0 +,如果要使用js插件,那么我们就必须要引入jQuery库;如果我们不需要使用js插件,那我们就不需要引入jQuery库,就更不用引入bootstrap.js了。
4.响应式设计
什么是响应式设计?
响应式设计就是一个网站能兼容多个终端,而不是为每一个终端做一个特定的版本。
5.css组件
在3.x版本例提供了20种css组件,包括下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑导航、排版等等。同样地,对于这些组件,我们只需要写出html后加上特定的class名称即可。
6.JavaScript插件
新版的JavaScript插件总共有12中,包括轮播图等非常实用。
第三部分:栅格系统
其原理十分简单,即通过定义容器的大小,平分12份,再通过调整内外边距,最后结合栅格系统即可做出强大的响应式的栅格系统。
注意:
- 行(row)必须包含在.container中。
- 列(column)必须包含在行(row)中。
1.由于是响应式设计,所以我们需要根据设备的宽度来区分4种类型的浏览器。 通过分界点768px、992px、1220px划分为超小屏、小屏、中屏、大屏。
2.因为要使用栅格系统,所以必须在外层有一个.container的div,这个div不会占满整个浏览器屏幕(这里假设.container的div是body的唯一子元素),而是有一定的间隙,我们查看其源代码可知:
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } }
会通过媒体查询来设置.container的宽度,对于超小屏幕这里没有设置,应该为100%;对于小屏幕设置为750px;对于中屏设置为970px;对于大屏,设置位1170px;除此之外,还设置了两边的padding,并且通过值为auto的左右margin使得其居中。
注意:
- container中没有设置height,所以说如果类名为container的div下没有其他元素,那我们是看不到的,必须添加height才能将其显示出来。
- 在源码中可以看到*{ box-sizing: border-box;}这句代码,所以说如果我们不人工覆盖,所有的元素都是border-box,即类似与IE的盒模型。 所以说我们添加更大的padding值,container这个div宽度不会增加,只是内容的宽度减小了。