前  言

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. vue指令v-html示例解析

    更新元素的innerHTML,不会作为vue模板编译,可用组件来代替. 在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 xss攻击.只在可信内容上使用 v-html,永不用在用户提交的内容 ...

  2. 浅谈odoo 后台与前端文件（附件）的存储与下载

    odoo 后台与前端文件(附件)存储与下载实现 笔记太多了很乱,想想还是写博客的好,慢慢更 当然了,前提是你已经配好了odoo开发环境 一.odoo后台界面实现附件的上传和下载 1).在应用中搜索下图 ...

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

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

  4. 横截面数据分类——基于R

    参考资料: <复杂数据统计方法>&网络&帮助文件 适用情况:在因变量为分类变量而自变量含有多个分类变量或分类变量水平较多的情况. 一. (一)概论和例子 数据来源:http ...

  5. 【LeetCode】数组-4(581)-给未排序数组中子数组排序使得整个数组排序 找到这个最小的子数组

    这道题目感觉并不太容易,也并没有想到什么比较好的方法,看来还是积累太少. 思路一:两个指针向后遍历,分别记下造成逆序的最小和最大下标位置 优化的暴力解法(很精妙,面试的时候可以说出来) 思想:两个指针 ...

  6. 如何正确地修改.data和.item文件的‘utf-8’格式

    问题:有时候,我们在做分类信息提取的时候文件的格式可能不是我们想要的.txt文件的格式,如何进行修改? 解决:(1)将文件复制一份,并保存为.txt的格式(2)将复制之后的文件通过另存为的方式更改为u ...

  7. 神经网络与深度学习笔记 Chapter 3.

    交叉熵 交叉熵是用于解决使用二次代价函数时当单个神经元接近饱和的时候对权重和bias权重学习的影响.这个公式可以看出,当神经元饱和的时候,sigma的偏导接近于0,w的学习也会变小.但是应用交叉熵作为 ...

  8. MySql分库分表总结(转)

    为什么要分库分表 可以用说用到MySQL的地方,只要数据量一大, 马上就会遇到一个问题,要分库分表. 这里引用一个问题为什么要分库分表呢?MySQL处理不了大的表吗? 其实是可以处理的大表的.我所经历 ...

  9. VMware Workstation 12 Pro 之安装林耐斯Debian X64系统

    VMware Workstation 12 Pro 之安装林耐斯Debian X64系统... --------------------- 看到它的LOGO就很喜欢: ---------------- ...

  10. 第二章 [分布式CMS]

    结构系统:定义的后台 资源云:存在静态资源文件 文档云:文章内容 工具服务:模板.,公共类 Web服务:处理一下数据交互 为什么要做分布式了? 说实话,我也不太清楚,网上说在性能方面比较好,我的理解是 ...