使用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. hive 函数 Cube

    最近在优化一个报表系统.leader 提示我可以用cube函数.在此记录一下使用: 1) cube 简称数据魔方. 可以实现hive多个任意维度的查询. cube(a,b,c)  首先会对(a,b,c ...

  2. Leetcode 200. number of Islands

    Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...

  3. 数组、ArraryList和List三者的区别

    在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. ...

  4. Beta版本——第二次冲刺博客

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...

  5. mysql 生成排名字段

    假设有test表,下图为表机构和数据,score表示积分.现在要查询积分排名为第几的id?? 查询语句 select id,score,(@rowno:=@rowno+1) as rowno from ...

  6. CSS--结构和层叠

    选择器的特殊性 特殊性值表述为4个部分,如0,0,0,0.具体特殊性如下所示: 举例说明一下: 通配符选择器的特殊性 通配符选择器其特殊性为0,0,0,0 !important重要性 大家都知道内联样 ...

  7. React Native 开发之 (05) flexbox布局

    一  flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...

  8. 通过命令行连接Wifi

    前提:无线网卡驱动正常安装 1.检查连接无线的接口 $ iwconfig 一般无线接口为wlan0 2.检查无线接口是否工作 $ sudo ip link set wlan0 up 3.扫描周围无线网 ...

  9. import_site

    http://kfd.me/ https://google.kfd.me/webhp?newwindow=1&safe=active http://googlebridge.com/searc ...

  10. JS-window对象集合

    知识点表格截图: