bootstrap初探
发布时间:2015-10-31 12:00:19
bootstrap资源http://getbootstrap.comhttp://github.com/twbshttp://www.bootcss.combootstrap栅格系统容器:流体(container-fluid)、固定(container)分12列,阈值 分辨 ...
- bootstrap资源
- http://getbootstrap.com
- http://github.com/twbs
- http://www.bootcss.com
- bootstrap栅格系统
- 容器:流体(container-fluid)、固定(container)
- 分12列,阈值 分辨率>=1200,container固定尺寸为1170px,若阈值在992到1200之间container固定尺寸为970px,若分辨率在992以下778以上为750px,778px以下为自适应,没有固定的宽度值
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid;} </style> </head><body><!--<div > aaaaaaaaa</div>--><div class="container"> aaaaaaaaa</div></body> <script src='/images/loading.gif' data-original="js/jquery-2.1.3.js"></script> <script src='/images/loading.gif' data-original="js/bootstrap.js"></script></html>
- 不同分辨率下,设置col-lg表示超大分辨率,col-md是中等分辨率,col-sm是pad类似大小,col-xs是移动设备,如果设置了col-*那么会按照相应的分辨率显示,如果小于相应的分辨率则会变为几行,demo如下,可自行运行,以及对应demo图片
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.css"> <style> .container{ border:1px #000 solid; background: #CCC;} div[class*=col-] { color: white; border: 1px solid red;} </style> </head><body><!--div > <div >col-lg-1</div> <div >col-lg-1</div></div--><div class="container"> <div class="row"> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> <div class="col-lg-4">col-lg-4</div> </div> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> <div class="col-xs-4">col-xs-4</div> </div></div></body> <script src='/images/loading.gif' data-original="js/jquery-2.1.3.js"></script> <script src='/images/loading.gif' data-original="js/bootstrap.js"></script></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:bootstrap初探
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。