DDR爱好者之家

学习使用bootstrap3栅格系统
站长资源 2024/11/29 佚名
11 1538
DDR爱好者之家 Design By 杰米

一、bootstrap开发环境搭建
1. 下载bootstrap, http://www.bootcss.com/
2.  下载jquery, 通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js
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="/UploadFiles/2021-04-02/html5shiv.js">


二. 栅格系统

1. boostrap把桌面分隔成 由12行 * n 列的表格进行布局， 这是boostrap进行而已的核心。

2. .row 进行行级划分，必须包含在 .container下。

3.  col-xx-*进行列级划分，如下图


学习使用bootstrap3栅格系统





<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>





4.列偏移，通过 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>





5. 列排序，能过.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>






 6. 列嵌套，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>





如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程
Bootstrap实战教程



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米