bootstrap-frame.docVIP

下载好的bootstrap版本含有css、js、img 文件结构： bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png 文档章节： Bootstrap中的HTML、CSS和JS适用于各类设备： 脚手架：全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构 基本css样式：常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。 Glyphicons： 组件：常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。 js插件：和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。 组件列表： 组件库 和 JavaScript插件集 一同提供了以下组件元素。 ?按钮组 ?按钮下拉菜单 ?用于导航的标签、pill、列表 ?导航条 ?Labels ?Badges ?Page headers and hero unit ?缩略图 ?警告对话框 ?进度条 ?模态对话框(Modals) ?下拉菜单(Dropdowns) ?Tooltips ?Popovers ?Accordion ?Carousel ?Typeahead 在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前, 先来看看如何使用并定制它们。 （js文件引用使用script src、css文件引用使用link href） 为了使典型的html文件成为一个boolstrap没干开发任何网站和应用程序就必须设置加入下载的boolstrap的两个文件--js、css ============================================================================================================================================================== 脚手架： 全局设置： 必须使用HTML5文档类型!doctype htmlhtml lang =enhtml 栅格系统：对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格， 所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。 1.div class=row 2.div class=span4.../div 3.div class=span8.../div 4./div 上面的代码展示了 .span4 和 .span8 两列，两列的和总共是12个栅格。 div class=row div class=span6 align=right xiangqian div class=row div class=span1 align=right一份/div div class=span5 align=right五份/div /div /div /div 自我理解：列的嵌套。创建一个简单的容器，在类中定义span大小，最多为12列 底下进行分布的话，则每行span定义的大小之和应等于在最外层定义的数量 其实也就是控制比例的协调，在test.html中可是看到简单示例 流式嵌套布局： 和固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度。 1.div class=row-fluid 2. div class=span12 3. Fluid 12 4. div class=row-fluid 5. div class=span6 6. Fluid 6 7. div class=row-fluid 8. div class=span6Fluid 6/div 9. div class=span6Fluid 6/div 10. /div 1