bootstrap栅格系统示例代码分享

 更新时间:2017年05月22日 14:49:57   作者:YY小苹果   我要评论
这篇文章主要为大家详细介绍了bootstrap栅格系统示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了bootstrap栅格系统的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>栅格系统</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
 <link rel="stylesheet" href="css/main.css"> 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
 <style> 
  .a{ 
   background-color: #ccc; 
   height: 50px; 
   border: 1px solid #333; 
  } 
 </style> 
</head> 
<body> 
<!--1170px--> 
<div class="container"> 
 <div class="row"> 
  <div class="col-md-1 a">1</div> 
  <div class="col-md-1 a">2</div> 
  <div class="col-md-1 a">3</div> 
  <div class="col-md-1 a">4</div> 
  <div class="col-md-1 a">5</div> 
  <div class="col-md-1 a">6</div> 
  <div class="col-md-1 a">7</div> 
  <div class="col-md-1 a">8</div> 
  <div class="col-md-1 a">9</div> 
  <div class="col-md-1 a">10</div> 
  <div class="col-md-1 a">11</div> 
  <div class="col-md-1 a">12</div> 
 </div> 
 <div class="row"> 
  <div class="col-md-9 a">9</div> 
  <div class="col-md-3 a">3</div> 
 </div> 
</div> 
<div class="container"> 
 <div class="row"> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
  <div class="col-lg-3 col-md-4 a">a</div> 
 </div> 
</div> 
<!--嵌套 
style="padding: 0",因为栅格系统默认有15px 的padding--> 
<div class="container"> 
 <div class="row"> 
  <div class="col-lg-9 a" style="padding: 0"> 
   <div class="col-lg-4 a">a</div> 
   <div class="col-lg-4 a">a</div> 
   <div class="col-lg-4 a">a</div> 
  </div> 
  <div class="col-lg-3 a">a</div> 
 </div> 
</div> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
</html> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • JavaScript中的排序算法代码

    JavaScript中的排序算法代码

    排序算法的理解算是程序员的基本功之一了,其功能是对一个数据元素集合或序列重新排列成一个按数据元素某个项值有序的序列。
    2011-02-02
  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插

    本文给大家介绍基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • ES6的异步终极解决方案分享

    ES6的异步终极解决方案分享

    这篇文章主要给大家介绍了关于ES6的异步终极解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用ES6具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • javascript封装 Cookie 应用接口

    javascript封装 Cookie 应用接口

    本文通过几个简单的示例向大家展示了javascript封装cookie的注意事项及操作方法,非常的简单实用,最后附上一则具体实例,有需要的小火把可以参考下。
    2015-08-08
  • Javascript前端UI框架Kit使用指南之kitjs事件管理

    Javascript前端UI框架Kit使用指南之kitjs事件管理

    本文详细介绍了Kitjs的事件管理功能,包括普通的Dom事件、Kit如何解决问题、代码解析、注销事件等。需要的朋友可以参考下。
    2014-11-11
  • 纯JS实现旋转图片3D展示效果

    纯JS实现旋转图片3D展示效果

    本文给大家分享的是纯js实现的类似flash里的图片环绕旋转效果,非常炫酷,有需要的小伙伴可以参考下。
    2015-04-04
  • JS实现随机生成10个手机号的方法示例

    JS实现随机生成10个手机号的方法示例

    这篇文章主要介绍了JS实现随机生成10个手机号的方法,涉及javascript数值运算与随机数操作相关使用技巧,需要的朋友可以参考下
    2018-12-12
  • 微信小程序云开发之云函数详解

    微信小程序云开发之云函数详解

    这篇文章主要介绍了微信小程序云开发之云函数的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • js实现抽奖效果

    js实现抽奖效果

    本文主要介绍了js实现抽奖效果的方法实例。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • smartupload实现文件上传时获取表单数据(推荐)

    smartupload实现文件上传时获取表单数据(推荐)

    这篇文章主要介绍了smartupload实现文件上传时获取表单数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12

最新评论