位置: 编程技术 - 正文

JS组件Bootstrap导航条使用方法详解(bootstrap 组件库)

编辑:rootadmin

推荐整理分享JS组件Bootstrap导航条使用方法详解(bootstrap 组件库),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:bootstrap js,js bootstraptable,引入bootstrap的js文件,引入bootstrap的js文件,bootstrap.js怎么用,bootstrap ui组件库,js bootstraptable,bootstrap js插件,内容如对您有帮助,希望把文章链接给更多的朋友!

导航条是在您的应用或网站中作为导航标头的响应式元组件。

1、默认的导航条

导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式定制折叠模式与水平模式的阈值根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。第一步:最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条

效果:

第二步:增加header

按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起),点击的时候目标为data-target。当窗口缩小到一定程度,右侧的效果显现。

第三步:嵌套下拉菜单,form表单,下拉菜单。代码:

预览:

增强导航条的可访问性要增强可访问性,一定要给每个导航条加上role="navigation"。

JS组件Bootstrap导航条使用方法详解(bootstrap 组件库)

2、表单将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

通过使用mixin,.navbar-form和 .form-inline共享了很多代码。

代码

为输入框添加label标签如果你没有为输入框添加label标签,屏幕阅读器将会遇到问题。对于导航条内的表单,可以通过.sr-only class隐藏label标签。

3、按钮代码:<button type="button" class="btn btn-default navbar-btn">登陆</button>预览:

4、文本把文本包裹在.navbar-text中时,为了有正确的行距和颜色,通常使用<p>标签。代码段:<p class="navbar-text">文本</p>5、非导航的链接或许你希望在标准的导航组件之外添加标准链接,那么,使用.navbar-link class可以让链接有正确的默认颜色和反色。代码段: 6、组件对齐用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的<ul>里。

这些class是.pull-left和.pull-right的mixin版本,但是他们被限定在了媒体查询中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

7、固定在顶部添加.navbar-fixed-top可以让导航条固定在顶部。效果就不上了。需要为body标签设置内补(padding)这个固定的导航条会遮住页面上的其它内容,除非你给<body>的上方设置了padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是px。

body { padding-top: px; }一定要放在Bootstrap CSS的核心文件之后。(覆盖问题)8、固定在底部用.navbar-fixed-bottom代替。需要为body标签设置内部(padding)这个固定的导航条会遮住页面上的其它内容,除非你给<body>底部设置了padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是px。

body { padding-bottom: px; }一定要在加载Bootstrap CSS的核心后使用它。9、静止在顶部通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是,你不用给body添加padding。、反色的导航条通过添加.navbar-inverse类可以改变导航条的外观。

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

标签: bootstrap 组件库

本文链接地址:https://www.jiuchutong.com/biancheng/369907.html 转载请保留说明!

上一篇:浅析BootStrap模态框的使用(经典)(bootstrap模态窗口)

下一篇:Bootstrap实现下拉菜单效果(bootstrap 下拉框绑定数据)

  • 纳税等级是指什么意思
  • 增值税延期滞纳金是多少
  • 未使用固定资产计提折旧计入
  • 报销是否需要发票
  • 销售净水器营业执照范围
  • 员工住院的发票可以做账吗
  • 可变股权转让对价会计处理怎么做?
  • 企业所得税中的不征税收入有哪些
  • 什么时候应做资产减值准备?
  • 一个订单只能申请一次退款吗
  • 一般户开户行可以开增值税专票么
  • 保理利率多少可以买房
  • 增值税先征后退属于政府补助吗
  • 一般纳税人税控盘维护费会计分录
  • 购买设备对方垫付运费会计分录
  • 本年利润每个月都要结转吗
  • 免抵退税申报表主表
  • window10拖动窗口的手势
  • 如何解决windows7无法开机
  • win8.1电脑设置在哪里
  • 实收资本不到位后果
  • 金融企业贷款逾期怎么办
  • mac重装macos
  • php odbc
  • uniapp示例
  • 企业预缴增值税附加税率
  • 原材料当废品卖出分录
  • mysql 临键锁
  • 以前年度损益调整结转到本年利润吗
  • 异地托收承付结算金额起点为
  • 为员工购买意外险会计处理
  • 记账和结账可以一起用吗
  • python卡方分布随机数
  • 无形资产商标设计图片
  • 预收账款什么时候确认增值税
  • 总账和明细账期间相同吗
  • 贴现业务受理该怎么做
  • mysqlreport显示Com_中change_db占用比例高的问题的解决方法
  • 工资薪金可以抵扣增值税吗
  • 企业收到的
  • 无票收入增值税怎么申报
  • 劳务公司可以用工资表做成本
  • 现金付发票再摊销怎么算
  • 科研经费的间接费用会审核吗
  • 收到捐赠的账务处理和涉税处理
  • 研发和技术服务税收分类编码
  • 研发支出主要包括
  • 营业外支出如何做账
  • 在建工程二级科目待摊支出
  • mysqlusing
  • mysql实用教程
  • sql convert函数使用小结
  • 删除微软
  • linux中压缩文件
  • 电脑图片打印不出来怎么办
  • windows10周年更新
  • win10周年版
  • Linux VPS vsftp/proftpd FTP时间差八小时的解决方法
  • 在linux系统中创建文件的命令
  • win7磁盘空间不足怎么清理文件
  • Win10 mobile 10586.107升级后会出现哪些bug?
  • 车钥匙失灵了10秒教你快速解决
  • batch批处理
  • 很不错的词语
  • python语言基础与应用答案
  • perl 匹配不区分大小写
  • Error: String types not allowed (at 'layout_gravity' with value 'bottom/center_horizontal').
  • shell 四则运算
  • python编码函数
  • 统计文件个数linux
  • Web Inspector:关于在 Sublime Text 中调试Js的介绍
  • 字符串中指定字符变换
  • nodejs+ts
  • unity?
  • python多进程多线程协程
  • android下载图片并保存到本地
  • 养老待遇核定表在哪办理
  • 年应税销售额超过小规模纳税人标准的企业
  • 广西纳税申报流程
  • 财务公司怎么做
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设