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. event.stopPropagation()和event.preventDefault()，return false的区别

    我写公司的官网遇到一个问题,轮播图的上一层有一块内容,用鼠标拖动那块内容的时候下一层的轮播图也会跟着拖动,而上面的那层的内容是不会动的,我想这就是冒泡事件在作祟了吧 跟冒泡事件相关的,我想到三个: 1 ...

  2. JMS学习十一(ActiveMQ Consumer高级特性之独有消费者（Exclusive Consumer）)

    一.简介 Queue中的消息是按照顺序被分发到consumers的.然而,当你有多个consumers同时从相同的queue中提取消息时, 你将失去这个保证.因为这些消息是被多个线程并发的处理.有的时 ...

  3. python-opencv学习第一章

    一.opencv读入图像 retval=cv2.imread(文件名[,显示控制参数]) 常用三个参数如下 CV. IMREAD_UNCHANGED 不改变原先什么样子现在就是什么样子 CV. IMR ...

  4. kibana花式查询

    在kibana提供的界面上进行操作. POST /school/student/_bulk{ "index": { "_id": 1 }}{ "nam ...

  5. SVG相关学习(一)SVG基础

    SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" heigh ...

  6. 使用http-server在本地搭建一个HTTP服务器

    安装http-server 在控制台中输入 npm install http-server -g 进行全局安装 共享资源 进入需要共享资源的目录,比如 D:\,然后在控制台中输入 http-serve ...

  7. 第四周学习总结&实验报告

    学习总结; String类: 1.方法只会开辟一块堆内存空间,且会自动保存在对象池中以供下次重复使用: 2方法会开辟两块堆内存空间,其中一块会成为垃圾空间. 1."=="比的是地址 ...

  8. 2017年广东省ACM省赛（GDCPC-2017）总结

    今年第一次参加省赛(也是第一次参加这类比赛),既有点惊喜又有点紧张,前一晚没有怎么睡好,有点怕今年打铁,虽然说大一打铁也说的过去,可是谁也不想打铁. 一开始比赛的时候我一开始没有去看题,而是把我们队的 ...

  9. 关于Qt 构建套件(Kit) 编译器 自动识别不正确 不能修改的问题

    当系统内有多个Qt的版本的时候,QtCreater会自动识别出 编译器,Qt版本,和构建套件(Kit),但是有时候会发现,识别出来的路径不对,而且不能修改. 当出现这是问题的时候,可以到 qtcrea ...

  10. Python 写 ACM 题目的一些技巧

    目录 输入输出 input() 输入 split() 用于输入 strip() 输入清理 print() 输入 sort 排序 输入输出 input() 输入 Python3 中 input() 函数 ...