boortstrap 柵格系統 以及一些列響應式的嘗試
阿新 • • 發佈：2018-12-19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background-color:red;">
<!--<h1>Hello, world!</h1>-->
<div class="row">
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaaa
</div>
<div class="col-md-4 col-lg-3 col-sm-6 col-xs-12" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
aaaaaaaaaaaaaaa
</div>
</div>
</div>
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-ok" style="color: rgb(132, 53, 109); font-size: 15px;"> Okay</span>
</button>
<span class="glyphicon glyphicon-list-alt" style="color: rgb(255, 167, 212);"> List alt</span>
<span class="glyphicon glyphicon-th-list" style="color: rgb(132, 144, 188); font-size: 15px;"> List</span>
<span class="glyphicon glyphicon-th-list" style="color: rgb(132, 144, 188); font-size: 15px;"> List</span>
<span class="glyphicon glyphicon-envelope" style="color: rgb(132, 53, 253); font-size: 15px;"> Envelope</span>
<div class="container">
<h2>Upload Glyph</h2>
<p>Upload icon: <span class="glyphicon glyphicon-upload"></span></p>
<p>Upload icon as a link:
<a href="#">
<span class="glyphicon glyphicon-upload"></span>
</a>
</p>
<p>Upload icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</p>
<p>Upload icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-upload"></span> Upload
</a>
</p>
</div>
<div class="container">
container 固定寬度1170px 同時左右15px內邊距
</div>
<div class="container-fluid">
100% 寬度 15px 內邊距
</div>
<div class="row">
<div class="col-md-6"> aaaa </div>
<div class="col-md-6"> aaaa </div>
</div>
<h1><small>我我我我我我</small></h1>
<h2><small>嘖嘖嘖嘖嘖嘖做做做做做做做做</small></h2>
<img src="img/page1.jpg" class="img-responsive" alt="響應式影象">
<img src="img/page1.jpg">
</body>
</html>