前  言

Bootstrap

什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。它简洁灵活，使得 Web 开发更加快捷。

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

一、Bootstrap特点

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

2、浏览器支持：所有的主流浏览器都支持 Bootstrap。IE、火狐、欧朋、谷歌、Safari....

　　　　

3、上手简单：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

4、响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

二、Bootstrap包含的内容

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

2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

3、组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

4、JavaScript：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

注意：想要自己自定需要的Bootstrap内容， Bootstrap支持定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

三、Bootstrap的使用和配置

1、Bootstrap的下载:

　　您可以从http://v3.bootcss.com/上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

2、Bootstrap的配置

Bootstrap的使用和其他的插件导入方式是一样的。Bootstrap是用Link标签导入和一些相关设置。附上导入代码和解释。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <!--让浏览器使用最新的IE内核进行渲染页面-->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!--设置视口宽度等于设备宽度，默认缩放比为1-->

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

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- 导入Bootstrap核心CSS文件 -->

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

    <!--

        ①<!--[if lt IE 9]> ..... <![endif]- -> 这一对标签用于检测当前浏览器的版本，所以这句话的作用是，当浏览器版本低于IE9执行

        ②html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

        ③respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

    -->

    <!--大于是：gt，小于是：lt-->

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

  </head>

  <body>

    <h1>你好，世界！</h1>

    <!-- 导入JQuery -->

    <script src="js/jquery-3.1.1.js"></script>

    <!--导入BootStrap的JS插件

        ①如果不使用BootStrap提供的JS插件功能，则这个JS文件无需导入

        ②BootStrap的JS插件功能依赖JQuery，因此这个JS必须在JQuery之后导入。

    -->

    <!-- Include all compiled plugins (below), or include individual files as needed -->

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

  </body>

</html>

运行结果：

四、Bootstrap的CSS样式

CSS的样式在各个浏览器上的浏览效果会有一些差异，为了各个浏览器的一致性。Bootstrap框架重新定义了一些CSS样式和一些新增的标签样式，让使用这个框架的网页在各个浏览器能呈现统一的效果，更方便大家的使用。下面我就为大家带来一些常见的CSS样式和使用，方便大家了解

Bootstrap框架的了解和使用（一）的更多相关文章

  1. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  2. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  3. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  4. BootStrap框架

    简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  7. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  8. bootstrap框架禁用谷歌字体

    bootstrap框架禁用谷歌字体 H5框架换字体.png

  9. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  10. 响应式设计，bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

随机推荐

  1. Oracle execute and call

    --execute和call的区别 -------------------------2014/01/14 EXEC is a sqlplus command that put its argumen ...

  2. 关于mysql中的数据查询—嵌套查询

    嵌套查询 一个SELECT  FROM  WHERE语句称为一个查询块. 嵌套查询:将一个查询块嵌套在另一个查询块的WHERE子句或者HAVING短语的条件中的查询. 注:子查询的SELECT语句中不 ...

  3. U3D 控件

    1.普通控件 GUI.Label() GUI.Button()等方法添加控件 bool clicked = GUI.Button() 当按钮单击时,返回true string ss = GUI.Tex ...

  4. Confluence DotNet API发布

    一.工程背景 公司所在的是工程检测行业,需要管理30个现场工程团队的检测报告,目前用的是Confluence知识管理系统,用于管理检测报告,未来可能还会基于检测报告做 自然语言分析处理. 百度百科是这 ...

  5. 隐马尔可夫模型(HMM)

    隐马尔可夫模型 (Hidden Markov Model,HMM) 最初由 L. E. Baum 和其它一些学者发表在一系列的统计学论文中,随后在语言识别,自然语言处理以及生物信息等领域体现了很大的价 ...

  6. C# 通过IEnumberable接口和IEnumerator接口实现自定义集合类型foreach功能

    1.IEnumerator和IEnumerable的作用 其实IEnumerator和IEnumerable的作用很简单,就是让除数组和集合之外的类型也能支持foreach循环,至于foreach循环 ...

  7. Maven详解（二）------ Maven的安装配置

    1.下载 Maven ①.官网下载地址:http://maven.apache.org/download.cgi ②.百度云盘:http://pan.baidu.com/s/1eS1NVYa 密码:9 ...

  8. C3P0数据库连接池使用中的问题

    java.io.FileNotFoundException: D:\javaStudy\javaee\.metadata\.plugins\org.eclipse.wst.server.core\tm ...

  9. 为shell布置陷阱：trap捕捉信号方法论

    本文目录: 1.1 信号说明 1.2 trap布置陷阱 1.3 布置完美陷阱必备知识 家里有老鼠,快消灭它!哎,又给跑了.老鼠这小东西跑那么快,想直接直接消灭它还真不那么容易.于是,老鼠药.老鼠夹子或 ...

  10. The Karting 2017ccpc网络赛 1008

    The Karting championship will be held on a straight road. There are N keypoints on the road. The pat ...