bootstrap导航条实现代码

前端之家收集整理的这篇文章主要介绍了bootstrap导航条实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_403_0@本文实例为大家分享了bootstrap导航条的具体代码,供大家参考,具体内容如下


<div class="jb51code">
<pre class="brush:xhtml;">
<body style="padding-top:50px">

<div class="container">

<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="active"><a href="#">W3School

  • <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

  • @H_403_0@效果

    @H_403_0@导航条的其他样式:

    <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">搜索

    @H_403_0@效果

    @H_403_0@如果大家还想深入学习,可以点击<a target="blank" href="//www.jb51.cc/article/84087.htm">这里进行学习,再为大家附3个精彩的专题:


    @H
    403_0@<a target="_blank" href="//www.jb51.cc/Special/334.htm">Bootstrap学习教程

    @H_403_0@

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

    bootstrapbootstrap导航条

    猜你在找的Bootstrap相关文章