Bootstrap3制作自己的导航栏
作者:lijiao 发布时间:2023-08-23 02:13:08
导航栏是一个很好的功能,是Bootstrap 网站的一个突出特点。导航栏是响应式元组件就,作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开。在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式。
创建一个默认的导航栏的步骤如下:
向 <nav> 标签添加 class .navbar、.navbar-default(白底黑字),navbar-inverse(黑底白字)
向上面的元素添加 role="navigation",有助于增加可访问性。
向 <div> 元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
下面实例为大家分享使用Bootstrap3制作的导航栏,具体内容如下
比如
微博
那么如何写出这样方便这样的组件
使用bootstrap3吧!
直接说使用
一般情况下导航放到如下的结构中
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
1、nav标签
第一层 class中 navbar是必须的 其他的属性是可选的
添加navbar-default创建的是最基本的导航,不会固定在哪个位置颜色是透明的
添加navbar-inverse类 颜色变为黑色
添加navbar-fixed-top固定在顶部,添加navbar-fixed-bottom固定在底部
添加navbar-static-top 效果如下
<div class="navbar-header">
导航的头 比如说网站的loge 点击进去主页,或者是网站的名称
效果如上
这里可以换成文字 我感觉效果会更好
2、表单
在导航里添加表单,比如搜索,登录什么的也比较常见
比如我上面的搜索
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
解释一下其中的navbar-left类会把这个form定位在左边
当然也对应有navbar-right类
同理 按钮可以这样加
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
文本可以这样加
<p class="navbar-text">Signed in as Mark Otto</p>
链接可以这样加
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
并且这样都可以添加navbar-right或者navbar-left类
我的导航
<!--导航-->
<div class="navbar-wrapper">
<div class="container" id="navcontainer">
<nav class="navbar navbar-inverse navbar-fixed-top " role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">先声文库</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a data-toggle="modal" data-target="#register" >注册</a></li>
<li><a data-toggle="modal" data-target="#signin" >登录</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
效果如下
猜你喜欢
- 集群是一种实现高可用性的有效解决方案,有时它会适得其反。而且,它还非常昂贵。因此,数据库管理员可使用日志转移代替集群来提供较高的可用性。日志
- 内容概要:print() 是一个常用函数。那么,您是否注意过,print() 会在显示当前语句后换行。如果遇到需要连续显示、不换行的情况,比
- 代码如下:ADODB.Connection 错误 '800a0e7a' 未找到提供程序。该程序可能未正确安装。 /连接“网站
- 新一代W3C,xhtml代码规范,大家在设计网站的时候务必遵循这一规范 ,这将对网站的优化,网站的推广,搜索引擎的友好
- 感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。需要的朋友可以参考下。下面是html测试代码:<!DOC
- 有没有办法更快一点? 有没有办法一次性收缩所有数据库? 代码如下:alter database 数据库名 set recovery simp
- 流行的 JavaScript 库有jQuery,MooTools,Prototype,Dojo和YUI等,这些 JavaScript 库功能
- vbscript中,错误处理使用on error resume next来完成,如果在你的代码里加入这一句,在这句之后的其他代码如果出现错误
- 这几天一直困惑我的问题,我觉得pycharm应该也是有的啊,偶然间找到了这个。把那个框里的选中,就可以了。ps:我的是 PyCharm 20
- 用FrontPage做网页的朋友们,你的主要页面中,可能都带有许多相同的元素吧?如页头横向排列(或左侧纵向排列)的主要链接按钮、页底的板权说
- 但是有时候,可以视看处进逻辑程度,可以把三者写成一个触发器,只是在其中稍作判断而已。 你可以根据从下面方法判断触发器是是处理了插入,删除还是
- 前面的深入理解Routing章节,我们讲到了在MVC中,除了使用默认的ASP.NET 5的路由注册方式,还可以使用基于Attribute的特
- 孟宪会 由于XML(可扩展标记语言:eXtensible Markup Language)真正的平台无关性,它正在逐渐成为数据传
- 最近由于单位数据库硬盘空间不足,整理的时候查了许多文章,也进行了测试,整理后得出一些经验供大家参考。首先,在网上看到一篇文章,如何Shrin
- 1. 二维(多维)数组降为一维数组方法1: reshape()+concatenate 函数,这个方法是间接法,利用 reshape() 函
- 购物车是电子商务网站中不可缺少的组成部分,但目前大多数购物车只能作为一个顾客选中商品的展示,客户端无法将购物车里的内容提取出来满足自己事务处
- 在获得网页响应对象res后,使用res.text属性可以获得网页源代码,但可能出现乱码!因为requests库会使用自动猜测的解码方式将抓取
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- <!--#include file="Include/Conn.asp"--><%If(Request
- 内容摘要:Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQL Server服务器系统和数据库的安全进行