码迷,mamicode.com
首页 > 其他好文 > 详细

Boostrap学习--官网文档

时间:2014-05-15 10:15:36      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:style   class   code   java   c   tar   

下载编译好的文件

快速开始:立即下载编译好的版本吧,里面已经包含了CSS、JS和图片文件了,而且所有文件已经经过了压缩处理。不过,文档和源码文件不包含哦。

下载Bootstrap

下载源码

从GitHub直接下载到的最新版的源码包括CSS、JavaScript的源文件,以及一份文档。

下载Bootstrap源码

在下载的压缩包中你可以看到如下的文件结构和内容。所有文件按逻辑进行分类存储,并且提供了编译和压缩两个版本的文件。

将下载的文件解压缩之后就可以看到如下的文件结构:

  bootstrap/├── css/├── bootstrap.css
  ├── bootstrap.min.css
  ├── js/├── bootstrap.js
  ├── bootstrap.min.js
  └── img/├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

这就是Bootstrap的基本结构:编译后的文件可以快速应用于任何web项目。我们提供了编译版的CSS和JS文件 (bootstrap.*),也同时提供了编译并压缩之后的CSS和JS文件 (bootstrap.min.*)。图片文件是使用ImageOptim 工具进行压缩的,这个工具是Mac平台上用于压缩PNG文件的一个app。

请注意,所有的JavaScript插件都依赖jQuery库。

Bootstrap中的HTML、CSS和JS适用于各类设备, 不过它们可以被概括成几个类别,请看本文档顶部的导航条。

文档章节

脚手架

全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。

基本CSS样式

常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。

组件

常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。

JavaScript插件

和组件类似,这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。

组件列表

组件库  JavaScript插件集 一同提供了以下组件元素。

  • 按钮组
  • 按钮下拉菜单
  • 用于导航的标签、pill、列表
  • 导航条
  • Labels
  • Badges
  • Page headers and hero unit
  • 缩略图
  • 警告对话框
  • 进度条
  • 模态对话框(Modals)
  • 下拉菜单(Dropdowns)
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前, 先来看看如何使用并定制它们。

为了把注意力完全放到使用Bootstrap上,我们先做一点儿课前准备。为了做到这一点,我们将利用一个基本的HTML模板, 其中包括我们在文件结构一章中提到的所有内容。

现在, 这里展示一个典型的HTML文件

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <metaname="viewport"content="width=device-width, initial-scale=1.0">
  6. </head>
  7. <body>
  8. <h1>Hello, world!</h1>
  9. <scriptsrc="http://code.jquery.com/jquery.js"></script>
  10. </body>
  11. </html>

为了使其成为一个Bootstrap模板, 需要包含相应的 CSS and JS 文件:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bootstrap 101 Template</title>
  5. <metaname="viewport"content="width=device-width, initial-scale=1.0">
  6. <!-- Bootstrap -->
  7. <linkhref="css/bootstrap.min.css"rel="stylesheet"media="screen">
  8. </head>
  9. <body>
  10. <h1>Hello, world!</h1>
  11. <scriptsrc="http://code.jquery.com/jquery.js"></script>
  12. <scriptsrc="js/bootstrap.min.js"></script>
  13. </body>
  14. </html>

设置成功! 加入这两个文件, 你就可以开始用Bootstrap开发任何网站和应用程序了。

希望下面的几个案例能引导大家在基础模版的基础上做发散性思维。我们鼓励大家参考下面的案例举一反三,而不要仅仅是机械式的照抄。

Boostrap学习--官网文档,布布扣,bubuko.com

Boostrap学习--官网文档

标签:style   class   code   java   c   tar   

原文地址:http://www.cnblogs.com/pxpxstudy/p/3728987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!