使用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. bzoj1724: [Usaco2006 Nov]Fence Repair 切割木板

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  2. Webpack打包工具实时更新操作（启用观察者模式）

    可能存在这样的问题,每次修改完js/css文件之后,都要进行手动打包一下,浏览器上刷新一下. 那么我一般这样做: 1.安装Hbuilder,并启用边编辑边看的模式(其实这个是默认的). 2.启动Web ...

  3. hdu 5017 模拟退火

    题意:给出椭球面的立体解析式,要求椭球面上距离原点最近的点的距离 sol:这题要想推公式就

  4. SPOJ GSS2 Can you answer these queries II

    Time Limit: 1000MS   Memory Limit: 1572864KB   64bit IO Format: %lld & %llu Description Being a ...

  5. Linux Device Driver && Device File

    catalog . 设备驱动程序简介 . I/O体系结构 . 访问设备 . 与文件系统关联 . 字符设备操作 . 块设备操作 . 资源分配 . 总线系统 1. 设备驱动程序简介 设备驱动程序是内核的关 ...

  6. easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题

    做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...

  7. Mysql: ERROR 1030 (HY000): Got error 28 from storage engine

    今天帮同事解决一个问题的时候,遇到了下面的异常: ERROR 1030 (HY000): Got error 28 from storage engine 我们的数据库是mysql,我们的sql语句是 ...

  8. 企业开发中选择logback而不是log4j的理由

    不知道看到这篇文章的Java工程师有没有考虑过这个问题:为什么在企业开发中会选择logback来记录日志,而不是log4j呢? 如果你以前没有考虑过这个问题,那么现在如果让你考虑一下,你可能觉的会是因 ...

  9. （转载）最长递增子序列 O(NlogN)算法

    原博文:传送门 最长递增子序列(Longest Increasing Subsequence) 下面我们简记为 LIS. 定义d[k]:长度为k的上升子序列的最末元素,若有多个长度为k的上升子序列,则 ...

  10. 屠蛟之路_乘风破浪_FifthDay

    乘风破浪 一艘大船 (我们写的几千行代码) 一片汪洋 (软工耗费的时间) 一群骚年 (一不小心就火了) 为救一位公主 (吃自助餐) 选择去跋山涉水,乘风破浪(解决bug,解决冲突) 毫不畏惧 (韧性) ...