Bootstrap是Twitter推出的一个用于前端开发的开源工具包，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架，不用请UI设计师也能开发出中规中矩的网页，并且最重要的是支持html5、css3移动端自适应，现在很多所谓的三合一五合一网站是基于bootstrap搭建的。

　　我们来看一个简单的例子

<!DOCTYPE html><!-- html5格式 -->

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

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

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

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

    <meta name="description" content="这是描述">

    <title>这是标题</title>

    <!-- 新 Bootstrap 核心 CSS 文件 cdn加速 -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  </head>

  <body>

    <!-- 导航栏 -->

    <nav class="navbar">

      <div class="container">

      </div>

    </nav>

    <!-- 主题内容 -->

    <div class="container">

    </div>

  </body>

</html>

　　笔记：

　　1.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。

　　2.Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta> 标签加入到你的页面中 IE=edge

　　3.Bootstrap 3 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。可选设置（viewport）设置 meta 属性为 user-scalable=no可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感 觉。

　　4.jquery用1.*版本，2.0版本不支持ie6/7/8

　　5.<nav>是bootstrap中内置的导航样式，pc端可以展示完整的一行，移动端会收缩到右上角的菜单menu中

　　6.内容主体div可以用container，有固定宽度并支持响应式布局的容器，container-fluid用于 100% 宽度

Bootstrap速学教程之简要介绍的更多相关文章

  1. React Native之React速学教程(中)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  2. React Native之React速学教程(上)

    概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解 ...

  3. React Native之React速学教程(下)

    概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习Reac ...

  4. ActiveMQ学习教程/1.简要介绍与安装

    ActiveMQ学习教程(一)——简要介绍与安装 一.名词: 1.JMS:即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的 ...

  5. 快看Sample代码，速学Swift语言（2）-基础介绍 快看Sample代码，速学Swift语言（1）-语法速览

    快看Sample代码,速学Swift语言(2)-基础介绍 Swift语言是一个新的编程语言,用于iOS, macOS, watchOS, 和 tvOS的开发,不过Swift很多部分内容,我们可以从C或 ...

  6. VB6 GDI+ 入门教程[1] GDI+介绍

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[1] GDI+介绍 2009 年 6 月 18 日 17 ...

  7. 快看Sample代码，速学Swift语言（1）-语法速览

    Swift是苹果推出的一个比较新的语言,它除了借鉴语言如C#.Java等内容外,好像还采用了很多JavaScript脚本里面的一些脚本语法,用起来感觉非常棒,作为一个使用C#多年的技术控,对这种比较超 ...

  8. LaTeX 编辑软件WinEdt使用简要介绍

    LaTeX 编辑软件WinEdt使用简要介绍   LaTeX 的起源非常牛逼,有一套书大家可能听说过<计算机程序设计艺术>,写了好几本.当然能在计算机方面写上艺术俩字的书恐怕不是我们一般人 ...

  9. 突破，Objective-C开发速学手册

    <突破,Objective-C开发速学手册> 基本信息 作者: 傅志辉 出版社:电子工业出版社 ISBN:9787121207426 上架时间:2013-7-12 出版日期:2013 年8 ...

随机推荐

  1. android的progressDialog 的使用。android数据异步加载 对话框提示

    在调用的Activity中定义一个全局的 progressDialog 点击按钮的时候调用下面这句 progressDialog = ProgressDialog.show(SearchActivit ...

  2. EntityFramework_MVC4中EF5 新手入门教程之六 ---6.通过 Entity Framework 更新关联数据

    在前面的教程中,您将显示相关的数据 :在本教程中,您会更新相关的数据.对于大多数的关系,这个目标是可以通过更新相应的外键字段来达到的.对于多对多关系,实体框架并不直接,暴露联接表,因此您必须显式添加和 ...

  3. JavaScript基础系列目录（2014.06.01~2014.06.08）

    下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E ...

  4. MVC——应用Ajax获取不到数据问题解答

    当我们使用控制器利用Ajax获取表单数据时,调试为null,这时看看你接受表单时定义的参数名字是否为action 其实不能起这个名字的,这个名字和控制器关键字冲突了 随便换个其它名字就好了,比如我起个 ...

  5. Objective-C Runtime(转)

    博主地址: http://yulingtianxia.com/blog/2014/11/05/objective-c-runtime/ 曾经觉得Objc特别方便上手,面对着 Cocoa 中大量 API ...

  6. PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数

    一.中文截取:mb_substr() mb_substr( $str, $start, $length, $encoding ) $str,需要截断的字符串 $start,截断开始处,起始处为0 $l ...

  7. myeclipse自动import

    不管包什么的 直接把代码全写出来 再按 ctrl + shift +o 这是自动导包的 前提是你写的代码是正确的

  8. NOI2005维修数列 splay

    好题,错了不知道多少遍.这题其他几个操作都是比较经典的,多了一个最大子序列的.这时候对于当前的区间,最大子序列,可能使左区间的最值,可能是右区间的最值,也可能是整个区间的.所以维护lx[],rx[], ...

  9. Java基础-final变量和普通变量的区别

    当用final作用于类的成员变量时,成员变量(注意是类的成员变量,局部变量只需要保证在使用之前被初始化赋值即可)必须在定义时或者构造器中进行初始化赋值,而且final变量一旦被初始化赋值之后,就不能再 ...

  10. SQL Server 2008 R2导出数据脚本的方法

    以前看到有些朋友说必须SQL Server 2008才能导出包含数据的脚本,后来仔细研究发现其实SQL Server 2008 R2也是可以的,只需在导出的时候在高级中设置一下即可. 1.首先在数据库 ...