Bootstrap开发实战之第一次接触Bootstrap
本文我们主要了解一下Boostrap历史、特点、用途，以及为什么选择Boostrap来开发我们的Web项目。
学习要点：
1.Bootstrap概述
2.Bootstrap特点
3.Bootstrap结构
4.创建第一个页面
5.学习的各项准备
一、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
<!DOCTYPEhtml> <htmllang="zh-cn"> <head> <metacharset="UTF-8"> <title>Bootstrap介绍</title> <linkrel="stylesheet"href="css/bootstrap.min.css"> </head> <body> <buttonclass="btnbtn-info">Bootstrap</button> <scriptsrc="js/jquery.min.js"></script> <scriptsrc="js/bootstrap.min.js"></script> </body> </html>
五、学习的各项准备
1.开发工具，我们使用SublimeText3作为Bootstrap的开发工具，并且安装了Emmet代码生成插件；
2.测试工具，除了常规的现代浏览器，其次就是作为移动端的测试工具，我们这里采用的是OperaMobileEmulator，和Chrome的移动Web测试工具。
3.所需基础，至少有HTML5第一季课程的基础，Bootstrap内置了很多jQuery插件，虽然使用起来比jQuery或JS本身要简单的多，但如果有jQuery和JS课程的基础，那学习理解力就更加深入；
4.课程分辨率：基础课程，我们使用1024x768来录制，但某些特殊部分，比如响应式和项目课程，需要大分辨率录制，会采用1440x900来录制。
如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程 Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。