前  言

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. Code Complete

    一.<代码大全>优先阅读参考顺序: 自学编程人:第07章 高质量的子程序 低年级学生:第11章 变量命名的力量 高年级学生:第08章 防御式编程 初级程序员:第18章 表驱动法 高级程序员 ...

  2. Java 架构师之路(2)

    一.技术 J2EE技术是架构师的基础.1.<Java编程思想> 初学Java时阅读这本书觉得好难,阅读第二遍时才觉得讲的很细致.这是一本不怕多读的好书. 2.<J2EE应用与BEA ...

  3. node中使用es6/7/8 --- 支持性与性能

    前言 这几年react.vue的快速发展,越来越多的前端开始讲es6的代码运用在项目中,因为我们可以通过babel进行转译为低版本的js以便于运行在所有浏览器中,import.export.let.箭 ...

  4. 准备 macvlan 环境 - 每天5分钟玩转 Docker 容器技术（54）

    除了 overlay,docker 还开发了另一个支持跨主机容器网络的 driver:macvlan. macvlan 本身是 linxu kernel 模块,其功能是允许在同一个物理网卡上配置多个 ...

  5. 【机器学习PAI实践二】人口普查统计

    一.背景 感谢大家关注玩转数据系列文章,我们希望通过在阿里云机器学习平台上提供demo数据并搭建相关的实验流程的方式来帮助大家学习如何通过算法来挖掘数据中的价值.本系列文章包含详细的实验流程以及相关的 ...

  6. 【Spring】的【bean】管理（XML配置文件）

    Bean实例化的三种方式 说明:通过配置文件创建对象就称为Bean实例化. 第一种:使用类的无参构造创建(重点) 实体类 package com.tyzr.ioc; public class User ...

  7. Linux内存详解

    --Linux内存详解 -----------------2014/05/24 Linux的内存上表现的不像windows那么直观,本文准备详细的介绍一下Linux的内存. 请看这下有linux命令f ...

  8. ELK搭建指南（linux及Windows）

    当前公司系统使用mongodb记录日志,最近想对日志做可视化分析,尝试了exceptionless,感觉扩展性不高,所以尝试搭建elk,过程如下: ELK核心由三部分组成: Elasticsearch ...

  9. C#多线程爬虫抓取免费代理IP

    这里用到一个HTML解析辅助类:HtmlAgilityPack,如果没有网上找一个增加到库里,这个插件有很多版本,如果你开发环境是使用VS2005就2.0的类库,VS2010就使用4.0,以此类推.. ...

  10. 【LCT】一步步地解释Link-cut Tree

    简介 Link-cut Tree,简称LCT. 干什么的?它是树链剖分的升级版,可以看做是动态的树剖. 树剖专攻静态树问题:LCT专攻动态树问题,因为此时的树剖面对动态树问题已经无能为力了(动态树问题 ...