Bootstrap响应式导航栏

时间  2019-11-12
标签 bootstrap 响应 导航 栏目 Bootstarp 繁體版
原文   原文链接

一.建立一个导航栏的步骤css

1.<nav></nav>标签添加  .navbar .navbar-defaulthtml

2.像<nav>内部添加一个标题<div> 带有class .navbar-header，内部包含带有 class navbar-brand的<a>元素--让文本看起来大一号。jquery

3.为导航栏添加链接 带有class .nav .navbar-nav的无序列表ulbootstrap

二.建立一个响应式导航栏ide

1.<nav></nav>标签添加  .navbar .navbar-defaultui

2.像<nav>内部添加一个标题<div> 带有class .navbar-header，内部包含带有 带有class .navbar-togglespa

data-toggle="collapse" 告诉按钮应该作什么，  data-taregt="#exmple-navbar" 指示要切换的是哪一个元素 的<button>orm

3.<button>加入三个 <span class="icon-bar"></span> 三条线   汉堡按钮 ， <a class="navbar-brand" href="#">响应式导航</a> 导航标题htm

4.在带有class .navbar-header，的div下面 ，插入一个div  带有 class  .collapse navbar-collapse,包裹要折叠的内容。ip

5.在上一个div内部插入无序列表<ul class=nav navbar-nav">

 

正常

缩小后

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>响应式导航栏</title>
    </head>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <body>
        <nav class="nav navbar-default">
             <div class="container-fluid">
                 <div class="navbar-header"><!--标题-->
                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target = "#example-navbar">
           <!--data-toggle告诉按钮该作什么,data-target="#example-navber"指示要切换的是哪一个元素-->
                         <span class="sr-only">切换导航</span><!--只对屏幕阅读器可见-->
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>         <!--面包按钮,网页缩小时出现-->
                         <span class="icon-bar"></span>
                     </button>
                     <a class="navbar-brand" href="#">响应式导航</a>
                 </div>


                 <!---被折叠的内容必须包裹在class .collapse navbar-collapse的div中-->
                 <div class="collapse navbar-collapse" id="example-navbar">
                     <ul class="nav navbar-nav">
                         <li class="active"><a href="#">first</a></li>
                         <li><a href="#">second</a></li>
                         <li><a href="#">third</a></li>
                         <li class="divider"></li>
                     </ul>
                 </div>
             </div>
        </nav>
    </body>
</html>
 

 

 

三.导航栏中的表单

form中添加 .navbar-form 确保表单适当的垂直对齐和在较窄的视口中的折叠行为。

把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

.navbar-left对齐方式，决定导航栏中内容放在哪里。

<html>
    <head>
        <meta charset="UTF-8">
        <title>响应式导航栏</title>
    </head>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header"><!--标题-->
                    <a class="navbar-brand">导航栏中的表单</a>    
                </div>
                <div>                     <form class="navbar-form navbar-left" role="search">                         <div class="form-group">                             <input type="text" class="form-control" />                         </div>                         <button type="submit" class="btn btn-primary">查找</button>                     </form>                 </div>             </div>         </nav>     </body> </html>  

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程