浅谈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="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}" style="height:30px;"> 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="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}" style="height:30px;display:inline;"> 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="{{ url_for(&#39;static&#39;, filename=&#39;base/images/logo.png&#39;) }}" style="height:30px;"> 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写的很好哦。

77b1cee26c93afa6b9aba6ed1eaeb61954bdf357c58b8a65c66d7c19c8e4d114通常用户放在搜索字体的前面，显示一个小小的搜索图标，如下图：

.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删除

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

简单英语的引导程序：简化网络开发May 04, 2025 am 12:02 AM

Bootstrap是开源的前端框架，简化网页开发。1.它基于HTML、CSS、JavaScript，提供预定义样式和组件。2.使用预定义类和JavaScript插件，实现响应式布局和交互功能。3.基本用法是引入CSS和JavaScript文件，使用类创建导航栏等。4.高级用法包括自定义复杂布局。5.调试时检查类名和文件引入，使用开发者工具。6.优化建议是只引入必要文件，使用CDN，自定义时用LESS或Sass。

引导和反应：创建响应式Web应用程序May 03, 2025 am 12:13 AM

如何利用Bootstrap和React打造响应式Web应用？通过结合Bootstrap的CSS框架和React的组件化架构，可以创建现代、灵活且易于维护的Web应用。具体步骤包括：1）导入Bootstrap的CSS文件并使用其类样式化React组件；2）利用React的组件化管理状态和逻辑；3）按需加载Bootstrap样式以优化性能；4）使用React的Hooks和Bootstrap的JavaScript组件创建动态界面。

See all articles