30分钟快速掌握Bootstrap框架


Posted in Javascript onMay 24, 2016

什么是 Bootstrap?

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

最近空余时间比较多,今天先给大家介绍一个前端“样式”框架——Bootstrap。

一、Bootstrap 整体架构

为什么在引言我称为Bootstrap为一个前端样式框架呢?可能这样的称谓并不是很准确,但是我觉得这样的称呼可以让一些初学者可以更快明白和明白Bootstrap到底是一个什么东西。我总结东西不喜欢用一些高大上的词语来加深某个知识的理解,反而更喜欢用一些大家通俗易懂的词语来描述知识点。虽然这样的描述方式可能会有点不准确,但是我觉得则没什么大不了的,因为这样的描述确实可以让初学者更快理解这个知识。因为我在学习知识点的时候就有这样的困惑,有些知识官方文档都说的高大上,其实说白了也就是以前的一些东西,然后进行封装使得开发更加简单和快速罢了。所以这里我分享Bootstrap框架也是这样的。并且内容组织方面也是为了让初学者更好地掌握。因为我刚开始接触的时候也是一个初学者。我自认为这样的组织方式可以更快更好地理解知识。

对于Bootstrap,首先要介绍而是它的整体架构——它到底由什么组成的。相信大家看下面一张图就可以很快明白Bootstrap中具体由哪些东西组成的。

30分钟快速掌握Bootstrap框架 

从上面的图,可以清楚看到,Bootstrap主要有下面几部分组成:

12栅格系统——就是将屏幕平分12份(列)。

使用行(row)来组织元素(每一行都包括12个列),然后将内容放在列内。

通过col-md-offset-*来控制列偏移。

基础布局组件——Bootstrap提供了多种基础布局组件。如排版、代码、表格、按钮、表单等。

Jquery——Bootstrap所有的JavaScript插件都依赖于Jquery的。如果要使用这些JS插件,就必须引用Jquery库。这也是为什么我们在除了要引用Bootstrap的JS文件和CSS文件外,还需要引用Jquery库的原因,两者是依赖关系。

CSS组件——Bootstrap为我们预实现了很多CSS组件。如下拉框、按钮组、导航等。也就是说Bootstrap内容帮我们定义好了很多CSS样式,你可以将这些样式直接应用到之前的下拉框等元素里。

JavaScript插件——Bootstrap也为我们实现了一些JS插件,我们可以用其提供的插件要完成一些常用功能,而不需要我们再重新写JS代码来实现像提示框,模态窗口这样的效果了。

响应式设计——这就是一个设计理念。响应式的意思就是它会根据屏幕尺寸来自动调整页面,使得前端页面在不同尺寸的屏幕上都可以表现很好。

Bootstrap就是由上面几部分组成的。上面已经都每个组成部分做了一个简单的介绍,接下来的内容无非是通过一些实例来对每个组成部分进行一个详细的介绍罢了。

二、12栅格系统

Bootstrap定义12栅格系统,就是为了更好的布局。每个前端框架都首先要定义好的就是布局系统。在Bootstrap里面,就是利用行和列来创建页面布局的。其布局有几个原则:

行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中

每行都包含12列

将内容放置在每列中 

在bootstrap的栅格系统中,根据宽度将浏览器分为4种。其值分别是:自动(100%)、750px、970px、 1170px。

对应的样式为超小(xs)、小型(sm)、中型屏幕 (md)、大型 (lg)

其本就是通过媒体查询定义最小宽度实现。所以,Bootstrap做出来的网页向大兼容,向小不兼容!

在Bootstrap框架内,已预先定义好了屏幕大小的分界值,其分界值得定义就是通过媒体查询来定义的。其定义方式如下:

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 Bootstrap 是移动设备优先的吗?) */
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }

其实Win8应用开发中也应用了媒体查询来实现可响应式的应用。所以大家以后如果听到了可响应系统不要觉得很高深哦,其实就是框架为我们定义了媒体查询,如果超过了媒体查询中定义的最小宽度对应某个类型屏幕,通过这样的方式,就可以在不同屏幕之间收缩元素大小来适应屏幕。然而Bootstrap提出的概念是移动设备优先的,所以Bootstrap设计出来的页面只能向大兼容,向小不兼容。

三、基础布局组件

基础布局组件就是Bootstrap框架内为一些基础布局的标签定义了一些统一的样式。如Table、按钮、表单等。下面让我们看一个Table的例子:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!--因为这里没有使用到Bootstrap的JS插件,所以就没有引用Jquery组件-->
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h3>默认样式的Table</h3>
<table class="table">
<caption>表标题.</caption>
<!-- 表头,组合为t+head, t代表table的意思-->
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tommy</td>
<td>Li</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bob</td>
<td>san</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>wang</td>
</tr>
</tbody>
</table>
<h3>带边框的表格</h3>
<table class="table-bordered">
<caption>表标题.</caption>
<!-- 表头,组合为t+head, t代表table的意思-->
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tommy</td>
<td>Li</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bob</td>
<td>san</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>wang</td>
</tr>
</tbody>
</table>
<!-- 更多表格样式参考: http://v3.bootcss.com/css/#tables-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

对于Button和表单的例子代码这里就不贴了,大家可以通过下面的链接查看运行效果和查看源码。也可以通过最后的下载文件来下载本专题的所有源码。

四、CSS组件

CSS组件和基础布局组件差不多,也就是Bootstrap为一些标签定义了一些已有的样式,这些样式运行的效果都非常美观,这样每个公司或开发人员都不需要再去写一篇样式,从而加快开发效率。这里直接看一个导航的例子吧。说白这个东西,你用多了自然就熟了。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h3>导航条</h3>
<nav class="navbar navbar-default navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated Action</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

其他组件的运行效果如下:

五、JavaScript插件

默认情况下,所有的JS插件都可以通过设置特定的HTML代码和相应的属性来实现,而无需写一行JavaScript代码。其实现本质就是Bootstrap为这些属性实现了对应的JavaScript代码。

下面就直接看一个模态窗口的例子:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h3>模态窗口</h3>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click me
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Test body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

看完前面的所有内容之后,是不是瞬间觉得Bootstrap其实只不过是一个样式框架罢了。利用它我们可以快速方便地构建Web页面。另外看完前面的内容,你也就不会困惑为什么Bootstrap官方文档为什么是下面这样的吧:

30分钟快速掌握Bootstrap框架 

Bootstrap官方文档的导航条中的条目不就是我们上面的介绍的几大组成部分嘛。

六、总结

到此,本文的所有内容就分享结束了,希望通过本文可以让初学者快速理解和掌握Bootstrap。另外本文相当于是Bootstrap要领吧,关于更详细的内容大家可以自行参考Bootstrap中文官网。不过我觉得没不要了,有那样的时间还不如就直接实践起来呢。VS2013的Web应用程序就已经默认支持Bootstrap框架,大家可以看完之前就可以马上通过VS2013来创建一个Web应用程序来体验下Bootstrap在Asp.net MVC 下的应用吧。

Javascript 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JavaScript实现区块链
Mar 14 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 #Javascript
深入理解jQuery中的事件冒泡
May 24 #Javascript
jQuery 弹出层插件(推荐)
May 24 #Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 #Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 #Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 #Javascript
JavaScript程序中的流程控制语句用法总结
May 23 #Javascript
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
PHP无敌近乎加密方式!
2010/07/17 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
jQuery技巧总结
2011/01/01 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
js实现网页随机验证码
2020/10/19 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
python实现井字棋游戏
2020/03/30 Python
Python切片知识解析
2016/03/06 Python
python实现周期方波信号频谱图
2018/07/21 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python and or用法详解
2019/06/26 Python
Python配置文件处理的方法教程
2019/08/29 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
基于PyTorch中view的用法说明
2021/03/03 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
教师实习自我鉴定
2013/12/13 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
超市创业计划书
2014/09/15 职场文书
2014年班主任工作总结
2014/11/08 职场文书
李白故里导游词
2015/02/12 职场文书
大学生党员个人总结
2015/02/13 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android