bootstrap（一）栅格系统

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chiyueqi/p/4354957.html

文章标签：

#javascript #ViewUI

本文详细介绍了Bootstrap框架的基本概念、组成部分及其在网页设计中的应用。着重阐述了CSS样式、组件和插件的功能，并通过实例展示了如何利用Bootstrap进行布局、图片生成和文本对齐。此外，文章还提到了需要引入的JavaScript文件及其作用。

中文网：http://www.bootcss.com/

官网：http://v3.bootcss.com/

需要准备：离线手册和软件包

项目中引用bootstrap.min.js压缩版和bootstrap.min.css。bootstrap-theme.css 这个没用上。

官方包中需要在

js文件夹中加几个js：application.js holder.min.js 拿色素构成图片 highlight.min.js 高亮显示 jQuery.min.js 1.8.3。

bootstrap框架：

1、CSS样式

2、CSS组件

3、js插件

CSS样式：

1、栅格系统

2、排版

3、代码

4、表格

5、表单

6、按钮

7、图片

8、响应式图片

9、工具

页面大块布局：

.ccontainer

栅格系统：

一行分成12列

.row

.col-md-12

.col-xs-12

图片自动生成：

   <div class="container">
            <div class="row">
            
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="col-md-3">
                        <img src="holder.js/200x200" alt="" />
                    </div>
                    <div class="clearfix">
                    </div>
                </div>
</div>