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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 Javascript
分享自己用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
php中如何防止表单的重复提交
2013/08/02 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Node.js事件的正确使用方法
2019/04/05 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python 查看文件的编码格式方法
2017/12/21 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
如何通过Python实现标签云算法
2019/07/02 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
企业年会主持词
2014/03/27 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
售房协议书范本
2015/08/11 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技