使用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. 第6届蓝桥杯javaA组第7题，牌型种数，一道简单的题带来的思考

    题目: 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得到 ...

  2. The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 51716619E084DAB9

    sudo su gpg --keyserver keyserver.ubuntu.com --recv-keys 51716619E084DAB9 gpg -a --export 51716619E0 ...

  3. 【poj1655】Balancing Act

    http://poj.org/problem?id=1655 (题目链接) 题意 给出一棵树,求树上一点使得使得删除一点后该树的最大子树最小. solution 树的重心裸题. 随意取一点作为根节点, ...

  4. bzoj1102: [POI2007]山峰和山谷Grz

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  5. HDU2222 Keywords Search

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  6. 负载均衡下的资源文件配置/多站点下的资源文件夹共享（Windows IIS）

    前言: 负载均衡用的是NLB,微软的方案不太靠谱,举个例子吧,AB两台服务器负载出C,如果用户访问访问C之后分配的是A,那么如果A挂了,是不会自动切换到B的.据说后来还有一种NLB的方案可以实现,也不 ...

  7. Multiples of 3 and 5

    #include<stdio.h> int main(void){ int n1, n2,n3; n1=333*(3+999)/2; n2=199*(5+995)/2; n3=66*(15 ...

  8. 常用sql语句整理[SQL Server]

    1. 存储过程 CREATE PROCEDURE [dbo].[bbs_move_createtopic] @fid smallint, @iconid smallint, @curtid INT O ...

  9. PHPstorm激活

    最近想学习一下PHP 于是下载了很不错的phpstorm  但这老外的工具是要购买正版的 所以就搜了一下破解激活的教程 发现现在网上的在线破解在2016.2版本里面大多已被封杀 尝试了本地破解也发现大 ...

  10. 利用 Django REST framework 编写 RESTful API

    利用 Django REST framework 编写 RESTful API Updateat 2015/12/3: 增加 filter 最近在玩 Django,不得不说 rest_framewor ...