Bootstrap布局之栅格系统详解_javascript技巧_第1页
Bootstrap布局之栅格系统详解_javascript技巧_第2页
Bootstrap布局之栅格系统详解_javascript技巧_第3页
Bootstrap布局之栅格系统详解_javascript技巧_第4页
Bootstrap布局之栅格系统详解_javascript技巧_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、bootstrap布局之栅格系统详解前些犬学习了 bootstrap,把其中的栅格系统整理出來，如有错误，欢迎指止。 概耍，栅格系统针对pc, pad,移动端开发出响应式web页面，根据不同屏幕分辨 率有针对不同的解决方法。(0. 1,屏幕设备尺寸大于1200px选择col-lg(0. 2.屏幕设备尺寸在970px到1200px选择col-md(0. 3.屏幕设备尺寸在768px到970px选择col-sm(0. 4.屏幕设备尺寸小于768px选择col-xs1栅格系统把页面分为12栏(最多12栏)，如下：<!doctype html><html lang=zzzh-cn，z

2、><head><meta charset二utf-8><mcta neinic二viewport"content二"width二device-width, initial-scale=l, maxinum-scale,user-scalab le=no，z><title> 栅格系统 </title><1 ink rel二stylesheet" href=z，l ibrary/bootstrap. min. css，z><stylc>aheight: 50px;border:

3、lpx red solid;background: pink;</style></head><body><di v cl ass二container a><div <div <div <di v <div <div <div <div <di v <div <divaz，>l</div> az/>l</div> a，>l</div> a>l/div> az，>l</div> az，>l<

4、/div> az/>l</div> a，>l</div> a>l/div> az，>l</div> az，>l</div><div class=，zrowz，>class 二"col-mdt class 二 col-mdt class二col-md-l class 二 col-mdt class=，col-md-l class 二"col-mdt class 二 col-mdt class二col-md-l class 二 col-mdt class=，col-md-l c

5、lass 二"colmdt<div class二"col-mdt a，z>l</div> </div><div class二row><div cl ass二col-md-3 a>3/div><div class二"col-md-9 az，>9</div> </div></div><script src=/zlibrary/jq js">/script><script src=/zlibrary/bootstrap.mi

6、n. js，zx/script></body></html>(2. 1, col-md-1为一栏，合计12栏布满一个"横排，md后尾随的数字为分配 的栏数，(col-lg, col-sm, col-xs 同理)3在不同屏幕分辨率的设备下，所呈现的页面为对应的栅格式栏数页面，从 而实现响应式布局，如下代码：<!doctype html><html lang二"zh-cn"><head><meta charset二utf-8><meta name二viewport"contc

7、nt=，width二device-width, initial-scale二 1, maxinum-scalc, uscr-scalab le=no"><title> 栅格系统 </title>link rel二stylesheet" hreflibrary/bootstrap. min. css><style>aheight: 50px;border: lpx red solid;background: pink;</style></head>body<div class二container，z

8、><di v class=/，row，><div class=z，col-lg-3 col-md-4 col-sm-6 col-xs-12 a，z>l</div><div class二"collg3 col-md-4 col-sm-6 col-xs-12 az，>l</div><div class二col<div clnss二col<div class二col<div class二col<div class二col<div class二col<div class二col<

9、div clnss二col<div class二col<div class二col </div>lg-3 lg-3 lg-3 lg-3 lg-3 lg-3 lg-3 lg-3 lg-3 lg-3col-md-4 col-md-4 col-md-4 col-md-4 col-md-4 col-md-4 col-md-4 col-md-4 col-md-4 col-md-4col-sm-6col-sm-6col-sm-6col-sm-6col-sm-6col-sm-6col-sm-6col-sm-6col-sm-6col-sm-6col-xs-12 col-xs-12 co

10、l-xs-12 col-xs-12 col-xs-12 col-xs-12 col-xs-12 col-xs-12 col-xs-12 col-xs-12az，>l</div> az/>l</div> a，>l</div> a，>l</div> a>l/div> az，>l</div> az，>l</div> az/>l</div> a，>l</div> a>l/div></div> <script src=/

11、zlibrary/jq. jsx/script><script src=z，l ibrary/bootstrap. min. js>/script></body></html>（3.1,上图代码表示在屏幕设备尺寸大于1200px时,一个横排有四大栏,一个 大栏有三小栏，小栏共计12栏，（3. 2,表示在屏幕设备尺寸在970px到1200px时（可以先看为浏览器缩小至这 个阶段时），一个横排有三大栏，一个大栏有四小栏，小栏共计12栏，（3.2,表示在屏幕设备尺寸在768px到970px时（可以先看为浏览器缩小至这 个阶段时），一个横排有二大栏，一个

12、大栏有六小栏，小栏共计12栏，（3.2,表示在屏幕设备尺寸小于768px时（可以先看为浏览器缩小至这个阶段 时），一个横排有一大栏，一个大栏有i 二小栏，小栏共计12栏，4、栅格系统里的列偏移，嵌套和交换位置 （4. 1,列偏移<di v class=/，row，><div class二"col-md-8 az，>8</div><div class二col一md一3 col-md-offset-1 a/z>3</div><!- 列向右偏移一位-></div>(4.2,嵌套<div class=，

13、/rowz，> <!- 嵌套-><div class二col-md-9 a" style=/padding:0; z，><div class二col-md-4 a，z></div><di v cl ass二col-md-4 ax/di v><div class=z，col-md-4 a，x/div> </div><div class二col-md-3 a，z>3</div> </div>(4.3,交换位置<div class=/zrowz，> <!- 交换位置-><!一 push,向<!一一 pull,向<div class二col-md-

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论