《bootstrap入门学习(1)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、BootStrap入门学习Part1Bootstrap简介什么是Bootstrap？Bootstrap是由Twitter的MarkOtto和JacobThornton两位设计师开发的。Bootstrap是2011年八月在GitHub上发布的开源产品。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap简洁灵活，使得Web开发更加快捷。Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。为什么使用B

2、ootstrap？移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持。所有的主流浏览器都支持。容易上手。只要你具备HTML、CSS、JS基础知识，就可以开始学习。响应式设计。Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机Bootstrap环境安装Bootstrap下载下载的中文地址：http://v3.bootcss.com/Bootstrap环境安装使用Bootstrap中文网提供的免费CDN加速服务Bootstrap中文网为Bootstrap专门构建了自己的免费CDN加

3、速服务。基于国内云厂商的CDN服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap中文网还对大量的前端开源工具库提供了CDN加速服务，请进入BootCDN(http://www.bootcdn.cn)主页查看更多可用的工具库。什么是CDN加速服务？CDN的全称是ContentDeliveryNetwork，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。Bootstrap基本模板Bootstrap模板注意事项Bo

4、otstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5的。Bootstrap文件当字符集设置，也要遵循HTML5的规范。设置IE浏览器兼容模式(X-UA-Compatible)。设置模板，适用于所有平台(viewport)。引入bootstrap的CSS主文件(bootstrap.min.css)。引入jQuery插件的主文件(jQuery)引入bootstrap的JS主文件(bootstrap.min.js)全局CSS样式——概述HTML5文档类型Bootstrap使用到的某些HTM

5、L元素和CSS属性需要将页面设置为HTML5文档类型。在你项目中的每个页面都要参照下面的格式进行设置。移动设备优先Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在之中添加viewport元数据标签。全局CSS样式——概述禁用移动设备上的缩放功能在移动设备浏览器上，通过为视口（viewport）设置meta属性为user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚

6、动屏幕，就能让你的网站看上去更像原生应用的感觉。布局容器Bootstrap需要为页面内容和栅格系统包裹一个.container容器。我们提供了两个作此用处的类。注意，由于padding等属性的原因，这两种容器类不能互相嵌套。.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。CSS全局样式——排版标题HTML中的所有标题标签，

到

均可使用。另外，还提供了.h1到.h6类，为的是给内联（inline）属

7、性的文本赋予标题的样式。在标题内还可以包含标签或赋予.small类的元素，可以用来标记副标题。页面主体Bootstrap将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予元素和所有段落元素。另外，

（段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin）。CSS全局样式——排版内联文本元素被删除的文本：HTML5删除文本、XHTML删除文本插入的文件：插入文本

8、>下划线的文本：下划线文本小号文本：或.small着重文本：斜体文本：文本对齐class=“text-left”文本左对齐class=“text-right”文本右对齐class=“text-center”文本中对齐class=“text-justify”文本两端对齐class=“text-