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

最新推荐文章于 2022-06-18 17:52:04 发布
最新推荐文章于 2022-06-18 17:52:04 发布
阅读量1.9w 收藏 2
点赞数 1
文章标签： navbar-brand navbar-collapse navbar-toggle navbar-header bootstrap3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling811/article/details/16903901
版权

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/ht
最低0.47元/天 解锁文章
依然那么楞
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java左侧菜单栏_左侧和右侧导航栏项目左侧的Bootstrap 3 Navbar Collapse菜单
weixin_39960145的博客
02-16 758
我有一个带有左侧导航项和右侧导航项的Bootstrap 3导航栏(如下所示) .折叠时，我希望导航栏切换(AKA'汉堡菜单')及其项目保持对齐 .我的代码到目前为止：LeftLeftRightRight要在左侧进行导航栏切换的CSS是：@media (max-width:767px) {.custom-navbar .navbar-right {float: right;padding-right...
navbar-default、navbar-brand（logo栏）、navbar-text
Fengyingdongdang的博客
07-27 4639
1、navbar-default .navbar-default:导航栏默认样式，用于元素。 2、navbar-brand（logo栏） .navbar-brand:设置品牌图标样式。（放置LOGO） 3、navbar-text .navbar-text:对于导航栏的普通文本有了行距和颜色，通常用于元素。 （同一行显示）
bootstrap .navbar-header 控制button隐藏/显示
qq_32563571的博客
08-26 9383
bootstrap 的导航条标签做的很完美！我们用这个标签主要解决手机端和PC端适配的问题，结果复制过来不能用。。 检查：是否引入bootstrap.css  js; 再重点检查有没有下面这行代码。 &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 下面是导航条源码 &lt;nav c...
bootstrap之navbar
cat_moon的博客
02-26 832
.navbar——设置nav元素为导航条组件； .navbar-default——指定导航条组件为默认主题； .navbar-inverse——指定导航条组件为黑色主题； .navbar-fixed-top——设置导航条组件固定在顶部； .navbar-fixed-bottom——设置导航条组件固定在底部； .container-fluid——设置宽度充满父元素，即为100%； .navbar-h...
全面解析Bootstrap中nav、collapse的使用方法
09-02
主要为大家详细解析了Bootstrap中nav、collapse的使用方法，感兴趣的朋友可以参考一下
Bootstrap CSS组件之导航条(navbar)
08-31
- 标题：使用`.navbar-header`类包裹一个`.navbar-brand`类的`<a>`元素，通常显示网站或应用的标识。 - 链接：通过`<ul>`和`<li>`元素创建导航链接，添加`.nav`和`.navbar-nav`类。 2. **导航条中的表单** - ...
Bootstrap3制作自己的导航栏
09-02
Bootstrap3 是一个流行的前端开发框架，它提供了许多预先设计的组件，使得构建响应式和用户友好的网页变得简单。在本教程中，我们将探讨如何利用Bootstrap3来创建自定义的导航栏。 首先，创建一个基本的导航栏需要...
第一次接触神奇的Bootstrap菜单和导航
09-01
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> <ul class="dropdown-menu" role="menu" aria-labelledby=...
BootStrap创建响应式导航条实例代码
09-02
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span class="sr-only">切换导航 <span class="icon-bar"> ...
bootstrap网页框架的使用方法
09-02
- `<button class="navbar-toggle">`与`<div class="collapse navbar-collapse">`一起工作，形成可折叠的导航菜单。 - `navbar-form`用于创建导航条内的表单，可以设置搜索框或其他输入字段。 - `form-group`类...
Bootstrap系列之导航条（Navbar）
热门推荐
老__L的博客
06-18 1万+
为Bootstrap强大的，响应灵敏的导航头，导航栏提供文档和示例，包括对面包屑、导航、折叠插件等的支持。在开始使用导航栏之前，以下是你需要知道的导航栏内置了对一些子组件的支持。根据需要从以下选项中进行选择下面是一个包含响应式光主题导航条的所有子组件的例子，它会在lg(大)断点处自动折叠。 这个例子使用了和工具类。可以应用于大多数元素，但是锚是最好的，因为一些元素可能需要实用程序类或自定义样式。 将图片添加到可能总是需要自定义样式或工具来适当的大小。下面是一些示例。 Navbar导航链接建立在我们的选
【前端开发】bootstrap框架：导航栏
`雾博客
06-18 6084
导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开 默认的导航栏 向 <nav>标签添加 class .navbar、.navbar-default。 向上面的元素添加role="navigation"，有助于增加可访问性 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class nav.
Bootstrap 组件：导航条组件的使用
WangMin@汪末末
09-06 2734
作者:WangMin 格言:努力做好自己喜欢的每一件事 CSDN原创文章 博客地址 ???? WangMin Bootstrap中的导航条（navbar）是放在应用或网站的头部，作为导航的响应式基础组件，它能够根据浏览器窗口宽度，自动调整导航条的显示状态，在移动设备上折叠（并且可开可关），在视口（viewport）宽度增加时逐渐变为水平展开模式。 默认样式的导航条 Bootstrap的导航条包含两部分内容：一部分用来放置图标按钮，由.navbar-header的容器定义；另一部分用来放置导航组件，由.na
Bootstrap3基础教程 03 导航栏
weixin_34301307的博客
05-29 303
Bootstrap导航栏 创建一个默认的导航栏的步骤如下： 1.向 <nav> 标签添加 class.navbar、.navbar-default。 2.向上面的元素添加role="navigation"，有助于增加可访问性。 3.向 <div> 元素添加一个标题 class.navbar-header，内部包含了带有 classnavbar-brand的...
解析Bootstrap中nav、collapse的使用方法
jshyzx1999的博客
03-31 1248
一、导航分析（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----导航栏
weixin_52247167的博客
04-14 1万+
文章目录 一、导航栏 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.
Boostrap nav和navbar的详细使用
weixin_46724638的博客
05-01 4785
bootstrap之navbar container：固定960px宽度，（如果又引入了响应式样式，则会适当调整，例如1600*900，它会显示1200px） container-fluid:自适应屏幕宽度，即满屏显示。 row和col可以参考一下：https://blog.csdn.net/yzy85/article/details/53021385?locationNum...
u-navbar 搜索框
最新发布
11-23
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值