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

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css 后缀的文件，其中包含 min 字样的，是压缩版本，一般使用 这个；不包含的属于没有压缩的，可以学习了解 css 代码的文件；而 map 后缀的文件则是 css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

四．创建第一个页面

我们创建一个 HTML5 的页面，并且将 Bootstrap 的核心文件引入，然后测试是否正常 显示。

html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Bootstrap 介绍</title>

    <!--引入bootstrap样式文件-->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>

<body>

<!--创建一个按钮，执行两个class样式-->

<button class="btn btn-info">Bootstrap</button>

<!--引入jquery文件-->

<script src="jquery/jquery.min.js"></script>

<!--引入bootstrap里的js-->

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

五．学习的各项准备

1.测试工具，除了常规的现代浏览器，其次就是作为移动端的测试工具，我们这里采 用的是 Opera Mobile Emulator，和 Chrome 的移动 Web 测试工具。

2.所需基础，至少有 HTML5 第一季课程的基础，Bootstrap 内置了很多 jQuery 插件， 虽然使用起来比 jQuery 或 JS 本身要简单的多，但如果有 jQuery 和 JS 课程的基础，那学 习理解力就更加深入；

3.课程分辨率：基础课程，我们使用 1024 x 768 来录制，但某些特殊部分，比如响 应式和项目课程，需要大分辨率录制，会采用 1440 x 900 来录制。

第二百三十一节，Bootstrap 介绍的更多相关文章

  1. 第三百三十一节，web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令

    第三百三十一节,web爬虫讲解2—Scrapy框架爬虫—Scrapy安装—Scrapy指令 Scrapy框架安装 1.首先,终端执行命令升级pip: python -m pip install --u ...

  2. 第二百三十七节，Bootstrap图标菜单按钮组件

    Bootstrap图标菜单按钮组件 学习要点: 1.小图标组件 2.下拉菜单组件 3.按钮组组件 4.按钮式下拉菜单 本节课我们主要学习一下 Bootstrap 的三个组件功能:小图标组件.下拉菜单组 ...

  3. 第二百六十一节，Tornado框架模板引擎本质

    Tornado框架模板引擎本质 只需要了解一下即可 本篇就来详细的剖析模板处理的整个过程. 上图是返回给用户一个html文件的整个流程,较之前的Demo多了绿色流线的步骤,其实就是把[self.wri ...

  4. 第二百三十二节，Bootstrap排版样式

    Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一．页面排版 Boot ...

  5. 第二百二十一节，jQuery EasyUI，Form(表单)组件

    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...

  6. 第二百八十一节，MySQL数据库-SQL注入和pymysql模块防止SQL注入

    MySQL数据库-SQL注入和pymysql模块防止SQL注入 SQL注入就是通过SQL语句绕开程序判断,获取到数据库的内容 下面以一个简单的程序登录SQL注入举例: 正常登录 1.数据库有一张会员表 ...

  7. 第二百七十一节，Tornado框架-CSRF防止跨站post请求伪造

    Tornado框架-CSRF防止跨站post请求伪造 CSRF是什么 CSRF是用来在post请求时做请求验证的,防止跨站post请求伪造 当用户访问一个表单页面时,会自动在表单添加一个隐藏的inpu ...

  8. 第二百三十节，jQuery EasyUI，后台管理界面---后台管理

    jQuery EasyUI,后台管理界面---后台管理 一,admin.php,后台管理界面 <?php session_start(); if (!isset($_SESSION['admin ...

  9. 第二百三十一天 how can I 坚持

    哎,蛋疼的一天,一点破问题搞了一下午,还没搞利索. 他们要组织出去玩,我没有参加啊,随便找了个借口. 博客园的字体怎么变小了呢,看着好难受啊,昨天传照片传的? 睡觉.外边下着雨呢,喜欢下雨的夏天还有下 ...

随机推荐

  1. poj 2253 (dis最短路径)

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24979   Accepted: 8114 Descript ...

  2. tornado ThreadPoolExecutor

    import os import sys import time import tornado.httpserver import tornado.ioloop import tornado.opti ...

  3. hdu 4506 小明系列故事——师兄帮帮忙【幂取模乱搞】

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4506 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  4. Android性能优化的方方面面

    通常项目比较大的APP都面临着如下性能问题,APP启动慢.界面跳转慢.事件相应慢.滑动和动画卡顿.展现内容慢等,有的公司处理的很好,有的还有很大的优化空间,对于性能优化,怎么去做,我总结了一下性能优化 ...

  5. Android 歌词显示

    一.概述 项目中设计到歌词显示的问题,这一块之前没有涉及过,只是套用过一个开源的项目,效果还行,于是想到拿来稍作修改,以适应项目需求. 二.歌词控件 先来看下这个自定义控件写的歌词控件吧: publi ...

  6. 【DB2】文件导入导出常见命令总结 EXPORT IMPORT LOAD

    参考文献地址:https://blog.csdn.net/reaper1022/article/details/18601973 Db2 的数据迁移,最常用的就是导入导出功能,而导入导出的命令貌似简单 ...

  7. JAVA中的Session和Cookie【转】

    一.cookie机制和session机制的区别 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于才服务器端保持状态的 ...

  8. O2O研究系列——O2O知识思维导图整理

    本篇文章对O2O电子商务模式的常规知识点,使用思维导图的方式整理,表达的形式是名词纲领性的方式, 不会在图中详细说明各个点. 通过这个图研究O2O模式时,可以系统的对各个业务点进行更深入的研究,避免有 ...

  9. jQuery 树型菜单插件(Treeview)

    jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单.试用于一些菜单的导航,支持基于 cookie 的持久性菜单

  10. Git使用总结 Asp.net生命周期与Http协议 托管代码与非托管代码的区别 通过IEnumerable接口遍历数据 依赖注入与控制反转 C#多线程——优先级 AutoFac容器初步 C#特性详解 C#特性详解 WPF 可触摸移动的ScrollViewer控件 .NET（C#）能开发出什么样的APP？盘点那些通过Smobiler开发的移动应用

    一,原理 首先,我们要明白Git是什么,它是一个管理工具或软件,用来管理什么的呢?当然是在软件开发过程中管理软件或者文件的不同版本的工具,一些作家也可以用这个管理自己创作的文本文件,由Linus开发的 ...