w88优德娱乐平台 当前位置:首页>w88优德娱乐平台>正文

w88优德娱乐平台

发布时间:2019-04-25

原标题:bootstrap导航栏.nav与.navbar区别

其他人也是看向红衣,这是她的至宝,当然由她来命名了,就算是刘皓也想干预。

亚博体育app苹果手机下载

“对手可不只是一个的。”刘皓没有施展任何不属于这个世界的能力,一如既往的仅仅只是使用帝具使的能力,甚至连武道六式都没有使用,仅仅只是燃烧着天炎的一剑斩出去。
“既然如此,殿下请吧!我们的谈判到此为止,五年后,我自会放了他们,那时还能剩多少人,我就不知道了。”

如果是平日,林风完全可以凭借刀的速度阻断身前区域,此时不能,毒娘子攻入,整个人向后退去。

刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下;

一、简单的ul,li组成的导航:

<ul class="nav nav-pills justify-content-center bg-dark nav-dark">
        <li class="nav-item">
            <a href="#" class="nav-link">1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">2</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">3</a>
        </li>
    </ul>

//解析:.nav .nav-item .nav-link表示ul li是导航——.nav-pills表示胶囊状导航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示导航栏在浏览器上居中显示

在浏览器上显示为:

缩小浏览器窗口显示为:

二、导航栏——<nav>标签中class="navbar navbar-expand-sm"——<ul>中class="navbar-nav"——<li>中class="nav-item"

代码为:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>    
    </ul>
</nav>

正常窗口显示为:

 

缩小窗口小于576px时:

三、折叠导航栏

当窗口小于576px的时候,不仅仅是简单的编程垂直导航;显示为一个button按钮,导航链接隐藏,点击button显示;

 代码为:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a href="#" class="navbar-brand">
            <img src="" alt="logo" style="width:70px;height:30px;">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsible">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>    
    </ul>
    
</nav>

//注意:.navbar-brand是品牌logo;

窗口大于576的时候,显示为:

窗口小于576的时候,显示为:

 

四、导航栏加上form表单表示搜索框:【?????】

代码如下:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a href="#" class="navbar-brand">
            <img src="" alt="logo" style="width:70px;height:30px;">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsible">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsible">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>    
    </ul>
    <form class="form-inline">
                <div class="input-group">
                    <!-- <input type="text" class="form-control" placeholder="Search"/> -->
                    <span class="input-group-addon">@</span>
                    <input list="dl" type="text" class="form-control" placeholder="Search"/>
                    <datalist id="dl">
                        <option value="IE"></option>
                        <option value="Firefox"></option>
                        <option value="chrome"></option>
                        <option value="safari"></option>
                    </datalist>
                </div>
                
                <button class="btn btn-success" type="submit">search</button>
            </form>
</nav>

 

如图所示,如何使得导航栏中的form表单右对齐,移到最右边?????