navbar-default、navbar-brand（logo栏）、navbar-text

最新推荐文章于 2022-04-14 23:00:01 发布
最新推荐文章于 2022-04-14 23:00:01 发布
阅读量4.5k 收藏 12
点赞数 2
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fengyingdongdang/article/details/76215901
版权

1、navbar-default

.navbar-default:导航栏默认样式，用于<nav>元素。


2、navbar-brand（logo栏）

.navbar-brand:设置品牌图标样式。（放置LOGO）



3、navbar-text

.navbar-text:对于导航栏的普通文本有了行距和颜色，通常用于<p>元素。

（同一行显示）



 


Fengyingdongdang
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
升级后的bootstrap3的navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text、navbar-btn的小实验
ling811的专栏
11-23 1万+
1、升级后的bootstrap 3.0.2版本的 这些里面的东西换了些名字，新增了，删除了些标签，不过功能还都是一样的。 2、小实验代码： 无标题文档 Toggle navigation Brand
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
Bootstrap导航条、分页导航
u011435776的博客
03-29 750
【导航条navbar】在bootstrap中导航与导航条在外观方面差不多，但在实际应用时，导航条却要复杂的多。导航条制作方法：第一步：首先在制作导航的列表(&lt;ul class=”nav”&gt;)基础上添加类名“navbar-nav”第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”1、“.navbar”样式的主要功能就是设置左右padd...
Bootstrap-组件-2
月迷津渡丶的专栏
03-29 497
导航条 品牌图标 将导航条内放置品牌标志的地方替换为 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。 表单 将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以规定其在
bootstrap之navbar
cat_moon的博客
02-26 764
.navbar——设置nav元素为导航条组件； .navbar-default——指定导航条组件为默认主题； .navbar-inverse——指定导航条组件为黑色主题； .navbar-fixed-top——设置导航条组件固定在顶部； .navbar-fixed-bottom——设置导航条组件固定在底部； .container-fluid——设置宽度充满父元素，即为100%； .navbar-h...
Bootstrap----导航栏
weixin_52247167的博客
04-14 9897
文章目录 一、导航栏 1、container 2、navbar 3、navbar-expand-xx 4、navbar-xxxx 5、bg-xxxx 6、navbar-brand 7、navbar-toggler 8、navbar-toggler-icon 9、定位 二、导航栏之切换触发器 1、data-toggle="xxx" 2、data-target="#id" 3、aria-controls="id" 4、aria-label 5、aria-expanded="bo.
【前端开发】bootstrap框架：导航栏
`雾博客
06-18 5671
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开 默认的导航栏 向 <nav>标签添加 class .navbar、.navbar-default。 向上面的元素添加role="navigation"，有助于增加可访问性 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class nav.
Bootstrap 组件：导航条组件的使用
WangMin@汪末末
09-06 2633
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 默认样式的导航条 Bootstrap的导航条包含两部分内容：一部分用来放置图标按钮，由.navbar-header的容器定义；另一部分用来放置导航组件，由.na
零基础Bootstrap入门教程(21)--响应式导航栏详解
程序员大阳
02-28 4989
本文目录1. 概述2. 响应式导航栏3. 可折叠导航栏4. 深色导航栏5. 顶部固定菜导航栏6. 导航栏添加下拉菜单和表单控件7. 小结 1. 概述 在很长的一段时间里，我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点，同时支持PC端显示和手机端显示。 当使用手机打开时，导航栏会自动折叠为一个按钮，效果棒极了。 后来学会了Bootstrap才知道，偶买噶，Bootstrap提供的导航栏原来天生就带这效果。厉害！ 2. 响应式导航栏 导航栏的创建还是比较复杂的，但是不要担心，我们来一步步分析创建过程。
Boostrap nav和navbar的详细使用
weixin_46724638的博客
05-01 4666
bootstrap之navbar container：固定960px宽度，（如果又引入了响应式样式，则会适当调整，例如1600*900，它会显示1200px） container-fluid:自适应屏幕宽度，即满屏显示。 row和col可以参考一下：https://blog.csdn.net/yzy85/article/details/53021385?locationNum...
markdown-navbar:React 的最佳降价导航栏
07-24
yarn add markdown-navbar # or `npm i markdown-navbar --save` 快速开始 import React from 'react' ; import ReactDOM from 'react-dom' ; // One third-part component for render markdown documentation ...
react-native-detect-navbar-android:React Native模块，告知android设备是否具有软导航栏
05-28
react-native-detect-navbar-android 检测Android设备的软导航栏，以便您知道哪个具有物理键（Home，Back，Menu），而哪些没有。 注意：该项目仅适用于Android，如果您使用它来检测软键是否被隐藏，它将无法正常...
Bootstrap-5-offcanvas-navbar-menu:在手机上具有Offcanvas视图的响应式Navbar
05-11
Bootstrap-5-offcanvas-navbar菜单 以前，您必须为左侧菜单编写很多CSS代码。 现在，我结合了Bootstrap 5随附的offcanvas和navbar菜单。 该设计不是很好，但是我尝试不编写额外CSS代码来做到这一点。 就是这样。 :...
bootstrap-navbar：帮助程序生成Twitter Bootstrap导航栏
01-29
帮助程序生成Bootstrap样式导航栏 安装 该gem仅提供一个带有生成HTML方法的帮助程序模块。 其他gem可以使用它来使这些帮助程序可用于框架的渲染引擎，例如： 对于Rails： : 对于 ： : 简而言之：除非您知道自己...
sticky-navbar-tutorial:rohitdalal.com的教程代码
05-04
该项目是通过引导的。可用脚本在项目目录中，可以运行：npm install 安装package.json文件中概述的所有项目依赖项。 如果您已经拥有所需的依赖项，则可以从下一步开始：npm start 在开发模式下运行应用程序。...
导航栏(navbar) - bootStrap4常用CSS笔记
weixin_30609331的博客
05-14 1万+
导航栏：navbar 导航栏容器可以包含以下几个常用组成： 1、品牌LOGO（.navbar-brand ） 2、导航菜单（.navbar-nav） 3、导航文本（.navbar-text） 4、折叠导航按钮（.navbar-toggle） 5、表单（.form-inline） 一、导航容器一般使用nav标签来定义： <nav class="navbar">...
bootstrap学习笔记之为导航条添加标题、二级菜单及状态
05-01 850
为导航条添加标题、二级菜单及状态 加入导航条标题 在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现，示例查看代码编辑器（11-22）。 原理分析： 此功能主要起一个提醒功能，当然改良一下可以当作是logo(此处不
Bootstrap之navbar组件
u010078133的专栏
06-22 3251
一、简介 Navbar 指导航条，它在移动设备上显示为折叠状态，在宽屏幕上水平展开。这里 是一个线上例子。 {提示} 响应式导航条依赖 collapse 插件，定制 Bootstrap 时务必要包含。 {设备的可访问性} 务必使用  元素；如果使用  元素，需要设置属性 role="navigation"。这样能让辅助设备道这是一个导航条。 一个典型导航条的结
bootstrap使用中nabar-brand和nabar-left的问题
Iam_am_lbj的博客
04-23 211
网站头部模板编写的时候img标签中的logo图片总是溢出 类似这样 代码如下 <div class="navbar-header"> <a class="navbar-brand" href="http://www.itdiffer.com"><img src="{% static '/images/logo3.jpg' %}" width=...
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
最新发布
05-29
这是一个用于响应式导航栏的 HTML 元素，它是一个折叠的菜单容器，当用户在小屏幕设备上点击导航栏的按钮时，它会展开或折叠菜单项。其中"class"属性指定了该容器应用的样式，"id"属性指定了该容器的唯一标识符，用于在 JavaScript 中操作该元素。 该元素一般与其他导航栏元素结合使用，例如链接、下拉菜单等，例如： ``` <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </nav> ``` 在这个例子中，该元素包含了一个无序列表（ul）和一个表单（form），当用户在小屏幕设备上点击导航栏的按钮时，这些元素会展开或折叠。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值