<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
<style>
.show-grid [class ^="col-"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
/*background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);*/
}
</style>
<script type="text/javascript">
</script>
</style>
<br/>
<body>
<b>col-md-*用法</b>
<div class="row show-grid">
<div class="col-xs-1">.col-xs-1</div>
<div class="col-xs-1">.col-xs-2</div>
<div class="col-xs-1">.col-xs-3</div>
<div class="col-md-1">.col-md-4</div>
<div class="col-md-1">.col-md-5</div>
<div class="col-md-1">.col-md-6</div>
<div class="col-md-1">.col-md-7</div>
<div class="col-md-1">.col-md-8</div>
<div class="col-md-1">.col-md-9</div>
<div class="col-md-1">.col-md-10</div>
<div class="col-md-1">.col-md-11</div>
<div class="col-md-1">.col-md-12</div>
</div>
<br/>
<b>col-lg-*用法</b>
<br/>
<div class="row show-grid">
<div class="col-lg-8">.col-lg-8</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<script>
</script>
</body>
</html>
分享到:
相关推荐
Bootstrap栅格系统
bootstrap栅格系统响应式布局,根据浏览器不同宽度进行自适应地样式响应调整,使pc、平板、手机三端不同风格完美融合~
主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下
bootstrap栅格系统.zip
任务3 Bootstrap栅格系统.doc
02.Bootstrap栅格系统原理.rar
03.Bootstrap栅格系统用法.rar
栅格系统 更好地帮助你学习前端
Bootstrap栅格源码
主要为大家详细介绍了关于Bootstrap栅格系统的使用和理解的学习记录,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Bootstrap栅格系统的简单介绍,供大家参考,具体内容如下 栅格系统:总共分为12个,超过12个会自动换行,可嵌套,嵌套也不可超过12个,且不会超过父栏 代码: <html> <head> <meta charset="utf-8"&...
下面小编就为大家分享一篇响应式框架Bootstrap栅格系统的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目。它有一份非常重要的 meta,用于设置屏幕和设备等宽...
Bootstrap3修改版 原有的12个栅格改为24个,方便控制多元素行
主要介绍了Bootstrap栅格系统使用方法及页面调整变形的解决方法,需要的朋友可以参考下
主要为大家详细介绍了Bootstrap栅格系统学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。这篇文章主要介绍了Bootstrap的核心——栅格系统的使用,需要的朋友可以参考下
主要为大家详细介绍了bootstrap栅格系统示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下