Bootstrap入门书籍之(零)Bootstrap简介


Posted in Javascript onFebruary 17, 2016

什么是Bootstrap?

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

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

基于html5、css3的bootstrap,具有下面这些诱人特性:

(1)移动设备优先;

(2)漂亮的设计;

(3)友好的学习曲线;

(4)卓越的兼容性;

(5)响应式设计;

(6)12列响应式栅格结构;

(7)样式向导文档。

自定义JQuery插件,完整的类库,基于Less、Sass等

Bootstrap下载

可以在其中文官网 中下载,可以很明显的看到一个大大的下载按钮,此外还可以通过CDN,git命令,以及npm等等方式进行下载。

如果您恰好看了我写的sublime Text的博客的话,肯定知道我们是可以直接通过插件进行安装的。只需要在 ctrl + shift + P 时,输入 fecth:manage ,进行如下设置:

"packages":
{
"Bootstrap": "https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip"
}

之后就可以直接通过sublime Text进行下载了,还是刚刚的步骤,但是这一次输入的是 fetch:package 。找到 Bootstrap ,如果下载成功在您的文件夹中应该可以看到主要包括三个文件夹 css , fonts 和 js ,如下:

Bootstrap入门书籍之(零)Bootstrap简介 

可以看到除去字体文件夹外的其他文件夹中每一分文件都有两个不同的版本,一个完整版的文件,方便查看源码如: bootstrap.js 和一个用于实际生产情况的压缩文件如 bottstrap.min.js ;

在字体文件中可以看到有很多文件,但是它的功能很简单,就是是用来制作 icon图标 的文件,使用了CSS3的@font-face技术。

在实际情况中,如果你还想使用更多的图标,还可以在 Iconfont-阿里巴巴矢量图标库 ,自行查找设置。

Bootstrap标准模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 在IE运行最新的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 初始化移动浏览显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 标准模板</title>
<!-- 1. 加载Bootstrap层叠样式表 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 你自己自定义的样式文件 -->
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>hello,world</h1>
<!-- 2. 如果要使用Bootstrap的js插件,必须加载jquery库,且必须在bootstrap库之前 -->
<script src="js/jquery-min-1.11.3.js"></script>
<!-- 3. 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用-->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

全局样式

Bootstrap框架的核心是轻量的CSS基础代码库,他并没有一味的重置样式,而是注重各浏览器基础表现,降低开发难度。

为了增强跨浏览器表现的一致性,Bootstrap使用了Normalize.css。但没有一味全部使用该重置样式,而是在此基础之上进行了一些改良,让其更加符合Bootstrap的设计思想。

Bootstrap保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,在排版、链接样式设置了基本的全局样式。具体说明如下:

移除body的margin声明

设置body的背景色为白色

为排版设置了基本的字体、字号和行高

设置全局链接颜色,且当链接处于悬浮 :hover 状态时才会显示下划线样式

Bootstrap简介部分到此就结束了,在Bootstrap的 中文官网 中,有着层次清晰且详细的说明文档,下面就和我一起走进

Bootstrap的世界吧!

Javascript 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
再谈Jquery Ajax方法传递到action(补充)
May 12 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
分享自己用JS做的扫雷小游戏
Feb 17 #Javascript
javascript瀑布流布局实现方法详解
Feb 17 #Javascript
给angular加上动画效遇到的问题总结
Feb 17 #Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 #Javascript
jQuery实现伪分页的方法分享
Feb 17 #Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 #Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 #Javascript
You might like
实现树状结构的两种方法
2006/10/09 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
jQuery选择器全面总结
2014/01/06 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
浅谈js闭包理解
2019/03/28 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
自荐书范文
2013/12/08 职场文书
烹调加工管理制度
2014/02/04 职场文书
大一新生学期自我评价
2014/04/09 职场文书
公司合作协议书范本
2014/04/18 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
老公保证书
2015/01/17 职场文书
2015年护士节慰问信
2015/03/23 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书