首页 > 代码库 > 第二百三十一节,Bootstrap 介绍

第二百三十一节,Bootstrap 介绍

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 

 

二.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            css样式文件

│    ├── bootstrap.css.map          css映射文件

│    ├── bootstrap.min.css           css压缩样式文件

│    ├── bootstrap-theme.css         主题样式文件

│    ├── bootstrap-theme.css.map       主题映射文件

│    └── bootstrap-theme.min.css        主题压缩样式文件

├── js/

│    ├── bootstrap.js               js文件

│    ├── bootstrap.min.js            js压缩文件

  └──npm.js                服务器端引入js文件

└── fonts/                    跨平台字体文件

    ├── glyphicons-halflings-regular.eot

    ├── glyphicons-halflings-regular.svg

    ├── glyphicons-halflings-regular.ttf

    ├── glyphicons-halflings-regular.woff

    └── glyphicons-halflings-regular.woff2

第二百三十一节,Bootstrap 介绍