Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs. Copy the HTML below to begin working with a minimal Bootstrap document. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/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"></script> </body> </html>
文檔 https://getbootstrap.com/docs/3.3/getting-started/
text-left
text-right
text-center
text-lowercase
text-uppercase
<table class="table table-striped table-borderd "/>
<tr class="success">
<tr class="active">
<div class="form-group has-success"> // has-success用來控制內部的label邊框顏色之列
<label for="" class="control-label">label</label> // control-label和has-success匹配
<input type="text" class="form-control input-lg" placeholder="txt"> input-lg//大小設置
<button class="btn btn-default">
<button class="btn btn-success">
<button class="btn btn-primary active"> //active會有按下去的效果
<button class="btn btn-warning btn-block"> //btn-block變成全屏按鈕的大小
<button class="btn btn-danger " disabled="disabled"> //禁用效果
<button class="btn btn-link">
文檔地址
https://getbootstrap.com/docs/3.3/javascript/
柵格佈局
<div class="container">
<div class="row">
<div class="col-md-4"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="width:100%;
height:auto;"></div>
<div class="col-md-4"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="width:100%;
height:auto;"></div>
<div class="col-md-4"><img src="http://t1.27270.com/uploads/tu/201812/121/3a5037c2c3.jpg" style="width:100%;
height:auto;"></div>
</div>
</div>
<hr class="divider">
使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器爲當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。
<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="pill">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="pill">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="pill">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="width:100%;
height:auto;"></div>
<div role="tabpanel" class="tab-pane" id="profile"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="width:100%;
height:auto;"></div>
<div role="tabpanel" class="tab-pane" id="messages"><img src="http://t2.hddhhn.com/uploads/tu/201811/9999/b399d85995.jpg" style="width:100%;
height:auto;"></div>
<div role="tabpanel" class="tab-pane" id="settings"><img src="http://t1.27270.com/uploads/tu/201812/121/3a5037c2c3.jpg" style="width:100%;
height:auto;"></div>
</div>
https://getbootstrap.com/docs/3.3/javascript/
https://getbootstrap.com/docs/3.3/components/#nav-pills
