一.Bootstrap概述
Bootstrap最为重要的部分就是它的响应式布局,通过这种布局可以兼容PC端、PAD以及手机移动端的页面访问。
Bootstrap下载及演示:
国内文档翻译官网:http://www.bootcss.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)解压后,目录呈现这样的结构:
2主要分为三大核心目录: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.测试工具,除了常规的现代浏览器,其次就是作为移动端的测试工具,我们这里采用的是Opera Mobile Emulator,和Chrome的移动Web测试工具。
3.分辨率:基础,使用1024x768,但某些特殊部分,比如响应式,需要大分辨率录制,会采用1440x900