Bootstrap

Bootstrap中文网
在简书上看到的一篇不错的关于bootstrap的文章。
另一篇Bootstrap快速入门

Bootstrap.png

1.bootstrap概述

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

  • 为所有开发者、所有应用场景而设计。
  • Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

作为Web前端开发框架,Bootstrap集成了HTML标记、CSS样式以及JavaScript行为,使得开发人员、设计人员不再像过去周而复始地写模板、样式、交互效果,极大地节约了时间,提高了开发效率。它使用了最新的浏览器技术,可以提供精致的网页排版方式以及表单、按钮、表格、网格 栅格化、导航等诸多元素,轻松地创造令人愉快的设计效果。

下载

下载 Bootstrap
Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。

用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
下载 Bootstrap


Bootstrap 源码
Less、JavaScript 和 字体文件的源码,并且带有文档。需要 Less 编译器和一些设置工作
下载源码


Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目,用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。
下载 Sass 项目

通过 Bower 进行安装
通过Bower可以安装并管理 Bootstrap 的Less、CSS、JavaScript和字体文件。

$ bower install bootstrap
包含的内容

Bootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。

Bootstrap 插件全部依赖 jQuery
请注意,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Bootstrap 之前引入,就像在基本模版中所展示的一样。在bower.json文件中列出了 Bootstrap 所支持的 jQuery 版本。

预编译版
下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:

这是最基本的 Bootstrap 文件组织形式:未压缩版的文件可以在任意web项目中直接使用。我们同时提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*) 的 CSS 和 JS 文件。字体图标文件来自于 Glyphicons。

Bootstrap 源码
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件,并且还有 LESS、JavaScript 和文档的源码。具体来说,主要文件组织结构如下:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/ 
    └── examples/

less/js/fonts/目录分别包含了 CSS、JS 和字体图标的源码。dist/目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/包含了所有文档的源码文件,examples/目录是 Bootstrap 官方提供的实例工程。除了这些,其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

编译 CSS 和 JavaScript 文件

Bootstrap 使用Grunt作为编译系统,并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。

安装 Grunt

安装 Grunt 前,你需要首先下载并安装 node.js(npm 已经包含在内)。npm 是node packaged modules的简称,它的作用是基于 node.js 管理扩展包之间的依赖关系。
然后在命令行中输入以下命令:在全局环境中安装grunt-cli:
npm install -g grunt-cli
进入/bootstrap/根目录,然后执行npm install命令。npm 将读取package.json
文件并自动安装此文件中列出的所有被依赖的扩展包。
上述步骤完成后,你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。

可用的 Grunt 命令

grunt dist (仅编译 CSS 和 JavaScript 文件)
重新生成/dist/目录,并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户,大部分情况下你只需要执行这一个命令。
grunt watch(监测文件的改变,并运行指定的 Grunt 任务)
监测 Less 源码文件的改变,并自动重新将其编译为 CSS 文件。
grunt test(运行测试用例)
PhantomJS环境中运行JSHintQUnit自动化测试用例。
grunt docs(Build & test the docs assets)
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally viajekyll serve
grunt (重新构建所有内容并运行测试用例)
编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等,都需要Jekyll工具。这些只有在你对 Bootstrap 深度研究时才有用。
除错如果你在安装依赖包或者运行 Grunt 命令时遇到了问题,请首先删除 npm 自动生成的/node_modules/目录,然后,再次运行npm install命令。

2.基本模板

使用以下给出的这份超级简单的 HTML 模版,或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。
拷贝并粘贴下面给出的 HTML 代码,这就是一个最简单的 Bootstrap 页面了。

<!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">         
      <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.1/jquery.min.js"></script> 
   <!-- Include all compiled plugins (below), or include individual files as needed --> 
   <script src="js/bootstrap.min.js"></script> 
   </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • 第5章 深入了解:自定义Bootstrap 想象一下,一个网站,所有的网站都是用Bootstrap构建的,看起来和...
    海上名月阅读 864评论 1 4
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,847评论 3 184
  • 通过Bower安装并管理Bootstrap的Less、CSS、Javascript和字体文件$ bower ins...
    JasonQiao阅读 1,213评论 0 1
  • 第6章 优化Bootstrap 所以我们已经到了书的最后一章。我们真的走了很长的路,现在有能力使用Bootstra...
    海上名月阅读 958评论 1 13
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 4,933评论 0 66