-
<meta name="viewport" content="width=device-width,initial-scale=1">初始化移動瀏覽顯示
width=device-width 寬度等于設(shè)備的寬度
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>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-4"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-4"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-md-4"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-4"><p> </p></div>
? ? ? ? <div class="col-md-4"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-md-3 col-md-offset-3"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? ? ? <div class="col-md-3 col-md-offset-3"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</p></div>
? ? ? ??
? ? </div>
? ? <div class="row">
? ? ? ? <div class="col-md-6 col-md-offset-6"><p>慕課網(wǎng)是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承"開拓、創(chuàng)新、公平、分享"的精神，將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動在線教育品牌。</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>
<!--? 彈出框內(nèi)容-->
<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>
查看全部 -
創(chuàng)建標(biāo)簽頁
查看全部 -
柵格式系統(tǒng)-實(shí)現(xiàn)響應(yīng)式布局：
在手機(jī)和平板設(shè)備上是從上到下堆疊，獨(dú)占一列的?
在桌面（>970px）屏幕設(shè)備上變?yōu)樗脚帕?/p>
查看全部 -
下拉菜單
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">特點(diǎn) <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類會讓導(dǎo)航條固定在頂部，固定的導(dǎo)航條會遮蓋住頁面的部分內(nèi)容
解決方法：導(dǎo)航條默認(rèn)高度50px，比如設(shè)置body{padding-top:70px;}
查看全部 -
What's bootstrap
查看全部 -
row必須包含在container中
查看全部 -
打開標(biāo)簽頁
查看全部 -
固定的導(dǎo)航欄會遮住頂部的內(nèi)容，這時通過為body標(biāo)簽設(shè)置 padding-top:70px ; 就能解決。查看全部
舉報