Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏

bootstrap4 卡片

    <div class="card">        <div class="card-body">卡片</div>    </div>

卡片头部，内容，底部

    <div class="card">        <div class="card-header">卡片头部</div>        <div class="card-body">卡片内容</div>        <div class="card-footer">卡片底部</div>    </div>

多种颜色的卡片，背景bg-，文字颜色text-

    <div class="card bg-primary text-white">        <div class="card-header">卡片头部</div>        <div class="card-body">卡片内容</div>        <div class="card-footer">卡片底部</div>    </div>

卡片的标题、文本和链接 card-title card-text card-link

    <div class="card">        <div class="card-body">            <h4 class="card-title">卡片标题</h4>            <p class="card-text">卡片文字部分</p>            <a href="#" class="card-link">卡片链接</a>        </div>    </div>

图片卡片 card-img-top card-img-bottom card-img-overlay

    <div class="card" style="width:200px;">        <div class="card-body">            <img src="img/img_avatar.png" class="card-img-top">            <h4 class="card-title">卡片标题</h4>            <p class="card-text">卡片文字部分</p>            <a href="#" class="card-link">卡片链接</a>            <img src="img/img_avatar.png" class="card-img-bottom">        </div>    </div>

    <div class="card" style="width:200px;">        <div class="card-body">            <img src="img/img_avatar.png" class="card-img-top">            <div class="card-img-overlay">                <h4 class="card-title">卡片标题</h4>                <p class="card-text">卡片文字部分</p>                <a href="#" class="card-link">卡片链接</a>            </div>        </div>    </div>

bootstrap4 下拉菜单

bootstrap4 下拉菜单依赖于 popper.min.js。

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

    <div class="dropdown">        <button class="btn btn-primary dorpdown-toggle" data-toggle="dropdown">button</button>        <div class="dropdown-menu">            <a href="#" class="dropdown-item">item1</a>            <a href="#" class="dropdown-item">item2</a>            <a href="#" class="dropdown-item">item3</a>        </div>    </div>

也可以给a链接添加下拉效果

<div class="dropdown">  <a class="btn btn-condary dropdown-toggle" href="#" role="button" id="dropdownmenulink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fal">    dropdown link  </a>   <div class="dropdown-menu" aria-labelledby="dropdownmenulink">    <a class="dropdown-item" href="#">action</a>    <a class="dropdown-item" href="#">another action</a>    <a class="dropdown-item" href="#">something el here</a>  </div></div>

下拉菜单中的分割线

<div class="dropdown">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">      dropdown button    </button>    <div class="dropdown-menu">      <a class="dropdown-item" href="#">link 1</a>      <a class="dropdown-item" href="#">link 2</a>      <a class="dropdown-item" href="#">link 3</a>      <div class="dropdown-divider"></div>      <a class="dropdown-item" href="#">another link</a>    </div></div>

<div class="dropdown">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdow700n">      dropdown button    </button>    <div class="dropdown-menu">        <h4 class="dropdown-header">dropdown-header</h4>        <a class="dropdown-item" href="#">link 1</a>        <a class="dropdown-item" href="#">link 2</a>        <a class="dropdown-item" href="#">link 3</a>        <div class="dropdown-divider"></div>        <a class="dropdown-item" href="#">another link</a>    </div></div>

下拉菜单的激活项和禁用项

<div class="dropdown">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">      dropdown button    </button>    <div class="dropdown-menu">        <h4 class="dropdown-header">dropdown-header</h4>        <a class="dropdown-item" href="#">link 1</a>        <a class="dropdown-item active" href="#">link 2</a>        <a class="dropdown-item disabled" href="#">link 3</a>        <div class="dropdown-divider"></div>        <a class="dropdown-item" href="#">another link</a>    </div></div>

下拉菜单右对齐 dropdown-menu-right

<div class="dropdown">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">      dropdown button    </button>    <div class="dropdown-menu dropdown-menu-right">        <h4 class="dropdown-header">dropdown-header</h4>        <a class="dropdown-item" href="#">link 1</a>        <a class="dropdown-item active" href="#">link 2</a>        <a class="dropdown-item disabled" href="#">link 3</a>        <div class="dropdown-divider"></div>        <a class="dropdown-item" href="#">another link</a>    </div></div>

改变下拉菜单弹出方向

<!-- 向右弹出 --><div class="dropdown dropright">    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fal">      dropdown button    </button>    <div class="dropdown-menu">        <a class="dropdown-item" href="#">link 1</a>        <a class="dropdown-item active" href="#">link 2</a>    </div></div>

<div class="container">    <br><br><br><br><br><br><br>    <!-- 向上弹出 -->    <div class="btn-group dropup">        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">          dropdown button        </button>        <div class="dropdown-menu">            <a class="dropdown-item" href="#">link 1</a>            <a class="dropdown-item active" href="#">link 2</a>        </div>    </div></div>

我为啥加了这么多换行符呢，因为不加它还是会向下弹出

<div class="container" style="text-align:center;">    <!-- 向左弹出 -->    <div class="btn-group dropleft">        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fal">          dropdown button        </button>        <div class="dropdown-menu">            <a class="dropdown-item" href="#">link 1</a>            <a class="dropdown-item active" href="#">link 2</a>        </div>    </div></div>

必须在左边留有空间才能生效

在按钮中添加下拉菜单

<div class="btn-group">    <button class="btn btn-primary">button</button>    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">toggle</button>    <div class="dropdown-menu">        <a href="#" class="dropdown-item">item</a>        <a href="#" class="dropdown-item">item</a>        <a href="#" class="dropdown-item">item</a>    </div></div>

bootstrap4 折叠

<button data-toggle="collap" data-target="#demo" type="button" class="btn btn-primary">折叠</button><div id="demo" class="collap">    lorem ipsum dolor sit amet, conctetur adipisicing elit,    d do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conquat.</div>

<a> 元素上你可以使用href属性来代替data-target属性:

<a href="#demo" data-toggle="collap" >折叠</a><div id="demo" class="collap">    lorem ipsum dolor sit amet, conctetur adipisicing elit,    d do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conquat.</div>

默认是隐藏的，也可以改为默认显示

<a href="#demo" data-toggle="collap" >折叠</a><div id="demo" class="collap show">    lorem ipsum dolor sit amet, conctetur adipisicing elit,    d do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conquat.</div>

简单的手风琴效果

<div id="accordion">    <div class="card">        <div class="card-header">            <a href="#one" class="card-link" data-toggle="collap">item1</a>        </div>        <div id="one" class="collap">            <div class="card-body">                lorem ipsum dolor sit amet, conctetur adipisicing elit,                d do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conquat.            </div>        </div>            </div>    <div class="card">        <div class="card-header">            <a href="#two" class="card-link" data-toggle="collap">item2</a>        </div>        <div id="two" class="collap">            <div class="card-body">                lorem ipsum dolor sit amet, conctetur adipisicing elit,                d do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conquat.            </div>        </div>            </div>    <div class="card">        <div class="card-header">            <a href="#three" class="card-link" data-toggle="collap">item3</a>        </div>        <div id="three" class="collap">            <div class="card-body">                lorem ipsum dolor sit amet, conctetur adipisicing elit,                d do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam,                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conquat.            </div>        </div>            </div></div>

bootstrap4 导航

简单水平导航

<ul class="nav">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul>

设置导航居中或者靠右

<ul class="nav justify-content-center">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul><ul class="nav justify-content-end">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul>

垂直导航

<ul class="nav flex-column">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul>

tab大连的大学排名选项卡导航

<ul class="nav nav-tabs">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link active">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul>

胶囊导航

<ul class="nav nav-pills">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link active">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul>

导航等宽

<ul class="nav nav-justified">    <li class="nav-item">        <a href="#" class="nav-link">item1</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link active">item2</a>    </li>    <li class="nav-item">        <a href="#" class="nav-link">item3</a>    </li></ul>

动态tab选项卡

<ul class="nav nav-tabs">    <li class="nav-item">        <a href="#one" class="nav-link active" data-toggle="tab">item1</a>    </li>    <li class="nav-item">        <a href="#two" class="nav-link" data-toggle="tab">item2</a>    </li>    <li class="nav-item">        <a href="#three" class="nav-link" data-toggle="tab">item3</a>    </li></ul><div class="tab-content">    <div class="tab-pane container active" id="one">        <h3>one</h3>          <p>lorem ipsum dolor sit amet, conctetur adipisicing elit, d do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div>    <div class="tab-pane container" id="two">        <h3>two</h3>          <p>lorem ipsum dolor sit amet, conctetur adipisicing elit, d do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div>    <div class="tab-pane container" id="three">        <h3>three</h3>          <p>lorem ipsum dolor sit amet, conctetur adipisicing elit, d do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div></div>

胶囊状态tab选项卡

<ul class="nav nav-pills">    <li class="nav-item">        <a href="#one" class="nav-link active" data-toggle="pill">item1</a>    </li>    <li class="nav-item">        <a href="#two" class="nav-link" data-toggle="pill">item2</a>    </li>    <li class="nav-item">        <a href="#three" class="nav-link" data-toggle="pill">item3</a>    </li></ul><div class="tab-content">    <div class="tab-pane container active" id="one">        <h3>one</h3>          <p>lorem ipsum dolor sit amet, conctetur adipisicing elit, d do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div>    <div class="tab-pane container" id="two">        <h3>two</h3>          <p>lorem ipsum dolor sit amet, conctetur adipisicing elit, d do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div>    <div class="tab-pane container" id="three">        <h3>three</h3>          <p>lorem ipsum dolor sit amet, conctetur adipisicing elit, d do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    </div></div>

bootstrap4 导航栏

小屏时垂直显示，其余屏幕水平显示

<nav class="navbar navbar-expand-sm">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item3</a>        </li>    </ul></nav>

默认就是垂直导航栏

<nav class="navbar">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item3</a>        </li>    </ul></nav>

不同颜色的导航栏

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav><nav class="navbar bg-warning navbar-expand-sm navbar-light">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav><nav class="navbar bg-success navbar-expand-sm navbar-light">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav><nav class="navbar bg-danger navbar-expand-sm navbar-light">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav><nav class="navbar bg-dark navbar-expand-sm navbar-light">    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav>

高亮显示品牌/logo

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand">logo</a>    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav><nav class="navbar bg-warning navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand">logo</a>    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav>

图片logo

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav><nav class="navbar bg-warning navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"><img src="img/boot.jpg" style="width:100px;"></a>    <ul class="navbar-nav">        <li class="nav-item">            <a href="#" class="nav-link">item1</a>        </li>        <li class="nav-item">            <a href="#" class="nav-link">item2</a>        </li>    </ul></nav>

折叠导航栏

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item">                <a href="#" class="nav-link">item2</a>            </li>        </ul>    </div></nav>

导航栏上可以设置下拉菜单

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"><总结英文;img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                </div>            </li>        </ul>    </div></nav>

导航栏的表单与按钮

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                </div>            </li>        </ul>        <form action="" class="form-inline">            <input type="text" class="form-control" placeholder="请输入产品型号">            <button type="submit" class="btn btn-warning">搜索</button>        </form>    </div></nav>

.input-group-addon类用于在输入框前添加小标签

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                </div>            </li>        </ul>        <form action="" class="form-inline">            <span class="input-group-addon">@</span>            <input type="text" class="form-control" placeholder="请输入邮箱账号">            <button type="submit" class="btn btn-warning">发送</button>        </form>    </div></nav>

导航栏文本（非链接）

<nav class="navbar bg-info navbar-expand-sm navbar-light">    <a href="#" class="navbar-brand"&托福考试报名流程gt;<img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                </div>            </li>        </ul>        <span class="navbar-text">普通文本</span>    </div></nav>

固定导航

<nav class="navbar bg-info navbar-expand-sm navbar-light fixed-top">    <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                </div>            </li>        </ul>        <span class="navbar-text">普通文本</span>    </div></nav>

<nav class="navbar bg-info navbar-expand-sm navbar-light fixed-bottom">    <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a>    <button class="navbar-toggler" type="button" data-toggle="collap" data-target="#mytoggle香菇菜谱">        <span class="navbar-toggler-icon"></span>    </button>    <div class="collap navbar-collap" id="mytoggle">        <ul class="navbar-nav">            <li class="nav-item">                <a href="#" class="nav-link">item1</a>            </li>            <li class="nav-item dropdown">                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a>                <div class="dropdown-menu">                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                    <a href="#" class="dropdown-item">item</a>                </div>            </li>        </ul>        <span class="navbar-text">普通文本</span>    </div></nav>