BootStrap学习笔记-2

来源：互联网发布：android final数组编辑：程序博客网时间：2024/05/29 06:45
twoLesson - bootstrap 栅格系统与表格
<!DOCTYPE html><html lang="zh-CN"><head><title><span style="font-family: Arial, Helvetica, sans-serif;">BootStrap</span><span style="font-family: Arial, Helvetica, sans-serif;">-栅格系统与表格</title></span><meta charset = "utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  <style>.row{margin-bottom: 20px;}.row .row{margin-top: 10px;margin-bottom: 0;}/* [class*="col-"] 指类包含col-字符串的 */[class*="col-"]{padding-top: 15px;padding-bottom: 15px;background-color: #eee;background-color: rgba(86,61,124,.15);border: 1px solid #ddd;border: 1px solid rgba(86,61,124,.2);}</style></head><body><!-- container 容器，container-fluid最宽容器 --><!-- 栅格参数，针对于不同屏幕 <768px containerWidth=None(auto) columnWidth=auto .col-xs- 手机; >=768px containerWidth=750px columnWidth~62px .col-sm- pad; >=992px containerWidth=970px columnWidth~81px .col-md- 小型显示器;>1200px containerWidth=1170px columnWidth~97px .col-lg- 大型显示器;可嵌套，可偏移，可排序--><div class="container"><hr><p>注释： 栅格参数，针对于不同屏幕<br> <768px containerWidth=None(auto) columnWidth=auto .col-xs- 手机; <br>>=768px containerWidth=750px columnWidth~62px .col-sm- pad; <br>>=992px containerWidth=970px columnWidth~81px .col-md- 小型显示器;<br>>1200px containerWidth=1170px columnWidth~97px .col-lg- 大型显示器;<br>可嵌套，可偏移，可排序</p><div class="row"><div class="col-md-1">col-md-1</div><div class="col-md-1">col-md-2</div><div class="col-md-1">col-md-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><!-- 上限12，当第13将会换行 --><div class="col-md-1">col-md-13</div></div><div class="row"><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div><div class="col-xs-3">col-xs-3</div></div><hr><p>注释：模块偏移使用"col-*-offset-n"*表示对应屏幕，n表示偏移n个单位位置</p><div class="row"><div class="col-md-4 col-md-offset-4">col-xs-4</div></div><hr><p>注释：嵌套栅格</p><div class="row"><div class="col-sm-9">one<div class="row"><div class="col-xs-8">first</div><div class="col-xs-4">second</div></div></div></div><hr><p>注释：排序栅格，开始是4,8;排序后为8,4<br>对4 col-*-push-8<br>对8 col-*-pull-4<br></p><div class="row"><div class="col-xs-4 col-xs-push-8">col-xs-4</div><div class="col-xs-8 col-xs-pull-4">col-xs-8</div></div><hr></div></body></html>
0 0