<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>
雖然現(xiàn)在在瀏覽器中還看不到什麼內(nèi)容，但是，已經(jīng)為後面的操作打好了基礎(chǔ)。
4. 標(biāo)題和導(dǎo)航
現(xiàn)在我們可以為頁(yè)面添加一些可見(jiàn)的內(nèi)容了。
4.1 標(biāo)題
新增標(biāo)題非常簡(jiǎn)單，直接加入一個(gè) h1 元素就可以了。
<p class="container">
<h1>Twitter bootstrap tutorial</h1>
</p>
刷新頁(yè)面應(yīng)該看到一個(gè)醒目的標(biāo)題了。下面我們來(lái)看導(dǎo)航。
4.2 導(dǎo)航
使用 nav 元素可以創(chuàng)建導(dǎo)航，而且我們希望創(chuàng)建一個(gè)導(dǎo)航條來(lái)組織導(dǎo)航項(xiàng)目，在 bootstrap 中，導(dǎo)航條稱為 navbar，繼續(xù)在容器中添加導(dǎo)航條。
<p class="container">
<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
</nav>
</p>
navbar 會(huì)幫助我們建立導(dǎo)覽條，預(yù)設(shè)是白色的底色，navbar-inverse 設(shè)定反白，這樣底色會(huì)是黑色，文字會(huì)是白色，比較醒目?，F(xiàn)在刷新頁(yè)面，你會(huì)看到一個(gè)黑色的導(dǎo)航條，裡面還沒(méi)有任何導(dǎo)航內(nèi)容。
添加導(dǎo)航內(nèi)容如下
<p class="container">
<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
<p class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
</ul>
</p>
</nav>
</p>
ul 是實(shí)際的導(dǎo)航內(nèi)容，其中的 .nav 說(shuō)明這是一組導(dǎo)航，.navbar-nav 說(shuō)明是用於 navbar 中的導(dǎo)航。 li 則是實(shí)際的導(dǎo)航項(xiàng)目，可以使用 .active 用來(lái)說(shuō)明目前活動(dòng)的導(dǎo)航。
注意 .navbar-collapse，它是說(shuō)在視口的寬度小於 768px 的時(shí)候，將導(dǎo)航變成垂直方向。
大於 768px
小於 768px
4.3 三明治菜單
4.3 三明治菜單
4.3 三明治菜單我們變成垂直的導(dǎo)航??????????我們需要額外做一些工作，一方面，我們需要說(shuō)明，在視口小於一定寬度的時(shí)候，顯示出來(lái)我們的特定的導(dǎo)航，添加額外的導(dǎo)航內(nèi)容。 ??<!-- Brand and toggle get grouped for better mobile display -->
<p class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</p>
??其實(shí)裡面是兩個(gè)部分組成的，button 部分看起來(lái)很多，就是用來(lái)畫(huà)出右邊的三明治按鈕。後面的 a 元素則是左邊的導(dǎo)航。 ????通常它不會(huì)顯示出來(lái)。 ??然后，我們需要制定點(diǎn)擊三明治按鈕的時(shí)候，需要顯示我們?cè)瓉?lái)的導(dǎo)航。button 元素中，我們有一個(gè) attribute ，data-target="#navbar-menu" ，就是用來(lái)完成這一步工作的，這個(gè) #navbar-menu 就是我們?yōu)樵瓉?lái)的導(dǎo)航所起的 id 標(biāo)識(shí)。
這樣，我們的導(dǎo)航就是這樣的了。
<h1>Twitter bootstrap tutorial</h1>
<nav class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<p class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</p>
<p id="navbar-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page One</a></li>
<li><a href="#">Page Two</a></li>
</ul>
</p>
</nav>
</p>
5. 內(nèi)容和邊欄
主要內(nèi)容部分，我們使用 p 來(lái)進(jìn)行布局。
<p id="content" class="row-fluid">
<p class="col-md-9">
<h2>Main Content Section</h2>
</p>
<p class="col-md-3">
<h2>Sidebar</h2>
</p>
</p>
這里使用了 bootstrap 的柵格布局，柵格系統(tǒng)利用了12列的布局，這意味著一個(gè)頁(yè)面可以被分割成12個(gè)相同的列。下面這張從bootstrap官方文檔中拿到的圖片給出了一個(gè)很好的展示。
這張表格則給出了詳細(xì)的說(shuō)明。
現(xiàn)在頁(yè)面看起來(lái)是這樣的。
6. 側(cè)邊欄導(dǎo)航
在側(cè)邊欄中添加一些導(dǎo)航內(nèi)容。這里就是普通的導(dǎo)航，使用 .nav 進(jìn)行聲明，.nav-tabs 和 .nav-stacked 是導(dǎo)航的外觀。
<p class="col-md-3">
<h2>Sidebar</h2>
<ul class="nav nav-tabs nav-stacked">
<li><a href='#'>Another Link 1</a></li>
<li><a href='#'>Another Link 2</a></li>
<li><a href='#'>Another Link 3</a></li>
</ul>
</p>
看看最終的效果，一個(gè)基于 bootstrap 的響應(yīng)式布局頁(yè)面就完成了。?
相關(guān)文章：
Bootstrap教程
使用Bootstrap過(guò)渡效果Transition模態(tài)框（Modal）的方法
JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
本網(wǎng)站聲明
本文內(nèi)容由網(wǎng)友自願(yuàn)投稿，版權(quán)歸原作者所有。本站不承擔(dān)相應(yīng)的法律責(zé)任。如發(fā)現(xiàn)涉嫌抄襲或侵權(quán)的內(nèi)容，請(qǐng)聯(lián)絡(luò)admin@php.cn
vue中怎麼用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分為五個(gè)步驟：安裝 Bootstrap。在 main.js 中導(dǎo)入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式?？蛇x：使用插件。
bootstrap怎麼寫分割線
Apr 07, 2025 pm 03:12 PM
創(chuàng)建 Bootstrap 分割線有兩種方法：使用 標(biāo)籤，可創(chuàng)建水平分割線。使用 CSS border 屬性，可創(chuàng)建自定義樣式的分割線。
bootstrap日期怎麼驗(yàn)證
Apr 07, 2025 pm 03:06 PM
在 Bootstrap 中驗(yàn)證日期，需遵循以下步驟：引入必需的腳本和樣式；初始化日期選擇器組件；設(shè)置 data-bv-date 屬性以啟用驗(yàn)證；配置驗(yàn)證規(guī)則（如日期格式、錯(cuò)誤消息等）；集成 Bootstrap 驗(yàn)證框架，並在表單提交時(shí)自動(dòng)驗(yàn)證日期輸入。
bootstrap搜索欄怎麼獲取
Apr 07, 2025 pm 03:33 PM
如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執(zhí)行所需的操作。
bootstrap怎麼看日期
Apr 07, 2025 pm 03:03 PM
答案：可以使用 Bootstrap 的日期選擇器組件在頁(yè)面中查看日期。步驟：引入 Bootstrap 框架。在 HTML 中創(chuàng)建日期選擇器輸入框。 Bootstrap 將自動(dòng)為選擇器添加樣式。使用 JavaScript 獲取選定的日期。
bootstrap怎麼設(shè)置框架
Apr 07, 2025 pm 03:27 PM
要設(shè)置 Bootstrap 框架，需要按照以下步驟：1. 通過(guò) CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務(wù)器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據(jù)需要編譯 Sass/Less；5. 導(dǎo)入定製文件（可選）。設(shè)置完成後，即可使用 Bootstrap 的網(wǎng)格系統(tǒng)、組件和樣式創(chuàng)建響應(yīng)式網(wǎng)站和應(yīng)用程序。
為Web開(kāi)發(fā)者準(zhǔn)備的10個(gè)最新工具
May 07, 2025 pm 04:48 PM
Web開(kāi)發(fā)設(shè)計(jì)是一個(gè)充滿潛力的職業(yè)領(lǐng)域。然而，這個(gè)行業(yè)也面臨著諸多挑戰(zhàn)。隨著越來(lái)越多的企業(yè)和品牌轉(zhuǎn)向網(wǎng)絡(luò)市場(chǎng)，Web開(kāi)發(fā)者有機(jī)會(huì)展示他們的技能並在職業(yè)生涯中取得成功。然而，隨著對(duì)Web開(kāi)發(fā)需求的持續(xù)增長(zhǎng)，開(kāi)發(fā)人員的數(shù)量也在增加，導(dǎo)致競(jìng)爭(zhēng)日益激烈。但令人振奮的是，如果你具備天賦和意願(yuàn)，你總能找到新方法來(lái)創(chuàng)造獨(dú)特的設(shè)計(jì)和創(chuàng)意。作為一名Web開(kāi)發(fā)人員，你可能需要不斷尋找新的工具和資源。這些新工具和資源不僅能讓你的工作更加便捷，還能提升工作質(zhì)量，從而幫助你贏得更多的業(yè)務(wù)和客戶。 Web開(kāi)發(fā)的趨勢(shì)不斷變化，
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創(chuàng)建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
See all articles
4.3 三明治菜單
