②bootstrap柵欄使用基礎案例
阿新 • • 發佈：2017-09-30
新版本 doctype ack lan spa gas char mpat round
<!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"> <!--移動設備優先--> <title>bootstrap</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可選的 Bootstrap 主題文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> div{border: 1px solid #f40; } @media(max-width: 767px){ div{background:#378232} } </style> </head> <body> <div class="container"> <!--row必須放在container裏--> <div class="row"> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> <div class="col-md-1">md1</div> </div> <div class="row"> <div class="col-md-8 col-sm-6">md8</div> <div class="col-md-4 col-sm-6">md4</div> </div> </div> <div class="container"> <h1>Container</h1> </div> <div class="container-fluid"> <h1>Container-fluid</h1> </div> <div class="container"> <div class="row"> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">col-md-3 col-md-offset-3</div> <div class="col-md-2 col-md-offset-2">col-md-2 col-md-offset-2</div> </div> <div class="row"> <div class="col-md-8"> <div class="row"> <div class="col-md-6">col-md-8 col-md-6</div> <div class="col-md-6">col-md-8 col-md-6</div> </div> </div> <div class="col-md-4">col-md-4</div> </div> <div class="row"> <div class="col-md-3 col-md-push-5">col-md-3 col-md-push-5</div> <div class="col-md-2 col-md-pull-2">col-md-2 col-md-pull-2</div> </div> <div class="row"> <div class="col-md-8 col-sm-3 col-xs-6">3級</div> <div class="col-md-4 col-sm-6 col-xs-6">3級</div> </div> <div class="row"> <div class="col-xs-6 col-sm-3">多行1</div> <div class="col-xs-6 col-sm-3">多行2</div> <div class="col-xs-6 col-sm-3">多行3</div> <div class="col-xs-6 col-sm-3">多行4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-3">多行1</br>超小有變化</div> <div class="col-xs-6 col-sm-3">多行2</div> <div class="col-xs-6 col-sm-3">多行3</div> <div class="col-xs-6 col-sm-3">多行4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-3">多行1</br>超小有變化</div> <div class="col-xs-6 col-sm-3">多行2</div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3">多行3</div> <div class="col-xs-6 col-sm-3">多行4</div> </div> </div> </nav> </body> </html>
②bootstrap柵欄使用基礎案例