[]下载[/]
下载编译好的文件
下载Bootstrap
http://www.bootcss.com/assets/bootstrap.zip
下载源码
下载Bootstrap源码https://github.com/twitter/bootstrap/zipball/master
[]文件结构[/]
在下载的压缩包中你可以看到如下的文件结构和内容。所有文件按逻辑进行分类存储,并且提供了编译和压缩两个版本的文件。
将下载的文件解压缩之后就可以看到如下的文件结构:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
这就是Bootstrap的基本结构
请注意,所有的JavaScript插件都依赖jQuery库。
[]包含了哪些东西[/]
脚手架
全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。
基本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
在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前, 先来看看如何使用并定制它们。
[]基本的HTML模版[/]
为了把注意力完全放到使用Bootstrap上,我们先做一点儿课前准备。为了做到这一点,我们将利用一个基本的HTML模板, 其中包括我们在文件结构一章中提到的所有内容。
现在, 这里展示一个典型的HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
为了使其成为一个Bootstrap模板, 需要包含相应的 CSS and JS 文件:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://wenda.wecenter.com/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
设置成功! 加入这两个文件, 你就可以开始用Bootstrap开发任何网站和应用程序了。
http://www.kuaipao8.com/?p=368
阅读全文
收起全文