第一章之初识Bootstrap

更新时间：2016年04月25日 11:03:22 作者：水之原

这篇文章主要介绍了第一章之初识Bootstrap的相关资料,需要的朋友可以参考下

学习要点：

1.Bootstrap 概述

2.Bootstrap 特点

3.Bootstrap 结构

4.创建第一个页面

5.学习的各项准备

本节课我们主要了解一下 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 来录制。

以上所述是小编给大家介绍的Bootstrap框架的相关知识，希望对大家有所帮助！

您可能感兴趣的文章:

bootstrap

纯JS实现简单的日历
这篇文章主要为大家详细介绍了纯JS实现简单日历的的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
TypeScript中函数重载写法
这篇文章主要介绍了TypeScript中函数重载写法，TypeScript 提供了函数重载功能，下面文章围绕TypeScript函数重载续航管资料展开内容,具有一定得参考价值，需要的朋友可以参考一下
2021-12-12
e.target与e.currentTarget对象的使用区别详解
这篇文章主要为大家介绍了e.target与e.currentTarget的使用区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
js获取html的span标签的值方法(超简单)
下面小编就为大家带来一篇js获取html的span标签的值方法(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
js获取鼠标位置实例详解
这篇文章主要介绍了js获取鼠标位置的方法,结合实例形式详细分析了JavaScript响应鼠标事件获取并操作页面元素属性的相关技巧,需要的朋友可以参考下
2015-12-12
带你使用webpack快速构建web项目的方法
这篇文章主要介绍了带你使用webpack快速构建web项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
微信小程序wx:for和wx:for-item的用法详解
这篇文章主要介绍了微信小程序wx:for和wx:for-item的正确用法,wx:for是循环数组，wx:for-item即给列表赋别名,文中给大家列出来几个错误用法，大家一起学习下
2018-04-04
JS输入用户名自动显示邮箱后缀列表的方法
这篇文章主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能,非常具有实用价值,需要的朋友可以参考下
2015-01-01
使用BootStrap进行轮播图的制作
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。这篇文章主要介绍了使用BootStrap进行轮播图的制作的相关资料,需要的朋友可以参考下
2017-01-01
js判断两个数组是否存在相同元素的四种方法
这篇文章主要给大家介绍了关于js判断两个数组是否存在相同元素的四种方法,js中是不能直接用==或者===来计算两个数组是否相等的,那么就需要对数组的值进行比较,需要的朋友可以参考下
2023-07-07