淺談bootstrap中的navbar導覽欄-Bootstrap教程-PHP中文網

首頁

web前端

Bootstrap教程

淺談bootstrap中的navbar導覽欄

青灯夜游

Jun 03, 2021 am 11:38 AM

bootstrap

這篇文章帶大家了解一下bootstrap中的navbar導覽列。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

淺談bootstrap中的navbar導覽欄

【相關推薦：《bootstrap教學》】

container：固定960px寬度，（如果又引入了響應式樣式，則會適當調整，例如1600*900，它會顯示1200px）

container-fluid:自適應螢幕寬度，即滿螢幕顯示。

row和col可以參考：https://blog.csdn.net/yzy85/article/details/53021385?locationNum=2&fps=1和http://v3.bootcss.com/css/

尤其http://v3.bootcss.com/css/講的特別清楚哦

#例如：

使用單一的一組 .col-md- * 柵格類，就可以創建一個基本的柵格系統，在手機和平板設備上一開始是堆疊在一起的（超小屏幕到小屏幕這一範圍），在桌面（中等）屏幕設備上變為水平排列。所有「欄位（column）必須放在」 .row 內。

.navbar－設定nav元素為導覽條元件；

.navbar-default－指定導覽列元件為預設主題；

.navbar-inverse－指定導覽條元件為黑色主題；

.navbar-fixed-top－設定導覽條元件固定在頂部；

.navbar-fixed- bottom－設定導航條元件固定在底部；

.container-fluid－設定寬度充滿父元素，即為100%；

.navbar-header－主要指定p元素為導航條組件包裹品牌圖示及切換按鈕；

.navbar-toggle－設定button元素為導航條組件的切換鈕；

.collapsed－設定button元素為在視口小於768px時才顯示；

.navbar-brand－設定導覽條組件內的品牌圖示；

navbar-brand預設是放文字的,也可以放圖片，但必須是小圖片,如果圖片太大，位置就會靠下.

範例：

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="淺談bootstrap中的navbar導覽欄" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

程式碼執行時，樣式是這樣的：

我們發現圖示和字體是錯位了。我們只需要在加入：display: inline;就可以了，加入後的程式碼如下：

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="淺談bootstrap中的navbar導覽欄" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

程式碼執行後，樣式如下圖，已經成為我們想要的樣子了：

也可以這樣寫：

<head>
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.min.css&#39;) }}">
<link rel="stylesheet" href="{{ url_for(&#39;static&#39;, filename=&#39;bootstrap/css/bootstrap.css&#39;) }}">
<style>
    .navbar-brand>img {
        display: inline;
    }
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <a href="" class="navbar-brand" style="width:250px;">
                <img  src="/static/imghwm/default1.png"  data-src="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}"  class="lazy"     style="max-width:90%" alt="淺談bootstrap中的navbar導覽欄" > STEM教育
            </a>
        </div>
    </div>
</nav>
</body>

效果是一樣的：

解釋：

display:inline 的作用是設定物件做為行內元素顯示，也就是它能夠將垂直排列變成橫向排列。

.collapse－設定p元素為視口大於768px時顯示；

.navbar-collapse－設定p元素為導覽條元件各列表項目的父元素；

這裡說的有點不清楚，我解釋一下，collapse的作用是為了當瀏覽器的視窗寬度小於768px的時候，將設定為collapse樣式的p元素內的所有其它元素都折疊起來，以一個列表的形式顯示。

範例：

可以看到以現在的大小，還沒有進行折疊，當再縮小時，就會折疊：

#.navbar-nav－設定ul為導覽條元件內的清單元素;

.navbar-left－設定導覽列內元素向左對齊；

.navbar-right－設定導覽列內元素向右對齊；

當出現navbar-right時：

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

運行結果如下：

可以看出form和ul不在同一行，這是因為ul使用navbar-right指定靠右顯示，而form並未指定靠左還是靠右。 form應指定靠左顯示，即設定樣式為navbar-left

<div class="navbar-collapse collapse">
    <form class="navbar-form navbar-left">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
    <ul class="nav navbar-nav navbar-right">
        <li>
            <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
        </li>
        <li>
            <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
        </li>
    </ul>
</div>

執行解決為：

在ul標籤中使用了navbar-nav的樣式，如果沒有使用的話：

<ul class="nav  navbar-right">
    <li>
        <a ><span class="glyphicon glyphicon-log-in"></span> 登录</a>
    </li>
    <li>
        <a ><span class="glyphicon glyphicon-log-out"></span> 退出</a>
    </li>
</ul>

會導致兩個li標籤在不同的行，加上navbar-nav後，可以讓兩個li標籤在同一行顯示。

.navbar-form－為導覽列元件內部的表單元件；

navbar-form：主要調整所有form都是為行內元素

.navbar-btn——为导航条组件内部的按钮样式；

.navbar-text——为导航条组件内部的文本样式；

.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；

.breadcrumb——设置列表元素显示为路径导航组件；

form-goup和input-goup参考：https://blog.csdn.net/qq_15267341/article/details/54016811写的很好哦。

<span class="glyphicon glyphicon-search"></span>通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：

.btn 是按钮的基础，主要是调整盒模型的，.btn-default 以及其他 .btn-* 系列则是视觉样式的调整，如颜色、大小等等。

例子：

<a ><span class="glyphicon glyphicon-search"></span>搜索</a>

运行效果是：

非常难看，鼠标放上去的时候，字体下面还会出现一根横线。如果将a元素的样式设置成btn btn-default时，就好看多了，代码如下：

鼠标放上去的时候，也没有横线的，只是由白色编程灰色了：

input-group-btn的作用：

例子:

<form class="navbar-form">
    <div class="form-group input-group">
        <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
        <span><a class="btn btn-default"><span
                class="glyphicon glyphicon-search"></span>搜索</a></span>
    </div>
</form>

运行效果如下：

想要将搜索放在文本框后面，只需要将入input-group-btn样式就可以了：

<div class="navbar-collapse collapse">
    <form class="navbar-form">
        <div class="form-group input-group">
            <input type="text" class="form-control" id="key-movie" placeholder="输入视频名称">
            <span class="input-group-btn"><a class="btn btn-default"><span
                    class="glyphicon glyphicon-search"></span>搜索</a></span>
        </div>
    </form>
</div>

运行结果如下：

如果将input-group-btn换成input-group-addon后，就会变成如下的样子：

是不是很难看？

更多编程相关知识，请访问：编程视频！！

以上是淺談bootstrap中的navbar導覽欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

了解響應式網絡設計的引導網格系統May 14, 2025 am 12:07 AM

Bootstrap'SgridSemiteStemfiveDuetoIts12-columnlayOutAndResponsiveClasses，允許ForfforFlexibleanDmaintabainbabledesignsignsigns.toleverations.toleveration：1）userowsandcolumnswithclasseslikecol-md，col sm，col-lggfordforentscreenscreenscreens.2）

Bootstrap網格系統：響應迅速佈局的綜合指南May 13, 2025 pm 04:17 PM

BootstrapGridSemessentialForCreatingResponsivElayouts.1）ItuseScontainers，行，和ColumnSbasedona12-ColumnLaylayOut.2）cssflexboxandMediaqueriesensEnsureflexibilityAcrossscreenscreensacribilityAcrosscreensacrizes.3）classLikeCol-XSSLLIKECOL-XSSLIKECOL-XM，COLIKECOL-XM，COL-SM，COLCHANGCHANGCHANGCHENSCHENTCHESCHEN.4）

Bootstrap：所解釋的應用和優勢May 10, 2025 am 12:18 AM

Bootstrap是一個前端框架，用於快速構建響應式網站。其優勢包括：1.快速開發：利用預定義樣式和組件。 2.一致性：提供統一設計風格。 3.響應式設計：內置網格系統適應各種設備。通過CSS類和JavaScript插件，Bootstrap簡化了網頁開發過程。

Bootstrap：簡化響應式Web開發May 09, 2025 am 12:13 AM

Bootstrap簡化開發流程主要通過其柵格系統、預定義組件和JavaScript插件。 1.柵格系統允許靈活佈局，2.預定義組件如按鈕和導航欄簡化樣式設計，3.JavaScript插件增強交互功能，提升開發效率。

Bootstrap：響應式Web設計的關鍵May 08, 2025 am 12:24 AM

Bootstrap是由Twitter開發的開源前端框架，提供了豐富的CSS和JavaScript組件，簡化了響應式網站的構建。 1)其網格系統基於12列佈局，通過類名控制元素在不同屏幕尺寸下的顯示。 2)組件庫包括按鈕、導航欄等，易於定制和使用。 3)工作原理依賴於CSS和JavaScript文件，需注意處理依賴關係和样式衝突。 4)使用示例展示了基本和高級用法，強調了自定義功能的重要性。 5)常見錯誤包括網格系統計算錯誤和样式覆蓋，需使用開發者工具調試。 6)性能優化建議只引入必要組件，使用預處理器定製樣

Bootstrap：一個強大的Web設計框架May 07, 2025 am 12:05 AM

Bootstrap是一個開源的前端框架，由Twitter團隊開發，旨在簡化和加速網頁開發過程。 1.Bootstrap基於HTML、CSS和JavaScript，提供了豐富的組件和工具，用於創建現代化的用戶界面。 2.它的核心在於響應式設計，通過預定義的類和組件實現各種佈局和样式。 3.Bootstrap提供了預定義的UI組件，如導航欄、按鈕、表單等，易於使用和調整。 4.使用示例包括創建簡單的導航欄和高級的可折疊側邊欄。 5.常見錯誤包括版本衝突、CSS覆蓋和JavaScript錯誤，可通過版本管理工具

Bootstrap在React中的力量：詳細的外觀May 06, 2025 am 12:06 AM

Bootstrap在React中可以通過兩種方式集成：1)使用Bootstrap的CSS和JavaScript文件；2)使用React-Bootstrap庫。 React-Bootstrap提供了封裝好的React組件，使得在React中使用Bootstrap更加自然和高效。

在React中使用Bootstrap組件：逐步教程May 05, 2025 am 12:09 AM

在React項目中使用Bootstrap組件可以通過兩種方式：1)使用原始Bootstrap的CSS和JavaScript；2)使用專門為React設計的庫如react-bootstrap或reactstrap。 1)通過npm安裝Bootstrap並在入口文件中引入其CSS文件，然後在React組件中使用Bootstrap類名。 2)安裝react-bootstrap或reactstrap後，直接使用其提供的React組件。使用這些方法可以快速構建響應式UI，但需注意樣式加載、JavaScript

See all articles