溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下bootstrap有哪些布局方式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
bootstrap有什么布局方式？
bootstrap有固定布局和流動布局：固定布局即創建基于固定像素數的網頁或app；流動布局即創建一個非固定的布局，即基于百分比的布局，以便讓布局更靈活。
Bootstrap 固定布局
如果您想要創建基于固定像素數的網頁或 app，請看這部分的教程。
用法
<body> <div> ... </div></body>
解釋
bootstrap.css（位于 bootstrap 的主文件夾的 docs\assets\css 下）的第 261 到 273 行，為創建主容器渲染樣式，從而創建一個固定布局。固定布局的目的是為網頁或 app 創建一個 940 像素（默認）寬的布局。
Bootstrap 固定布局的實例
下面的代碼創建一個網頁固定布局。為了定制，除了默認樣式，還需創建一個新的 css 文件 example-fixed-layout.css，與 bootstrap.css 位于同一個文件夾下。
CSS 代碼
body {padding-top: 60px;padding-bottom: 40px;}.nav li {padding-top: 5px;}.leaderboard {padding: 60px;margin-bottom: 30px;background-image: url('/twitter-bootstrap/images/gridbg.gif');background-repeat:repeat;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}.leaderboard h2 {font-size: 40px;margin-bottom: 5px;line-height: 1;letter-spacing: -1px;color:#FF6600;}.leaderboard p {font-size: 18px;font-weight: 200;line-height: 27px;}HTML 代碼實例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用Bootstrap 版本 2.0 固定布局的實例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Example of Fixed Layout with Bootstrap version 2.0 from w3cschool.cc"> <meta name="author" content=""> <!-- Le styles --> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fixed-layout.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico"> <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"></head><body> <div class="navbar navbar-fixed-top"> <div> <div> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span></span> <span></span> <span></span> </a> <a href="#"> <img src="/images/w3r.png" width="111" height="30" alt="w3cschool logo" /></a> <div> <ul> <li> <a href="#">Home</a></li> <li> <a href="#about">About</a></li> <li> <a href="#contact">Contact</a></li> </ul> </div> <!--/.nav-collapse --></div> </div> </div> <div> <!-- Main hero unit for a primary marketing message or call to action --> <div> <h2>w3cschool Web Store</h2> <p>Try and purchase HTML5, JS, Ruby, PHP-MySQL based web apps to enhance your productivity at affordable price.</p> <p> <a class="btn btn-success btn-large">Sign Up for a 30 day free trial</a></p> </div> <!-- Example row of columns --> <div> <div> <h3>HTML5 and JS Apps</h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p> <a class="btn btn-success btn-large" href="#">View apps</a></p> </div> <div> <h3>Ruby Apps</h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p> <a class="btn btn-success btn-large" href="#">View apps</a></p> </div> <div> <h3>PHP MySQL Apps</h3> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p> <a class="btn btn-success btn-large" href="#">View apps</a></p> </div> </div> <hr> <footer> <p>© Company 2012</p> </footer> </div> <!-- /container --> <!-- Le javascript==================================================- -> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script></body></html>輸出
在不同的瀏覽器窗口查看上面實例。
Bootstrap 流動布局
如果想要創建一個非固定的布局，即基于百分比的布局，以便讓布局更靈活，請看這部分教程。
用法
<div> <div> <div> <!--Sidebar content--> </div> <div> <!--Body content--> </div> </div></div>
解釋
bootstrap.css（位于 bootstrap 的主文件夾的 docs\assets\css 下）的第 274 到 285 行，為創建主容器渲染樣式，從而創建一個流動布局。流動布局的目的是為網頁或 app 創建一個基于百分比的布局（比如，width=20%）。
Bootstrap 流動布局的實例
下面的代碼創建一個網頁流動布局。為了定制，除了默認樣式，還需創建一個新的 css 文件 example-fluid-layout.css，與 bootstrap.css 位于同一個文件夾下。
CSS 代碼
body { padding-top: 60px; padding-bottom: 40px; } .nav li { padding-top: 5px; } .sidebar-nav { padding: 9px 0; } .leaderboard { padding: 60px; margin-bottom: 30px; background-image: url('/twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.leaderboard h2 { font-size: 40px; margin-bottom: 5px; line-height: 1; letter-spacing: -1px; color:#FF6600;}.leaderboard p { font-size: 18px; font-weight: 200; line-height: 27px;}.well {background-image: url('/twitter-bootstrap/images/gridbg.gif'); background-repeat:repeat; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}.nav .nav-header {font-size: 18px;color:#FF9900;}HTML 代碼實例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用Bootstrap 版本 2.0 固定布局的實例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Example of Fluid Layout with Bootstrap version 2.0 from w3cschool.cc"> <meta name="author" content=""> <!-- Le styles --> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/example-fluid-layout.css" rel="stylesheet"> <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Le fav and touch icons --> <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico"> <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png"></head><body> <div class="navbar navbar-fixed-top"> <div> <div> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span></span> <span></span> <span></span> </a> <a href="#"> <img src="/images/w3r.png" width="111" height="30" alt="w3cschool logo" /></a> <div> <ul> <li> <a href="#">Home</a></li> <li> <a href="#about">About</a></li> <li> <a href="#contact">Contact</a></li> </ul> <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> </div> <!--/.nav-collapse --></div> </div> </div> <div> <div> <div> <div class="well sidebar-nav"> <ul class="nav nav-list"> <li>Frontend</li> <li> <a href="#">HTML 4.01</a></li> <li> <a href="#">HTML5</a></li> <li> <a href="#">CSS</a></li> <li> <a href="#">JavaScript</a></li> <li> <a href="#">Twitter Bootstrap</a></li> <li> <a href="#">Firebug</a></li> <li>Backend</li> <li> <a href="#">PHP</a></li> <li> <a href="#">SQL</a></li> <li> <a href="#">MySQL</a></li> <li> <a href="#">PostgreSQL</a></li> <li> <a href="#">MongoDB</a></li> </ul> </div><!--/.well --> </div><!--/span--> <div> <div> <h2>Learn. Practice. Develop.</h2> <p>w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content.</p> <p> <a class="btn btn-success btn-large">Join w3cschool now</a></p> </div> <div> <div> <h3>Learn</h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p> <a class="btn btn-success btn-large" href="#">Start Learning now</a></p> </div><!--/span--> <div> <h3>Practice</h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p> <a class="btn btn-success btn-large" href="#">Start percticing now</a></p> </div> <!--/span--> <div> <h3>Develop</h3> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> <p> <a class="btn btn-success btn-large" href="#">Start developing now</a></p> </div><!--/span--> </div><!--/row--> <hr> <footer> <p>© Company 2012</p> </footer> </div> </div> </div><!--/.fluid-container--> <!-- Le javascript==================================================- -> <!-- Placed at the end of the document so the pages load faster --> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script> <script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script></body></html>以上是“bootstrap有哪些布局方式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
