你的位置:首页 > 软件开发 > 网页设计 > bootstrap初探

bootstrap初探

发布时间:2015-10-31 12:00:19
bootstrap资源http://getbootstrap.comhttp://github.com/twbshttp://www.bootcss.combootstrap栅格系统容器:流体(container-fluid)、固定(container)分12列,阈值 分辨 ...
  1. bootstrap资源
    • http://getbootstrap.com
    • http://github.com/twbs
    • http://www.bootcss.com
  2. 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>
  3. 不同分辨率下,设置col-lg表示超大分辨率,col-md是中等分辨率,col-sm是pad类似大小,col-xs是移动设备,如果设置了col-*那么会按照相应的分辨率显示,如果小于相应的分辨率则会变为几行,demo如下,可自行运行,以及对应demo图片
    • bootstrap初探bootstrap初探
      <!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 (#换成@)。

可能感兴趣文章

我的浏览记录