一，前言

个人不是专业从事前端开发，但在一个小公司里工作，作为有过这样经历的程序员都知道，开发一个网站或者是一个管理系统，程序员基本所有的事都包了，真是什么都要懂一点啊。而我个人也不怎么喜欢写CSS和JavaScript代码，但无奈总还是要写的。Bootstrap是在无意间看到的，响应式布局也在很早以前就了解了，也写过，可以说写一个好的响应式布局的网页会耗费很多的精力。Bootstrap用起来不错，只不过要按着它的规则来写，所以还是要学习一下。毕竟平板、手机普及度已经超出PC机，考虑移动设备，还是使用Bootstrap来用吧，不然写几个网站，费时费力。

Bootstrap 中文官网 http://www.bootcss.com/

二，什么是Bootstrap

我们看一下Bootstrap官网对其是怎么说明的：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

当然在网站的下面更给出了你为什么要用Bootstrap的原因：为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

所以，看看人家这说的，所以即使再怎么不想写前端，还是来了解一下吧，毕竟响应式布局是一种趋势。其实再看看网站给出的成功实例，你也会发现使用Bootstrap开发的网站的确是不错的。我还发现它给的网站，英文网都比较清爽、舒服而且显得大气，而中文网看着都有些小家子气。可能因为这个框架是老外写的，人家领悟了精髓。

三，下载Bootstrap

Bootstrap （当前版本 v3.3.4）提供以下3种方式帮你快速上手，你可以选择一个适合自己的下载

（1）用于开发环境的Bootstrap，这个版本是 编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

（2）Bootstrap源码，这个版本 包括 Less、JavaScript 、CSS和 字体文件的源码，并且带有文档

（3）Sass 这个版本是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。

对于我这样不是专门从事前端开发的，我也不知道第三种方式是什么意思，看样子挺高大上的，建议下载第二个版本，最起码人家有文档啊。

对于第一种和第二种方式，我们解压缩后都会找到js,css,fonts文件夹，这几个文件夹就包括了我们开发过程中要使用到的文件，在项目中引入就好。其实如果可以熟练使用Bootstrap了，可以不用下载了，可以直接使用Bootstrap为自己搭建的CDN加速服务，引用方式如下

Code<!-- 新 Bootstrap 核心 CSS 文件 -->

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

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

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

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

<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

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

<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

四，Bootstrap的使用

Bootstrap在文档中给了一个最简单的 Bootstrap 页面。如下

Code<!DOCTYPE html>

<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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

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

    <![endif]-->

  </head>

  <body>

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

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

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

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

  </body>

</html>

示例中给出了Bootstrap的使用，并且给出了在IE版本低于9的情况下要引入的文件

在某些情况下，我们不希望使用响应式布局，那么我们就要禁用响应式布局，文档也给了几种禁用响应式布局的方式，如下：

（1）移除 此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。

（2）通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去!important 。

（3）如果使用了导航条，需要移除所有导航条的折叠和展开行为。

（4）对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。 不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。

针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持。

五，对浏览器的支持

对各个厂商的浏览器以及版本的支持可以说是最TMD让人头疼的问题的，更可恶的是竟然还有那么多人用IE6。所以对浏览器的支持程度也是网站开发必须要考虑的，下面我们来看看Bootstrap对浏览器的支持怎么样吧

在 Windows 平台，Bootstrap支持 Internet Explorer 8-11。

Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表现也是很不错的，虽然我们不对其进行官方支持。

另外国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了！

将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面：

Code<meta name="renderer" content="webkit">

不过目前只有360浏览器支持这个标签。

以上只是Bootstrap的初识，在其Bootstrap给的文档中还有很多说明，在这里就不多说了。

以上参考了Bootstrap的官方文档，有什么不对之处，请指出，谢谢。

Bootstrap学习——起步的更多相关文章

  1. bootstrap学习起步篇：初识bootstrap之表单验证（二）

    学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...

  2. bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）

    目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...

  3. Bootstrap的起步

    -- Bootstrap的起步部分是对Bootstrap的基本了解,有些细节只是在后面的完善时候需要详细阅读. 最基本点还是Css 和组件部分,这部分应该先进行练习....高级阶段是Javascrip ...

  4. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  5. Bootstrap学习（3）

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  6. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  7. Bootstrap 学习（1）

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

  8. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  9. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

随机推荐

  1. Process.RedirectStandardInput

    获取或设置一个值,该值指示应用程序的输入是否从 Process.StandardInput 流中读取. 命名空间:System.Diagnostics程序集:System(在 system.dll 中 ...

  2. oracle稳定执行计划1

    稳定执行计划 1 策略: Oracle的sql 执行计划在一些场景下会发生变化,导致系统会发生不可知的情况,影响系统的稳定性,特别是关键业务的sql. 比如下面的场景: 统计信息过老,重新收集了统计信 ...

  3. bzoj2038

    网上大片的莫队算法题解,先orz一下莫队什么不会莫队?没事我来篇低端的分块大法好啊,我们知道对于区间[l,r]答案是S/P P是一下子可以算出来的,S=∑(pj-1)*pj/2 pj表示区间内颜色为j ...

  4. BZOJ1510: [POI2006]Kra-The Disks

    1510: [POI2006]Kra-The Disks Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 265  Solved: 157[Submit][ ...

  5. HDU-2539 点球大战

    点球大战 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  6. ASP.NET内部原理（HttpHandler和HttpModule）

    [IT168 技术文档]在以前的ASP时候,当请求一个*.asp页面文件的时候,这个HTTP请求首先会被一个名为 inetinfo.exe进程所截获,这个进程实际上就是www服务.截获之后它会将这个请 ...

  7. IIS 7.0, ASP.NET, pipelines, modules, handlers, and preconditions

    1.0 What is the IIS Pipeline Conceptually, the IIS pipeline is a state machine with the following st ...

  8. linux vi快捷键大全

    h或^h 向左移一个字符 j或^j或^n 向下移一行 k或^p 向上移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开头 W 移到下一个字的开头,忽 ...

  9. 容联云通讯_提供网络通话、视频通话、视频会议、云呼叫中心、IM等融合通讯能力开放平台。

    容联云通讯_提供网络通话.视频通话.视频会议.云呼叫中心.IM等融合通讯能力开放平台. undefined

  10. 一起来说 Vim 语

    作为一款古老而具有持久生命力的编辑器,vim 自有它的强大之处.很多人觉得 Vim 的学习曲线太陡峭了,为了能够把 Vim 用得风生水起,不得不记忆大量的命令.如果你是 Vim 新手,刚入门就开始面对 ...