1. <script src="jquery.1.9.js"></script>
  2. <script src="js/bootstrap.min.js"></script>
  3. <link rel="stylesheet" href="css/bootstrap.min.css">
  4. <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  5.  
  6. <h2>Files Required</h2>
  7. <h3>1.jquery.js</h3>
  8. <h3>2.bootstrap.min.js</h3>
  9. <h3>3.bootstrap.min.css</h3>
  10. <h3>4.bootstrap-theme.min.css</h3>
  11.  
  12. <body>
  13.  
  14. <h3>Grid system </h3>
  15. <p>1.layout </p>
  16. <div class="row">
  17.     <div class="col-md-2 col-xs-2">
  18.         <p>col-md-2 is for desktop</p>
  19. 		<p>col-xd-2 is for phone</p>
  20.     </div>
  21.     <div class="col-md-4 col-xs-4">
  22.         <p>col-md-4 is for desktop</p>
  23. 		<p>col-xd-4 is for phone</p>
  24.     </div>
  25.     <div class="col-md-6 col-xs-6">
  26.         <p>col-md-6 is for desktop</p>
  27. 		<p>col-xd-6 is for phone</p>
  28.     </div>
  29. </div>
  30.  
  31. <p>2.offset</p>
  32. <div class="row">
  33.     <div class="col-md-4">
  34.         <p>col-md-4 is for desktop</p>
  35. 		<p>col-xd-4 is for phone</p>
  36.     </div>
  37.     <div class="col-md-4 col-offset-4">
  38.         <p>col-md-4 is for desktop</p>
  39. 		<p>col-xd-4 is for phone</p>
  40.     </div>
  41. </div>
  42.  
  43. <p>3.nested row sample</p>
  44. <div class="row">
  45. <div class="col-md-6">1<br/>1</div>
  46. <div class="col-md-6">
  47. <div class="col-md-12">2.1</div>
  48. <div class="col-md-12">2.2</div>
  49. </div>
  50.  
  51. </div>
  52.  
  53. <script >
  54.  
  55. $(document).ready(function(){
  56. $(".row").children("div").css("border","2 solid #fff000");
  57. $(".row-fluid").children("div").css("border","2 solid #fff000");
  58. });
  59.  
  60. </script>
  61.  
  62. </body>

版权声明：本文博主原创文章。博客，未经同意不得转载。

BootStrap -- Grid System的更多相关文章

  1. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  2. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  3. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  4. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  5. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  6. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

  7. Bootstrap 网格系统(Grid System)实例1

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  8. Bootstrap 网格系统(Grid System)

    Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

  9. Bootstrap3 Grid system原理及应用

    刚开始用Bootstrap的格子系统写布局的时候遇到了这样一个问题: 我的页面中有这样一个布局 我希望当屏幕的宽度小于他们俩宽度之和的时候,右边的部分会掉下来,他们垂直摆放. 而我用col-xs-6的 ...

随机推荐

  1. IOS开发之----四舍五入问题

    方法一: -(NSString *)notRounding:(float)price afterPoint:(int)position{ NSDecimalNumberHandler* roundin ...

  2. javascritp封装的类似java HashMap的类

    function Map(){ this.init(); }; //map的大小 Map.prototype.size = function(){ return this._size; }; //将数 ...

  3. 最经常使用的两种C++序列化方案的使用心得（protobuf和boost serialization）

    导读 1. 什么是序列化? 2. 为什么要序列化?优点在哪里? 3. C++对象序列化的四种方法 4. 最经常使用的两种序列化方案使用心得 正文 1. 什么是序列化? 程序猿在编写应用程序的时候往往须 ...

  4. hdu 5056Boring count

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=5056 题目大意:就是问在子串中每一个小写字母出现次数不超过k次的个数,注意子串是连续的子串.. . ...

  5. java与c/c++进行socket通信

    比如Server端只接收一个结构Employee,定义如下: struct UserInfo {   char UserName[20];   int UserId; }; struct Employ ...

  6. WPF自定义ListBox样式

    <!--竖向--> <Style x:Key="ListBoxStyle1" TargetType="{x:Type ListBox}"> ...

  7. 从SAE又回到BAE，感觉好轻松

    [前言] 我这个人总喜欢对同一类东西比較过来比較过去,用过来用过去. 比如曾经选择浏览器,从開始ie,到遨游,世界之窗.qq等等,用了有10款左右的浏览器,每款都用了不短时间, 终于固定在火狐+chr ...

  8. HDU 5074-Hatsune Miku（DP）

    Hatsune Miku Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) T ...

  9. iOS_16_开关控制器_modal_代码方法

    最后效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fill ...

  10. 核心ASP.NET

    1.用于Web应用程序的.NET Framework ASP.NET是.NET Framework的一部分,它可以在通过HTTP请求文档是在WEB服务器上动态创建它们,在.Net Framework中 ...