Bootstrap导航栏和下拉菜单

导航栏写法示例:
这里写图片描述

<nav class="nav navbar-default">
    <div class="container">
        <div class="navbar-header">
            
            <p class="navbar-brand">ITp>
        div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Javaa>li>
            <li><a href="#">C/C++a>li>
            <li><a href="#">Shella>li>
            <li><a href="#">Pythona>li>
        ul>
    div>
nav>

此例中,导航栏有个nav标签作为整个导航栏的容器,它的class是nav navbar-default;下一层则是一个div标签作为一个Bootstrap的container容器,这里的作用是限定容器为页面的中心位置,并左右各据边界一定距离,让页面看起来不偏不倚;里层责包含的两个部分,一部分是导航栏的头(header),div作为导航栏的头部,class为navbar-header,在这个div里可以安排一些内容作为导航栏最左边的头部;还有一部分就是无序表,作为导航menu,ul的class为nav navbar-nav。


下拉菜单示例:
这里写图片描述

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        Dropdown
        <span class="caret">span>
    button>
    <ul class="dropdown-menu">
        <li><a href="#">Javaa>li>
        <li><a href="#">C/C++a>li>
        <li><a href="#">Pythona>li>
        <li><a href="#">Phpa>li>
    ul>
div>

在下拉菜单中,它的容器是div,class为dropdown;里层由button构成触发btn,由ul/li无序表构成触发后的下拉菜单列表。button的class为btn btn-primary,还需要设置属性data-toggle=”dropdown”,才能实现下拉的功能;ul的class为dropdown-menu。


完整代码实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Testtitle>
    <link rel="stylesheet" href="css/bootstrap.css">
head>
<body>

<nav class="nav navbar-default">
    <div class="container">
        <div class="navbar-header">
            
            <p class="navbar-brand">ITp>
        div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Javaa>li>
            <li><a href="#">C/C++a>li>
            <li><a href="#">Shella>li>
            <li><a href="#">Pythona>li>
        ul>
    div>
nav>

<hr>
<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        Dropdown
        <span class="caret">span>
    button>
    <ul class="dropdown-menu">
        <li><a href="#">Javaa>li>
        <li><a href="#">C/C++a>li>
        <li><a href="#">Pythona>li>
        <li><a href="#">Phpa>li>
    ul>
div>


    <script src="js/jquery-3.1.1.js">script>
    <script SRC="js/bootstrap.js">script>
body>
html>

你可能感兴趣的:(Bootstrap)