bootstrap如何自定義5列
廢話少說，先上代碼：css
<!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">
<!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
<title>Bootstrap Grid System</title>html
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">html5
<!-- 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://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
<div class="col-md-2" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=FF7F50&outline=yes" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
<div class="col-sm-3" style="width:20%">
<img data-src="holder.js/234x200?text=234x200&bg=00FFFF&outline=yes" alt=""/>
</div>
</div>
<div class="row">
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=2a2025&outline=yes" alt=""></div>
</div>
<div class="row">
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
<div class="col-sm-3"><img data-src="holder.js/292x200?text=292x200&bg=7FFF00&outline=yes" alt=""></div>
</div>
</div>jquery
<!-- 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="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.js"></script>
</body>
</html>bootstrap
本身新建一個html文檔，而後在瀏覽器中打開效果以下所示：瀏覽器
因此若是你要定義成5列的話只須要bootstrap的列的樣式，而後從新定義列寬就行了，不要修改bootstrap自己的列寬，那樣會影響你其餘頁面使用的。ui
- 1. bootstrap 如何自定義按鈕
- 2. 5.如何自定義 Data Sink ？
- 3. sql select 如何定義自增列？
- 4. bootstrap自定義提示框
- 5. bootstrap-validator自定義驗證
- 6. bootstrap自定義分頁
- 7. Bootstrap自定義圖標
- 8. 如何自定義LinearLayout
- 9. android 如何自定義ProgressBar
- 10. 如何自定義ActionBar?
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • XSD 如何使用? - XML Schema 教程
- • RxJava操作符（十）自定義操作符
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。