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

bootstrap(一)栅格系统

时间:2015-03-21 01:06:25      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:

中文网: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

图片自动生成:

<script src="dist/js/holder.min.js"></script>

 <img src="holder.js/100%x300" />

   <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>

 

bootstrap(一)栅格系统

标签:

原文地址:http://www.cnblogs.com/chiyueqi/p/4354957.html

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