您所在的位置:小祥子 » 编程 » JavaScript » 正文

Bootstrap学习——起步

时间:2015-04-30 编辑:yuanking 来源:本站整理

一,前言

个人不是专业从事前端开发,但在一个小公司里工作,作为有过这样经历的程序员都知道,开发一个网站或者是一个管理系统,程序员基本所有的事都包了,真是什么都要懂一点啊。而我个人也不怎么喜欢写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的官方文档,有什么不对之处,请指出,谢谢。

关键词:学习