Upgrade to Pro — share decks privately, control downloads, hide ads and more …

前端框架利器——bootstrap.pdf

w3cplus
November 08, 2012
2.2k

 前端框架利器——bootstrap.pdf

w3cplus

November 08, 2012
Tweet

Transcript

  1. BootStrap文件结构 bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css

    │ ├── ─bootstrap-responsive.css │ ├── ─bootstrap-responsive.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png
  2. BootStrap安装 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <!-- Bootstrap

    --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
  3. Bootstrap 网格系统 固定网格 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div>

    流体网格 <div class="row-fluid"> <div class="span4">...</div> <div class="span8">...</div> </div>
  4. Bootstrap 布局 固定布局 <body> <div class="container"> ... </div> </body> <div

    class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <!--Body content--> </div> </div> </div> 流体布局
  5. BootStrap 响应式布局 http://www.w3cplus.com/search/node/responsive <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    /* Large desktop */ @media (min-width: 1200px) { ... } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... } /* Landscape phones and down */ @media (max-width: 480px) { ... }