源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

学习使用bootstrap3栅格系统

  • 时间:2020-01-28 12:00 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:学习使用bootstrap3栅格系统
[b]一、bootstrap开发环境搭建 [/b]1. 下载bootstrap, [url=http://www.bootcss.com/]http://www.bootcss.com/[/url] 2.  下载jquery, 通过IE直接访问[url=http://code.jquery.com/jquery-2.0.3.min.js]http://code.jquery.com/jquery-2.0.3.min.js[/url] 3. 在html页面中导入bootstrap与jquery的js,css文件,.viewport的<meta>标签,这个标签可以修改在大部分的移动设备上面的显示,加如 if lt IE 9...等是为了在ie9以下的兼容。 模板如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
 <div class="container">
  
 </div>
</body>
</html>
[b]二. 栅格系统[/b] 1. boostrap把桌面分隔成 由12行 * n 列的表格进行布局, 这是boostrap进行而已的核心。 2. .row 进行行级划分,必须包含在 .container下。 3.  col-xx-*进行列级划分,如下图 [img]http://files.jb51.net/file_images/article/201604/2016412152827599.png?2016312152838[/img]
<div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">4</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3">7</div>
   <div class="col-md-3">8</div>
  </div>
 </div>
[b]4.列偏移,[/b]通过 col-xx-offset-*来实现
 <div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">4</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3 col-md-offset-3">7</div>
  </div>
 </div>
[b]5. 列排序,[/b]能过.col-xx-push-* 和 .col-xx-pull-* 实现列的向左或向右排序
 <div class="container">
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3 col-md-push-3">3</div>
  </div>
  <div class="row">
   <div class="col-md-3">5</div>
   <div class="col-md-3">6</div>
   <div class="col-md-3 col-md-pull-2">7</div>
  </div>
 </div>
[b] 6. 列嵌套[/b],row嵌套在col中即可。
  <div class="row">
   <div class="col-md-3">1</div>
   <div class="col-md-3">2</div>
   <div class="col-md-3">3</div>
   <div class="col-md-3">
    <div class="row">
     <div class="col-md-1">5</div>
     <div class="col-md-1">6</div>
     <div class="col-md-1">7</div>
    </div>
   </div>
  </div>
如果大家还想深入学习,可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习,再为大家附两个精彩的专题:[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部