本文实例为大家分享了bootstrap导航条的具体代码，供大家参考，具体内容如下
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">W3School
<nav class="navbar navbar-inverse navbar-static-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">W3School
<nav class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav navbar-nav">
<li class="active"><a href="#">W3School
效果：
导航条的其他样式：
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">
<img src="user_photo.png" height="20"/>
<ul class="nav navbar-nav">
<li class="active"><a href="#">W3School
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">W3School
<ul class="nav navbar-nav navbar-right">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">W3School
<a href="#" class="navbar-link navbar-text">链接
<p class="navbar-text">这里是一段文字
<ul class="nav navbar-nav navbar-right">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">logo
<ul class="nav navbar-nav navbar-left">
<li class="active"><a href="#">W3School
<button class="btn btn-success navbar-btn">搜索
<form action="aaa.html" class="navbar-form navbar-left">
<input type="text" class="form-control"/>
<button class="btn btn-default">搜索
效果：
如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/bootstrap/43037.html