使用Bootstrap前端框架-栅格 要点

1.使用Bootstrap需要引入的css和js:

(1)bootstrap.min.js

(2)bootstrap.min.css

2.栅格系统需要通过<div class="container"> 进行承载

3.div相比于table更适合目前的开发，友好度较高

4.栅格参数

<768px(手机) >=768px(Pad) >=992px（小型显示器） >=1200px(宽屏显示器)
.col-xs- .col-sm- .col-md- .col-lg-
Auto ~62px ~81px ~97px

5.一个屏幕最多承载12个栅格

6.实例

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

    <script src="~/Scripts/jquery-2.1.4.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <style>

        [class*="col-md"] {

            padding-top:15px;

            padding-bottom:15px;

            background-color:#eee;

            background-color: rgba(86,61,124,.15);

            border:1px solid #ddd;

            border:1px solid rgba(86,61,124,.2);

        }

    </style>

</head>

<body>

 <div class="container">

     <div class="row">

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

         <div class="col-md-1">col-md-1</div>

     </div>

     <div class="row">

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

     </div>

     <div class="row">

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

         <div class="col-md-3">col-md-3</div>

     </div>

 </div>

</body>

</html>

效果：

实现栅栏偏移

   <div class="row">

         <div class="col-md-3 col-md-offset-3">col-md-3</div>

     </div>

嵌套栅格

<div class="row">

         <div class="col-md-9">

             one

             <div class="row">

                 <div class="col-md-8">

                     first

                 </div>

                 <div class="col-md-4">

                     two

                 </div>

             </div>

         </div>

     </div>

排序

     <div class="row">

         <div class="col-md-9">

             col-md-9

         </div>

         <div class="col-md-3">

             col-md-3

         </div>

     </div>

     <div class="row">

         <div class="col-md-9 col-md-push-3">

             col-md-9

         </div>

         <div class="col-md-3 col-md-pull-9">

             col-md-3

         </div>

     </div>

BootStrap学习------栅格的更多相关文章

  1. Bootstrap学习--栅格系统

    响应式布局页面:即同一套页面可以兼容不同分辨率的设备. Bootstrap依赖于栅格系统实现响应式布局,将一行均分为12个格子,可以指定元素占几个格子. 实现过程 1.定义容器,相当于之前的table ...

  2. bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

    学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...

  3. BootStrap学习之栅格布局

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的改变,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin用于生成更具语 ...

  4. BootStrap学习02栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. bootstrap 学习总结

    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.当前最新版本是3.2.0; 使用的第一步,可以直接复制官方的模版,另存为index ...

  6. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  7. bootstrap学习总结-css样式设计(二)

    首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...

  8. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  9. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

随机推荐

  1. [日常训练]school

    Description 众所周知,家离学校很远.于是,每天算准了时间出发,以保证能在上课铃响前 秒到达学校. 不幸的是,市最近正在修路.这就导致有些路可能无法通行,因而可能导致迟到. 不打算改变他的出 ...

  2. 【BZOJ-3931】网络吞吐量 最短路 + 最大流

    3931: [CQOI2015]网络吞吐量 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1228  Solved: 524[Submit][Stat ...

  3. codevs1183泥泞的道路

    题意:给定一张有向稠密图和通过每条边的时间和路程,问从1到n的路程/时间 最大为多少 正解:SPFA+二分答案 开始做的时候,想直接跑图论,后来发现好像不对(不然数据范围怎么这么小) 但是显然要用到图 ...

  4. python 内置函数和函数装饰器

    python内置函数 1.数学相关 abs(x) 取x绝对值 divmode(x,y) 取x除以y的商和余数,常用做分页,返回商和余数组成一个元组 pow(x,y[,z]) 取x的y次方 ,等同于x ...

  5. Request 对象

    Request 对象用于检索从浏览器向服务器发送的请求中的信息. 1.使用Request对象的Browser属性,可以访问HttpBrowserCapabilities属性获得当前正在使用哪种类型的浏 ...

  6. Delicious Retouch 3

    今天发现一个photoshop的插件:Delicious Retouch 3,磨皮的,特好用,各种磨皮方法的合集.今后都不敢说自己会磨皮了. 插件的界面 插件的使用教程 链接:http://pan.b ...

  7. 《JavaScript权威指南》学习笔记 第四天 数组

    昨天学习了js的对象,了解了js的原型链.在js里面万事万物皆对象,只不过一些原始类型要经过包装对象的包装才能暂时变为对象.数组的本质是什么呢?数组其实就是一组数,也就是链表.每个数只是这个链表上的一 ...

  8. virtualenv中ImportError: No module named django

    问题现象:在代码py文件中,import django 报错,但是在python shell中直接执行这个语句没错, 网上搜索了下,自己测试了下,确定原因是由于使用了python中的virtualen ...

  9. Docker入门教程（九）10个镜像相关的API

    Docker入门教程(九)10个镜像相关的API [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第九篇,重点介绍了镜像相关的Docker Remote ...

  10. 关于vs生成app错误提示，提醒Execution failed for task ':transformClassesWithDexForDebug'.

    昨天将vs和android SDK更新之后生成app之后发现app生成出错,报错如下: FAILURE: Build failed with an exception. * What went wro ...