升级后的bootstrap3的navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text、navbar-btn的小实验

最新推荐文章于 2025-05-30 09:07:30 发布

原创

最新推荐文章于 2025-05-30 09:07:30 发布 · 1.9w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#navbar-brand #navbar-collapse #navbar-toggle #navbar-header #bootstrap3

本文介绍了升级到Bootstrap 3.0.2后，navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text和navbar-btn等组件的变化。通过一个小实验展示了这些组件在新版本中的应用和调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、升级后的bootstrap 3.0.2版本的

这次试验的是navbar-brand、navbar-collapse、navbar-toggle、navbar-header、navbar-text、navbar-btn

除了navbar-text、navbar-header新增的剩下的都是改名称的，

相对应的修改的名称：

`.brand`	`.navbar-brand`
`.nav-collapse`	`.navbar-collapse`
`.nav-toggle`	`.navbar-toggle`
`.btn-navbar`	`.navbar-btn`

2、小实验代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

依然那么楞

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

java左侧菜单栏_左侧和右侧导航栏项目左侧的Bootstrap 3 Navbar Collapse菜单

weixin_39960145的博客

02-16

926

我有一个带有左侧导航项和右侧导航项的Bootstrap 3导航栏(如下所示) .折叠时，我希望导航栏切换(AKA'汉堡菜单')及其项目保持对齐 .我的代码到目前为止：LeftLeftRightRight要在左侧进行导航栏切换的CSS是：@media (max-width:767px) {.custom-navbar .navbar-right {float: right;padding-right...

bootstrap之navbar

weixin_30616969的博客

05-27

646

container：固定960px宽度，（如果又引入了响应式样式，则会适当调整，例如1600*900，它会显示1200px） container-fluid:自适应屏幕宽度，即满屏显示。 row和col可以参考一下：https://blog.youkuaiyun.com/yzy85/article/details/53021385?locationNum=2&fps=1和http://v3...

参与评论您还未登录，请先登录后发表或查看评论

全面解析Bootstrap中nav、collapse的使用方法

09-02

主要为大家详细解析了Bootstrap中nav、collapse的使用方法，感兴趣的朋友可以参考一下

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

Fengyingdongdang的博客

07-27

4938

1、navbar-default .navbar-default:导航栏默认样式，用于元素。 2、navbar-brand（logo栏） .navbar-brand:设置品牌图标样式。（放置LOGO） 3、navbar-text .navbar-text:对于导航栏的普通文本有了行距和颜色，通常用于元素。（同一行显示）

Bulma框架中的Navbar组件详解

最新发布

gitblog_00453的博客

05-30

288

Bulma框架中的Navbar组件详解概述 Navbar（导航栏）是Bulma框架中一个功能强大且响应式的水平导航组件。作为现代Web应用的重要组成部分，Navbar提供了完善的导航功能和优雅的视觉设计，能够自动适应不同屏幕尺寸。基本结构 Bulma的Navbar组件采用模块化设计，主要包含以下结构元素： <nav class="navbar" role="...

bootstrap .navbar-header 控制button隐藏/显示

qq_32563571的博客

08-26

9525

bootstrap 的导航条标签做的很完美！我们用这个标签主要解决手机端和PC端适配的问题，结果复制过来不能用。。检查：是否引入bootstrap.css js; 再重点检查有没有下面这行代码。 <meta name="viewport" content="width=device-width, initial-scale=1"> 下面是导航条源码 <nav c...

bootstrap-3.4.1.zip

02-21

例如，使用`.btn`类创建按钮，`.bg-*`类改变背景颜色，`.text-*`类改变文本颜色等。 4. **JavaScript插件**：除了CSS，Bootstrap还提供了JavaScript插件，如模态框、下拉菜单、工具提示（tooltip）和弹出框...

纵向导航栏使用navbar-nav-scroll溢出截断问题

凉拌糖醋鱼

06-01

1100

在使用Bootstrap的格栅系统进行纵向布局时，纵向导航栏使用了flex-column和navbar-nav-scroll类，导致当纵向导航栏的项目达到一定数量时，内容出溢出截断，使得页面底部会空出来一截，所以在类似的布局中应避免使用Flex布局，使用按钮组或列表组的形式做出纵向导航栏的效果，使用JS来实现动态点击效果。

Bootstrap-3-Tutorial-14---Dropdown-Dividers:以下视频教程的代码

07-14

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> <ul class="dropdown-menu"> <li><a href="#">菜单项1</a></li> <li><a ...

Bootstrap组件之导航条

bboyjoe的博客

07-31

4826

.navbar——设置nav元素为导航条组件； .navbar-default——指定导航条组件为默认主题； .navbar-inverse——指定导航条组件为黑色主题； .navbar-fixed-top——设置导航条组件固定在顶部； .navbar-fixed-bottom——设置导航条组件固定在底部； .container-fluid——设置宽度充满父元素，即为100%； .na

【前端开发】bootstrap框架：导航栏

`雾博客

06-18

7266

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开默认的导航栏向 <nav>标签添加 class .navbar、.navbar-default。向上面的元素添加role="navigation"，有助于增加可访问性向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class nav.

Bootstrap 组件：导航条组件的使用

WangMin@汪末末

09-06

3052

作者:WangMin 格言:努力做好自己喜欢的每一件事优快云原创文章博客地址 ???? WangMin Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。默认样式的导航条 Bootstrap的导航条包含两部分内容：一部分用来放置图标按钮，由.navbar-header的容器定义；另一部分用来放置导航组件，由.na

Bootstrap 组件之 Navbar

weixin_30906671的博客

03-21

146

一、简介 Navbar 指导航条，它在移动设备上显示为折叠状态，在宽屏幕上水平展开。这里是一个线上例子。 {提示} 响应式导航条依赖 collapse 插件，定制 Bootstrap 时务必要包含。 {设备的可访问性} 务必使用 <nav> 元素；如果使用 <div> 元素，需要设置属性 role="navigation"。这样能让辅助设备道这是一个导航条。一个...

Bootstrap3基础教程 03 导航栏

weixin_34301307的博客

05-29

367

Bootstrap导航栏创建一个默认的导航栏的步骤如下： 1.向 <nav> 标签添加 class.navbar、.navbar-default。 2.向上面的元素添加role="navigation"，有助于增加可访问性。 3.向 <div> 元素添加一个标题 class.navbar-header，内部包含了带有 classnavbar-brand的...

解析Bootstrap中nav、collapse的使用方法

jshyzx1999的博客

03-31

1354

一、导航分析（nav) 源码文件：_navs.scss：导航模块Mixins/_nav-divider.scss：分隔线Mixins/_nav-vertical-align.scss：垂直对齐 1、只是用css进行了样式修饰，对Js没有任何依赖 2、导航模块可以包含下拉模块 3、实现了水平、垂直、水平平均分配（table-cell实现，4.0移除）、tabs、胶囊等样式 4、Nav...

Bootstrap----导航栏