Download presentation
Presentation is loading. Please wait.
1
Bootstrap響應式網頁設計 (Responsive Web Design, RWD)
靜宜大學 資管系 楊子青
2
RWD Responsive Web Design 當一個網頁在不同的解析度下，會呈現不同的介面，也就是在不同的介面上適應。
3
Bootstrap Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub. In June 2014 Bootstrap was the No.1 project on GitHub!
4
2. Bootstrap The .container class provides a responsive fixed width container The .container-fluid class provides a full width container <!DOCTYPE html> <html> <head> <title>Bootstrap滿版實例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </head> <body> <div class="container-fluid"> <h1>我的第一個Bootstrap網頁</h1> <p>作者：楊子青</p> </div> </body> </html>
5
Responsive Images automatically adjust to fit the size of the screen.
.img-responsive class to the <img> tag. (applies display: block; and max-width: 100%; and height: auto; to the image:) <div class="container-fluid"> <h2>Image</h2> <p>The .img-responsive class makes the image scale nicely </p> <img class="img-responsive" src=" > </div>
6
Bootstrap Image Shapes
.img-rounded .img-circle <div class="container-fluid"> <h2>Image</h2> <p>The .img-responsive class makes the image scale nicely </p> <img class="img-responsive img-circle" src=" > </div>
7
3. Bootstrap Grids
8
Bootstrap Grids Three Equal Columns實例
<div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">sm4欄</div> <div class="col-sm-4" style="background-color:lavenderblush;"> sm4欄</div> <div class="col-sm-4" style="background-color:lavender;"> sm4欄</div> </div>
9
Bootstrap Grids Two Unequal Columns實例
<div class="container-fluid"> <h1>Hello World!</h1> <p>Resize the browser window to see the effect.</p> <div class="row"> <div class="col-sm-3" style="background-color:lavender;">sm3欄</div> <div class="col-sm-9" style="background-color:lavenderblush;"> sm9欄</div> </div>
10
4. Responsive Utilities to show and/or hide content by device via media queries. .visible-xs-* .visible-sm-* .visible-md-* .visible-lg-* .hidden-xs .hidden-sm .hidden-md .hidden-lg
11
Visible實例 <div class="container-fluid">
<p>請調整瀏覽器大小，觀看顯示效果</p> <h1 class="visible-xs">此文字顯示於極小螢幕</h1> <h1 class="visible-sm">此文字顯示於小螢幕</h1> <h1 class="visible-md">此文字顯示於中螢幕</h1> <h1 class="visible-lg">此文字顯示於大螢幕</h1> </div>
12
5. Bootstrap CSS Classes Background .bg-primary .bg-success .bg-info
.bg-warning .bg-danger <div class="container-fluid"> <h1 class="bg-primary">Hello World!</h1> <p class="bg-success">Resize the browser window to see the effect.</p> </div>
13
6. Bootstrap Navigation Bar
<nav class="navbar navbar-inverse""> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href=" </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href=" <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav>
14
7. Bootstrap Templates
Similar presentations
