bootstrap框架怎么用[编辑]

---

一、bootstrap框架介绍

Bootstrap是一个非常优秀的前端UI框架，一个轻量级的UI前端框架，是基于HTML+CSS+JavaScript的框架。

二、bootstrap介绍

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的msnBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

三、bootstrap的构成

1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。包括：下拉菜单，按钮组，按钮下拉菜单，导航，导航条。

3、组件： 用于创建图像、下拉菜单、导航、警告框、弹出框等等。

4、JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。包括：对话框，标签页，流动条，弹出框。

四、bootstrap版本

目前使用较广的是版本2和3，其中2的最新版本的是2.3.2，3的最新版本是3.3.7。

五、bootstrap框架使用

（1）下载 Bootstrap

从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。其中有两种情况：一种是Download Bootstrap：下载 Bootstrap。可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。另外一种是Download Source：下载源代码。点击该按钮，可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

（2）解压

下载完成后解压，会有三个文件夹分别是css、font、js，里面带min的文件都是压缩后的文件，在网站上线的时候用，其他未压缩的文件可以在平时开发的时候用。

（3）建立html文件

使用Dreamweaver CS6编辑，下载jQuery放到bootstrap中的js目录中。在bootstrap的根目录下新建一个demo.html文件，编辑demo.html文件，添加对bootstrap框架中css和js的引用，写好源码，在写源码时，要注意格式，编辑的规范。bootstrap框架的基本使用架构，即可在html中加载使用。最后可以在body标签内应用Bootstrap相关的class。

六、注意

可注册twitter账号，登陆后，可关注相关网站，了解更多相关的知识，方便操作使用。

 

 

秀友百科词条内容均由网友提供，仅供参考。如发现词条内容有问题，请联系管理员。