-
<meta name="viewport" content="width=device-width,initial-scale=1">初始化移動瀏覽顯示
width=device-width 寬度等于設備的寬度
initial-scale=1? 初始不縮放查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link href="http: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
? ? <div class="row">
? ? ? ? <div class="col-md-4"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-4"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-4"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-md-4"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-4"><p> </p></div>
? ? ? ? <div class="col-md-4"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-md-3 col-md-offset-3"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-3 col-md-offset-3"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? ? ??
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-md-6 col-md-offset-6"><p>慕課網是一家從事互聯網免費教學的網絡教育公司。秉承"開拓、創新、公平、分享"的精神，將互聯網特性全面的應用在教育領域，致力于為教育機構及求學者打造一站式互動在線教育品牌。</p></div>
? ? </div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
查看全部 -
<link href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"? rel="stylesheet">
.container {
? ? ?text-align:center;? ?
? ? }
<button class="btn btn-primary">我是按鈕</button>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
查看全部 -
出門v查看全部
-
吧比查看全部
-
1查看全部
-
制作彈出框
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- 彈出框頭部 -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<!--? 彈出框內容-->
<div class="modal-body">
</div>
<!-- 底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
查看全部 -
創建標簽頁
查看全部 -
柵格式系統-實現響應式布局：
在手機和平板設備上是從上到下堆疊，獨占一列的?
在桌面（>970px）屏幕設備上變為水平排列
查看全部 -
下拉菜單
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">特點 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
? ? <li><a href="#">Java</a></li>
? ? <li><a href="#">Jav</a></li>
? ? <li><a href="#">Ja</a></li>
? ? <li class="divider"></li>
? ? <li><a href="#">Java</a></li>
</ul>
</li>
查看全部 -
添加nav-bar-fixed類會讓導航條固定在頂部，固定的導航條會遮蓋住頁面的部分內容
解決方法：導航條默認高度50px，比如設置body{padding-top:70px;}
查看全部 -
What's bootstrap
查看全部 -
row必須包含在container中
查看全部 -
打開標簽頁
查看全部 -
固定的導航欄會遮住頂部的內容，這時通過為body標簽設置 padding-top:70px ; 就能解決。查看全部
舉報