1.Bootstrap简介

Bootstrap，出自自 Twitter，是目前最受欢迎的前端框架。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的前端框架，它简洁灵活，使得 Web 开发更加快捷。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

2.为什么要使用Bootstrap框架？

在Bootstrap出现之前：

命名：重复、复杂、无意义（想个名字费劲）

样式：重复、冗余、不规范、不和谐

页面：错乱、不规范、不和谐

在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

3.Bootstrap框架源码下载

官方地址：https://getbootstrap.com

中文地址：http://www.bootcss.com/

我们使用V3版本的Bootstrap，我们点击下载链接之后，看到如下三个下载类型，我们下载的是 “ 用于生产环境的Bootstrap ”。

4.Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

5.Bootstrap搭建的环境

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

bootstrap-3.3.-dist/

├── css  // CSS文件

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

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件

│   ├── bootstrap-theme.min.css.map

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css  // 核心CSS样式压缩文件

│   └── bootstrap.min.css.map

├── fonts  // 字体文件

│   ├── glyphicons-halflings-regular.eot

│   ├── glyphicons-halflings-regular.svg

│   ├── glyphicons-halflings-regular.ttf

│   ├── glyphicons-halflings-regular.woff

│   └── glyphicons-halflings-regular.woff2

└── js  // JS文件

    ├── bootstrap.js

    ├── bootstrap.min.js  // 核心JS压缩文件

    └── npm.js

源码可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

　　例如：上面下载的Bootstrap版本是3.3.7，建议jQuery的版本应该是，3.2以上，或者最新的版本

　　jQuery版本下载： https://jquery.com/download/

6.HTML模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap 模板</title>

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <!-- 引入 Bootstrap -->

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->

      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->

      <!--[if lt IE 9]>

         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

      <![endif]-->

   </head>

   <body>

      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->

      <script src="https://code.jquery.com/jquery.js"></script>

      <!-- 包括所有已编译的插件 -->

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

   </body>

</html>

7.正式开发咯（各种组件的使用）

中文版本：https://v3.bootcss.com/getting-started/

因为版本：https://getbootstrap.com/docs/4.3/layout/overview/

前端开发工具合集：https://www.cnblogs.com/mashangsir/p/11285775.html

Bootstrap前端框架快速入门专题的更多相关文章

  1. 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】

    https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...

  2. BootStrap前端框架

    BootStrap前端框架 Bootstrap 教程:http://www.runoob.com/bootstrap/bootstrap-tutorial.html BpptStrap操作手册:htt ...

  3. CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架：

    19:29 2016/3/10CI框架如何在主目录application目录之外使用uploadify上传插件和bootstrap前端框架:项目主路径:F:\wamp\www\graduationPr ...

  4. bootCDN引用的bootstrap前端框架套件和示例

    这是bootCDN上引用的bootstrap前端框架套件,由多个框架组合而成,方便平时学习和测试使用.生产环境要仔细琢磨一下,不要用开发版,而要用生产版.bootCDN的地址是:https://www ...

  5. flask 框架快速入门

    flask 框架快速入门 搭建一个简易flask项目 首先使用 Pycharm创建flask项目 运行flask项目 1.使用Pycharm搭建flask项目 (如果Pycharm新建项目中未出现该图 ...

  6. struts2框架快速入门小案例

    struts2快速入门: index.jsp------>HelloAction--------->hello.jsp struts2流程 1.导入jar包 struts2的目录结构: a ...

  7. vue-element-admin框架快速入门

    年底了,最近公司也不是太忙,感觉今年互联网行业都遇到寒冬,不在是前两年像热的发烫的赛道.这几天完成公司项目系统的优化和升级,目前准备想开发一套前后端分离的系统.       现在java最新最火的技术 ...

  8. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  9. Scrapy框架-scrapy框架快速入门

    1.安装和文档 安装:通过pip install scrapy即可安装. Scrapy官方文档:http://doc.scrapy.org/en/latest Scrapy中文文档:http://sc ...

随机推荐

  1. OverFeat：基于卷积网络的集成识别、定位与检测

    摘要:我们提出了一个使用卷积网络进行分类.定位和检测的集成框架.我们展示了如何在ConvNet中有效地实现多尺度和滑动窗口方法.我们还介绍了一种新的深度学习方法,通过学习预测对象边界来定位.然后通过边 ...

  2. android 文件保存到应用和sd卡中

    <span style="font-size:18px;">1.权限添加 <uses-permission android:name="android. ...

  3. （67）c++后台开发

    还记得自己在学校的时候,一直都比较注重的是:编程语言+数据结构与算法.没错,对于一个在校的计算机专业的学生,这是很重要的方面.但是,这往往不够,或许是因为毕业前一直没有进入企业实习,以至于自己在毕业之 ...

  4. [BZOJ4237]稻草人：CDQ分治+单调栈

    分析 按\(y\)排序后CDQ分治,可以发现每个点可以影响的是\(x\)坐标的一段区间,可以使用扫描线+单调栈,在单调栈上二分即可解决,时间复杂度\(O(n \log^2 n)\). 通过归并排序可以 ...

  5. Spring Data Jpa (五)@Entity实例里面常用注解详解

    详细介绍javax.persistence下面的Entity中常用的注解. 虽然Spring Data JPA已经帮我们对数据的操作封装得很好了,约定大于配置思想,帮我们默认了很多东西.JPA(Jav ...

  6. oracle em启动问题

    这种情况出现的可能性是(1)主机IP地址改变,(2)主机名改变,(3)移植到全新的主机,(4)监听程序未启动,5)oracle服务也检查一下 关于orcl的启动: emctl start dbcons ...

  7. Mybaits二级缓存的使用与配置

    什么是延迟加载  resultMap中的association和collection标签具有延迟加载的功能. 延迟加载的意思是说,在关联查询时,利用延迟加载,先加载主信息.使用关联信息时再去加载关联信 ...

  8. JWT原理和使用

    jwt JSON Web Tokens,是一种开发的行业标准RFC 7519,用于安全的表示双方之间的声明.目前,jwt广泛的用在系统的用户认证方面,特别是前后端分离项目. 1.jwt认证流程 在项目 ...

  9. Jmeter接口测试系列之保存断言结果到文件

    在执行完接口测试用例后,我们需要将失败的用例结果统一保存到文件中,可以使用“断言结果”组件,并定制输出内容. 1.配置断言结果组件输出 (1.在文件名中配置需要保存的文件路径和文件名: (2.勾选仅日 ...

  10. Eclipse与Tomcat

    新进一个Web项目,有些小坎坷,于是引发了对于Eclipse和Tomcat的配置关系的思考. 首先提及一点当年的观点:Tomcat是一个容器,所有的功能都是以插件的形式放入其中:比如tomcat就是o ...