image.png
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="renderer" content="webkit"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
.container布局容器
.row 一橫
默認12快
image.png
Alternate elements
在 HTML5 中可以放心使用 <b> 和 <i> 標簽。
<b> 用于高亮單詞或短語，不帶有任何著重的意味；而 <i> 標簽主要用于發言、技術詞匯等。
image.png
image.png
標題和段落樣式
<div class="container">
<h1 class="page-header">Bootstrap前端</h1>
<p class="lead">
sadasjdijiwjjjjjjjjajdawwwijjjjjjjjjjjjjjjjjjjjjj
sadasjdijiwjjjjjjjjajdawwwijjjjjjjjjjjjjjjjjjjjjj
sadasjdijiwjjjjjjjjajdawwwijjjjjjjjjjjjjjjjjjjjjj
</p>
</div>
<div class="container">
<pre>
<code>print("Hello Python")</code>
for i in range(10):
print(i)
i+=1
</pre>
按鍵盤 <kbd>Ctrl+shift</kbd> biib <var>BIBs</var>
</p>
</div>
表格：
<div class="container">
<h1 class="page-header">Bootstrap <small>bibi</small></h1>
<table class="table table-striped table-hover table-bordered">
<tr>
<th>id</th>
<th>用戶名</th>
<th>密碼</th>
</tr>
<tr>
<td>001</td>
<td>admin</td>
<td>admin</td>
</tr>
<tr>
<td>001</td>
<td>admin</td>
<td>admin</td>
</tr>
<tr>
<td>001</td>
<td>admin</td>
<td>admin</td>
</tr>
<tr>
<td>001</td>
<td>admin</td>
<td>admin</td>
</tr>
</table>
</div>
響應式布局
圖片：
img-responsive
表格:
table-responsive
下拉菜單：
<div class="container ">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdown" data-toggle="dropdown">更多課程 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="">biib</a></li>
<li><a href="">biib</a></li>
<li><a href="">biib</a></li>
<li><a href="">biib</a></li>
</ul>
</div>
</div>
表單：
<div class="container">
<h1 class="page-header">Bootstarp <small>bibib</small></h1>
<div class="col-md-4">
<form action="#">
</form>
<div class="form-group">
<label for="">用戶名：</label>
<input type="text" class="form-control" placeholder="place input name"/>
</div>
<div class="form-group">
<label for="">密碼：</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="">留言:</label>
<textarea name="" rows="5" cols="15" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="">城市：</label>
<select name="" class="form-control">
<option value="">bibi</option>
<option value="">bibi</option>
<option value="">bibi</option>
<option value="">bibi</option>
</select>
</div>
<div class="form-group">
<label for="">文件上穿</label>
<input type="file" name="" id="" value="" class="form-control" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-group" value="提交" />
<input type="reset" class="btn btn-danger" value="重做" />
</div>
</form>
</div>
</div>
導航：
<div class="container">
<h1 class="page-header">Bootstrap <small>標簽</small></h1>
<div class="row">
<div class="col-md-3">
<ul class="nav nav-stacked nav-pills ">
<li class="active"><!--描述：激活-->
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">MIMI</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="row navs">
<p>
ONELinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
</p>
</div>
<div class="row navs">
<p>
TWOLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
</p>
</div>
<div class="row navs">
<p>
3Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
Linux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjfLinux bit ine sjduiahdu n sad iirjf
</p>
</div>
</div>
</div>
<script>
$('li').mouseenter(function(){
$(this).addClass('active');
$('li').not($(this)).removeClass('active');
idx=$(this).index('li');
$('.navs').eq(idx).show(100);
$('.navs').not($('.navs').eq(idx)).hide(100)
})
$('.navs').eq(0).show(100);
</script>
02導航條:navbar
<div class="container">
<h1 class="page-header">BootStrap <small>導航條</small></h1>
<nav class="navbar navbar-default">
<div class="cintainer-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbbr" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">ADAPA</a>
</div>
<div class="collapse navbar-collapse" id="Navbbr">
<ul class="nav navbar-nav">
<li class="active"><a href="#">起步</a></li>
<li><a href="#">全局CSS樣式</a></li>
<li><a href="#">組件</a></li>
<li><a href="#">Javascript插件</a></li>
<li><a href="#">網站實例</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#">Bootstrap中文網</a></li>
</ul>
</div>
</div>
</nav>
</div>
03:
<div class="container">
<h1 class="page-header">BootStrap <small>導航條</small></h1>
<nav class="navbar navbar-default">
<div class="cintainer-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbbr" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">ADAPA</a>
</div>
<div class="collapse navbar-collapse" id="Navbbr">
<ul class="nav navbar-nav">
<li class="active"><a href="#">起步</a></li>
<li><a href="#">全局CSS樣式</a></li>
<li><a href="#">組件</a></li>
<li><a href="#">Javascript插件</a></li>
<li><a href="#">網站實例</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span>網站實例 <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#">Bootstrap中文網</a></li>
</ul>
<form action="#" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<div class="form-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</form>
</div>
</div>
</nav>
</div>
完成品：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="renderer" content="webkit"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style type="text/css">
.navs{
padding: 15px 50px;
}
body{
padding-top: 30px;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">BootStrap <small>導航條</small></h1>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="cintainer-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#Navbbr" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">ADAPA</a>
</div>
<div class="collapse navbar-collapse" id="Navbbr">
<ul class="nav navbar-nav">
<li class="active"><a href="#">起步</a></li>
<li><a href="#">全局CSS樣式</a></li>
<li><a href="#">組件</a></li>
<li><a href="#">Javascript插件</a></li>
<li><a href="#">網站實例</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span>網站實例 <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a href="#">Bootstrap中文網</a></li>
</ul>
<form action="#" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<div class="form-group">
<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</form>
</div>
</div>
</div>
</nav>
<h1>0000000000001</h1>
<h1>0000000000002</h1>
<h1>0000000000003</h1>
<h1>0000000000004</h1>
<h1>0000000000005</h1>
<h1>0000000000006</h1>
<h1>0000000000007</h1>
<h1>0000000000008</h1>
<h1>0000000000009</h1>
<h1>0000000000010</h1>
<h1>0000000000011</h1>
<h1>0000000000012</h1>
<h1>0000000000013</h1>
<h1>0000000000014</h1>
<h1>0000000000015</h1>
<h1>0000000000016</h1>
<h1>0000000000017</h1>
<h1>0000000000018</h1>
<h1>0000000000019</h1>
<h1>0000000000020</h1>
<h1>0000000000021</h1>
<h1>0000000000022</h1>
<h1>0000000000023</h1>
<h1>0000000000024</h1>
<h1>0000000000025</h1>
<h1>0000000000026</h1>
<h1>0000000000027</h1>
<h1>0000000000028</h1>
<h1>0000000000029</h1>
<h1>0000000000030</h1>
<h1>0000000000031</h1>
<h1>0000000000032</h1>
<h1>0000000000033</h1>
<h1>0000000000034</h1>
<h1>0000000000035</h1>
<h1>0000000000036</h1>
<h1>0000000000037</h1>
<h1>0000000000038</h1>
<h1>0000000000039</h1>
<h1>0000000000040</h1>
<h1>0000000000041</h1>
<h1>0000000000042</h1>
<h1>0000000000043</h1>
<h1>0000000000044</h1>
<h1>0000000000045</h1>
<h1>0000000000046</h1>
<h1>0000000000047</h1>
<h1>0000000000048</h1>
</div>
<script>
$('li').mouseenter(function(){
$(this).addClass('active');
$('li').not($(this)).removeClass('active');
})
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
NEW
<div class="container">
<h1 class="page-header">Bootcss <small>NEW</small></h1>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active">BIB</li>
</ol>
<button class="btn btn-success">ADOUT<span class="badge">MZ</span></button>
<div class="jumbotron">
<h1 class="page-header">mimi</h1>
<p>
sajdiiisssssssssssssssssssssssssssssssad
sakdooooooooooooaaaaaaaaaoksad
</p>
<p><a href="#" class="btn btn-success btn-lg">MIMI</a></p>
</div>
<div class="alert alert-danger">
<big>WTF</big>跑老子這里來干J/B
</div>
<div class="alert alert-danger">
<span class="close" data-dismiss='alert'>×</span>
<big>WTF</big>跑老子這里來干J/B
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" style="width:60%">
60%
</div>
</div>
</div>
JavaScript組件部分:
1.模態框
<div class="container">
<h1 class="page-header">Bootstrap <small>MIMI</small></h1>
<button class="btn btn-info btn-lg" data-toggle='modal' data-target='#mymodal'>點我啊 </button>
<div id="mymodal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<botton class='close' data-dismiss= "modal"> <span>×</span></botton>
<h3>Ilove pytthon</h3>
</div>
<div class="modal-body">
<p>asdjkasiojdiaosjdioasjdasiodjasiodjasiodjasid
asdiasjdiosajdiasdjasodjasiodjasiodjsaiojdasiodj</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss='modal'>關閉</button>
</div>
</div>
</div>
</div>
</div>
modal <a>中的寫法
<div class="cntainer">
<h1 class="page-header">MIMI</h1>
<a href="#mymodo" class="btn btn-success btn-lg" data-toggle='modal' >BIBIBIBI</a>
<div id="mymodo" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss='modal'><span>×</span></button>
MIMI
</div>
<div class="modal-body">
MIMI
</div>
<div class="modal-footer">
MIMI
</div>
</div>
</div>
</div>
</div>
下拉菜單：
<div class="container">
<div class="dropdown">
<button class="btn btn-info" type="button" data-toggle='dropdown'>
MIMI
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="#">MIMI</a></li>
<li><a href="#">BIBI</a></li>
<li><a href="#">BIBI</a></li>
<li><a href="#">BIBI</a></li>
</ul>
</div>
</div>
滾動監聽:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MIMI</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.min.css" />
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<meta name="renderer" content="webkit"/>
<style type="text/css">
body{
margin-top: 80px;
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target="#MYnavbar" data-offset="100">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" id="MYnavbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#ONE" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Bootstrap</a>
</div>
<div id="ONE" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#Python">Pythno</a></li>
<li><a href="#Nignx">Nignx</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle='dropdown'>Linux <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#ONE">ONE</a></li>
<li><a href="#TWO">TWO</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="panel panel-danger" id="Python">
<div class="panel-heading">
<h1>Python</h1>
</div>
<div class="panel-body">
<p>我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Pytho
hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我
hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我n天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵</p>
</div>
<div class="panel-footer">
<p>Python萬歲</p>
</div>
</div>
<div class="panel panel-success" id="Nignx">
<div class="panel-heading">
<h1>Nignx</h1>
</div>
<div class="panel-body">
<p>我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵</p>
</div>
<div class="panel-footer">
<p>Python萬歲</p>
</div>
</div>
</div>
<div class="panel panel-default" id="ONE">
<div class="panel-heading">
<h1>ONE</h1>
</div>
<div class="panel-body">
<p>我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Phon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我ython天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵</p>
</div>
<div class="panel-footer">
<p>Python萬歲</p>
</div>
</div>
<div class="panel panel-info" id="TWO">
<div class="panel-heading">
<h1>TWNO</h1>
</div>
<div class="panel-body">
<p>我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Pythonhon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我hon天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵
我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵我大Python天下無敵</p>
</div>
<div class="panel-footer">
<p>Python萬歲</p>
</div>
</div>
</div>
</body>
</html>
標簽頁:
<div class="container">
<h1 class="page-header">MIMI</h1>
<ul class="nav nav-tabs">
<li class="active" class="active" ><a href="#Home" data-toggle = "tab">Hone</a></li>
<li><a href="#About" data-toggle='tab'>About</a></li>
<li><a href="#End" data-toggle='tab'>End</a></li>
</ul>
<div class="tab-content">
<div id="Home" class="tab-pane active">
<p>
01小彭認識了主播“大乃敵”，他給自己取了個網名叫“獨寵大乃敵”，在接下來的兩個多月里打賞16.6萬元。
在直播間里，各種彈幕都是在譏諷小彭，譏諷大人沒有管好孩子，女主播還在主頁上公布了小彭的個人信息，彭師傅大怒：“你騙了他的錢，還把這些信息發上去干嘛？”
站在一旁的妻子看到兒子的個人信息被掛到網上后哭了，網絡世界讓這個只有小學六年級文化水平的女子覺得有些害怕。
</p>
</div>
<div id="About" class="tab-pane">
<p>
02小彭認識了主播“大乃敵”，他給自己取了個網名叫“獨寵大乃敵”，在接下來的兩個多月里打賞16.6萬元。
在直播間里，各種彈幕都是在譏諷小彭，譏諷大人沒有管好孩子，女主播還在主頁上公布了小彭的個人信息，彭師傅大怒：“你騙了他的錢，還把這些信息發上去干嘛？”
站在一旁的妻子看到兒子的個人信息被掛到網上后哭了，網絡世界讓這個只有小學六年級文化水平的女子覺得有些害怕。
</p>
</div>
<div id="End" class="tab-pane">
<p>
03小彭認識了主播“大乃敵”，他給自己取了個網名叫“獨寵大乃敵”，在接下來的兩個多月里打賞16.6萬元。
在直播間里，各種彈幕都是在譏諷小彭，譏諷大人沒有管好孩子，女主播還在主頁上公布了小彭的個人信息，彭師傅大怒：“你騙了他的錢，還把這些信息發上去干嘛？”
站在一旁的妻子看到兒子的個人信息被掛到網上后哭了，網絡世界讓這個只有小學六年級文化水平的女子覺得有些害怕。
</p>
</div>
</div>
</div>
標簽頁：
<div class="container">
<h1 class="page-header">MIMI</h1>
<ul class="nav nav-tabs">
<li class="active" class="active" ><a href="#Home" data-toggle = "tab">Hone</a></li>
<li><a href="#About" data-toggle='tab'>About</a></li>
<li><a href="#End" data-toggle='tab'>End</a></li>
</ul>
<div class="tab-content">
<div id="Home" class="tab-pane active">
<p>
01小彭認識了主播“大乃敵”，他給自己取了個網名叫“獨寵大乃敵”，在接下來的兩個多月里打賞16.6萬元。
在直播間里，各種彈幕都是在譏諷小彭，譏諷大人沒有管好孩子，女主播還在主頁上公布了小彭的個人信息，彭師傅大怒：“你騙了他的錢，還把這些信息發上去干嘛？”
站在一旁的妻子看到兒子的個人信息被掛到網上后哭了，網絡世界讓這個只有小學六年級文化水平的女子覺得有些害怕。
</p>
</div>
<div id="About" class="tab-pane fade">
<p>
02小彭認識了主播“大乃敵”，他給自己取了個網名叫“獨寵大乃敵”，在接下來的兩個多月里打賞16.6萬元。
在直播間里，各種彈幕都是在譏諷小彭，譏諷大人沒有管好孩子，女主播還在主頁上公布了小彭的個人信息，彭師傅大怒：“你騙了他的錢，還把這些信息發上去干嘛？”
站在一旁的妻子看到兒子的個人信息被掛到網上后哭了，網絡世界讓這個只有小學六年級文化水平的女子覺得有些害怕。
</p>
</div>
<div id="End" class="tab-pane fade">
<p>
03小彭認識了主播“大乃敵”，他給自己取了個網名叫“獨寵大乃敵”，在接下來的兩個多月里打賞16.6萬元。
在直播間里，各種彈幕都是在譏諷小彭，譏諷大人沒有管好孩子，女主播還在主頁上公布了小彭的個人信息，彭師傅大怒：“你騙了他的錢，還把這些信息發上去干嘛？”
站在一旁的妻子看到兒子的個人信息被掛到網上后哭了，網絡世界讓這個只有小學六年級文化水平的女子覺得有些害怕。
</p>
</div>
</div>
</div>
折疊框效果：
<div class="panel-group" id="ONN">
<div class="panel panel-success" >
<div class="panel-heading">
<div class="panel-title"><a data-toggle="collapse" data-parent="#ONN" href="#onn1">MsdsdsID</a></div>
</div>
<div class="panel-collapse collapse in" id="onn1">
<div class="panel-body">
<p>snadsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhh\dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasbdasubdausdbasuid
asdjasiudhasudhsaudhsuadhasudha
asdjasiudhasudhsaudhsuadhasudhasudhasudsaudasui</p>
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title"><a data-toggle="collapse" data-parent="#ONN" href="#onn2">MIMID</a></div>
</div>
<div class="panel-collapse collapse in" id="onn2">
<div class="penel-body">
asdasdsd
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#ONN" href="#onn3" aria-expanded="true" aria-controls="collapseOne">
01MIMsdaISAMD
</a>
</div>
</div>
<div class="panel-collapse collapse in" id="onn3">
<div class="penel-body">
asdasdsd
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
dsaudnasudnisaaaaanaaaaaaaaaaaaaa
asdasddbhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
asdnbuiasbdiuasbduasbduiasbduasb
</div>
</div>
</div>
</div>
幻燈片:
<div class="container">
<!---->
<div id="hdp" class="carousel slide" data-ride="carousel">
<!--幻燈片部分-->
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<!--幻燈片尾巴-->
<!--監控條頭-->
<ol class="carousel-indicators">
<li data-target='#hdp' data-slide-to='0' class="active"></li>
<li data-target='#hdp' data-slide-to='1' ></li>
<li data-target='#hdp' data-slide-to="2" ></li>
</ol>
<!--監控條尾巴-->
<!--箭頭部分-->
<a href="#hdp" class="left carousel-control" data-slide='prev'>
<span class="glyphicon glyphicon-chevron-left"></span>
</a><a href="#hdp" class="right carousel-control" data-slide='prev'>
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!--箭頭尾巴-->
</div>
</div>
