加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

详解bootstrap导航栏.nav与.navbar区别

发布时间:2020-12-18 00:33:34 所属栏目:安全 来源:网络整理
导读:刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下; 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会

刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下;

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式。

一、简单的ul,li组成的导航:

在浏览器上显示为:

缩小浏览器窗口显示为:

二、导航栏

——

正常窗口显示为:

缩小窗口小于576px时:

三、折叠导航栏

当窗口小于576px的时候,不仅仅是简单的编程垂直导航;显示为一个button按钮,导航链接隐藏,点击button显示;

代码为:

//注意:.navbar-brand是品牌logo;

窗口大于576的时候,显示为:

窗口小于576的时候,显示为:

 

四、导航栏加上form表单表示搜索框:【?????】

代码如下:

    <button class="btn btn-success" type="submit"&gt;search</button>
  </form>

如图所示,如何使得导航栏中的form表单右对齐,移到最右边?????float:eight应该也行吧。。

emmmm.....知道了上面的解决方法了:利用网格系统,将左边的ul,li和右边的form表单分别排列;.col-sm-6;然后再给form表单右浮动;

代码如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读