深入掌握CSS组件

导入的链接


<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
    <script src="jquery-3.3.1.slim.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
    <script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>

徽章

1 定义徽章

通常使用标签，添加badge类来设计徽章。
徽章可以嵌在标题中，并通过标题样式来适配其大小，因为徽章的大小是使用em单位来设计的，所以有良好的弹性。
徽章还可以作为链接或按钮的一部分来提供计数器。
提示：徽章不仅仅只能在标题、链接和按钮中添加，可以根据场景在其他元素中添加，以实现想要的效果。

徽章嵌在标题中

<!--badge类来设计徽章-->
<h1>标题示例 <span class="badge badge-secondary">徽章</span></h1>
<h2>标题示例 <span class="badge badge-secondary">徽章</span></h2>
<h3>标题示例 <span class="badge badge-secondary">徽章</span></h3>
<h4>标题示例 <span class="badge badge-secondary">徽章</span></h4>

徽章还可以作为链接或按钮的一部分来提供计数器。

<button type="button" class="btn btn-primary">
    按钮<span class="badge badge-light ml-4">1</span>
</button>
<button type="button" class="btn btn-danger"><!--type="button"是要在定义按钮标签时候才会使用到的么-->
    按钮<span class="badge badge-light ml-4">2</span>
</button>
<button type="button" class="btn btn-success">
    链接<span class="badge badge-light ml-4">3</span>
</button>
<a href="#" class="btn btn-warning">
    链接<span class="badge badge-light ml-4">4</span>
</a>

2 设置颜色

Bootstrap4中为徽章定制了一系列的颜色类：badge-primary、badge-secondary、badge-success、badge-danger、badge-warning、badge-info、badge-light和badge-dark类。

<span class="badge badge-primary">主要；蓝色</span>
<span class="badge badge-secondary">次要；浅灰色</span>
<span class="badge badge-success">成功；绿色</span>
<span class="badge badge-danger">危险；红色</span>
<span class="badge badge-warning">警告；黄色</span>
<span class="badge badge-info">信息；浅蓝色</span>
<span class="badge badge-light">明亮;白色</span>
<span class="badge badge-dark">深色</span>

3 椭圆形徽章

椭圆形徽章是Bootstrap 4中的新增加的一个样式，使用.badge-pill类进行定义。.badge-pill类代码如下：

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

设置了水平内边距和较大的圆角边框，使徽章看起来更圆润。

<!--badge-pill水平内边距和较大的圆角边框-->
<span class="badge badge-pill badge-primary">主要</span>
<span class="badge badge-pill badge-secondary">次要</span>
<span class="badge badge-pill badge-success">成功</span>
<span class="badge badge-pill badge-danger">危险</span>

4 链接徽章

.badge-*类也可以在<a>元素上使用，并实现悬停、焦点等状态效果。

<a href="#" class="badge badge-primary">主要</a>
<a href="#" class="badge badge-secondary">次要</a>
<a href="#" class="badge badge-success">成功</a>

警告框

1. 定义警告框

使用alert类可以设计警告框组件，还可以使用alert-success、alert-info、alert-warning、alert-danger、alert-primary、alert-secondary、alert-light或alert-dark类来定义不同的颜色，效果类似于IE浏览器的警告效果。
提示：只添加alert类是没有任何页面效果的，需要根据适用场景选择合适的颜色类。

<!--alert设计警告框组件，也就是个框-->
<div class="alert alert-primary">
    <strong>主要的!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary">
    <strong>次要的!</strong> 显示一些不重要的信息。
</div>

2. 添加链接

使用.alert-link类可以为带颜色的警告框中的链接加上合适的颜色，会自动对应有一个优化后的链接颜色方案。

<div class="alert alert-primary">
    悟已往之不谏，知来者之可追。 ——<a href="#" class="alert-link">陶渊明</a>《归去来兮辞》
</div>
<div class="alert alert-secondary">
    悟已往之不谏，知来者之可追。 ——<a href="#" class="alert-link">陶渊明</a>《归去来兮辞》
</div>

3 额外附加内容

警报还可以包含其他HTML元素，例如标题、段落和分隔符。

<div class="alert alert-primary" role="alert">
    <h4>第一题：一个正方形，宽为6米，高为8米，下面正确的选项为（）。</h4>
    <hr>
    <p>A.周长为28米</p>
    <p>B.面积为28平方米</p>
</div>

4 关闭警告框

在警告框中添加.alert-dismissible类，然后在关闭按钮的链接上添加class="close"和data-dismiss="alert"类来设置警告框的关闭操作

<div class="alert alert-info alert-dismissible">
  
    <b>002</b>&nbsp;&nbsp;悟已往之不谏，知来者之可追。
    <!--&times;转义字符乘号；&nbsp不断行空白格-->
    <!--
        按钮出现在警告框右上角，必须在父元素上添加 alert-dismissible 类。

之前提及的 close 函数是整个组件的核心函数，目的是在dom中移除警告框，触发用户自定义事件。clsoe函数和data-dismiss="alert"函数一起使用
下面的data-dismiss="alert"类能实现关闭按钮功能
    -->
    <button type="button"  class="close" data-dismiss="alert">&times;</button>
</div>

补充转义字符的知识点

转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“<”和“>”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。
几种常用的转义字符

| 显示      | 说明     | 实体名称     | 实体编号    |
| ------- | ------ | -------- | ------- |
| 半方大的空白  | &ensp; | &#8194;  |         |
| 全方大的空白  | &emsp; | &#8195;  |         |
| 不断行的空白格 | &nbsp; | &#160;   |         |
| <       | 小于     | &lt;     | &#60;   |
| >       | 大于     | &gt;     | &#62;   |
| &       | &符号    | &amp;    | &#38;   |
| "       | 双引号    | &quot;   | &#34;   |
| ©       | 版权     | &copy;   | &#169;  |
| ®       | 已注册商标  | &reg;    | &#174;  |
| ™       | 商标（美国） | ™        | &#8482; |
| ×       | 乘号     | &times;  | &#215;  |
| ÷       | 除号     | &divide; | &#247;  |

媒体对象

1 媒体版式

媒体对象仅需要引用.media和.media-body两个类，就可以实现页面设计目标、形成布局、间距并控制可选的填充和边距。

图片在前，文字在后(代码中的顺序相反)

<div class="media">
    <img src="images/05.bmp" class="mr-4 w-25" alt="">
    <!--图片在前，文字在后-->
    <div class="media-body">
        <h3 class="mt-0">肖申克的救赎</h3>
        <div class="my-1">类型：电影作品</div>
        <div class="my-1">导演：弗兰克•达拉邦特</div>
        <div class="my-1">主演：蒂姆•罗宾斯、摩根•弗里曼等</div>
        <div class="my-1">片长：142分钟</div>
        <div class="my-1">
            <a href="#">角色介绍、</a>
            <a href="#">音乐原声、</a>
            <a href="#">幕后花絮、</a>
            <a href="#">更多>></a>
        </div>
        <div class="my-1">简介：该片改编自斯蒂芬•金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由、高度强调纪律的特殊背景来展现作为个体的人对“时间流逝、环境改造”的恐惧…</div>
    </div>
</div>

图片在后，文字在前（代码中的顺序相反）

<div class="media">
    <div class="media-body mr-3">
        <h3 class="mt-0">肖申克的救赎</h3>
        <div class="my-1">类型：电影作品</div>
        <div class="my-1">导演：弗兰克•达拉邦特</div>
        <div class="my-1">主演：蒂姆•罗宾斯、摩根•弗里曼等</div>
        <div class="my-1">片长：142分钟</div>
        <div class="my-1">简介：该片改编自斯蒂芬•金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由、高度强调纪律的特殊背景来展现作为个体的人对“时间流逝、环境改造”的恐惧…</div>
        <div class="my-1">
            <a href="#">角色介绍、</a>
            <a href="#">音乐原声、</a>
            <a href="#">幕后花絮、</a>
            <a href="#">更多>></a>
        </div>
    </div>
    <img src="images/05.bmp" class="w-25" alt="">
</div>

2 媒体嵌套

媒体对象可以无限嵌套，但是建议在某些时候尽量减少网页的嵌套层级，嵌套太多会影响页面的美观。嵌套时只需要在.media-body中在嵌套.media即可。
代码:这里代码实现的效果也可以说media 在前 media-body在后

<div class="media">
    <img src="images/06.bmp" class="mr-3" alt="">
    <div class="media-body ">
        <h4 class="mt-0">鹰</h4>
        彩虹绚烂多姿，那都是在与狂风和暴雨争斗之后；看枫叶似火燃烧，就是在与秋叶的寒霜争斗之后；雄鹰的展翅高飞，那也是在与坠崖的危险争斗之后。他们保持着奋斗的姿态，才铸就了他们的成功。
        <!--media-body中嵌套media即可-->
        <!--这里代码实现的效果也可以说media 在前 media-body在后-->
        <div class="media mt-3">
            <a class="mr-3" href="#">
                <img src="images/06.bmp" class="mr-3" alt="">
            </a>
            <div class="media-body">
                <h4 class="mt-0">鹰</h4>
                彩虹绚烂多姿，那都是在与狂风和暴雨争斗之后；看枫叶似火燃烧，就是在与秋叶的寒霜争斗之后；雄鹰的展翅高飞，那也是在与坠崖的危险争斗之后。他们保持着奋斗的姿态，才铸就了他们的成功。
            </div>
        </div>
    </div>
</div>

3 对齐方式

媒体对象中的图片可以使用Flexbox样式类来设置布局，实现顶部、中间和底部的对齐。只要在图片上添加align-self-start、align-self-center和align-self-end类即可实现。

<div class="media">
    <!--图片与文字之间的布局-->
    <img src="images/06.bmp" class="align-self-end mr-3" alt="" width="60">
    <div class="media-body">
        <h5 class="mt-0">鹰</h5>
        <div>1.山鹰的眼睛不怕迷雾，真理的光辉不怕笼罩。</div>
        <div>2.我宁可做饥饿的雄鹰，也不愿做肥硕的井蛙。</div>
        <div>3.雄鹰当展翅高飞，翱翔于九天之上。</div>
    </div>
</div><hr/>

4 排列顺序

更改媒体对象中内容的顺序，可以通过修改HTML本身，也可以使用Flexbox样式类来设置order属性来实现。

图片在后，文字在前

<div class="media">
    <div class="media-body mr-3">
        <h3 class="mt-0">肖申克的救赎</h3>
        <div class="my-1">类型：电影作品</div>
        <div class="my-1">导演：弗兰克•达拉邦特</div>
        <div class="my-1">主演：蒂姆•罗宾斯、摩根•弗里曼等</div>
        <div class="my-1">片长：142分钟</div>
        <div class="my-1">简介：该片改编自斯蒂芬•金《四季奇谭》中收录的同名小说，该片中涵盖全片的主题是“希望”，全片透过监狱这一强制剥夺自由、高度强调纪律的特殊背景来展现作为个体的人对“时间流逝、环境改造”的恐惧…</div>
        <div class="my-1">
            <a href="#">角色介绍、</a>
            <a href="#">音乐原声、</a>
            <a href="#">幕后花絮、</a>
            <a href="#">更多>></a>
        </div>
    </div>
    <img src="images/05.bmp" class="w-25" alt="">
</div>

5 媒体列表

媒体对象的结构要求很少，可以在<ul>或<ol>上添加.list-unstyled类，删除浏览器默认列表样式，然后在li中添加media类，最后根据需要调整边距即可。

<ul class="list-unstyled">
    <li class="media">
        <img src="images/b.jpg" class="mr-3" alt="">
        <div class="media-body">
            <h5 class="mt-0 mb-2">唐代诗人：李白</h5>
            李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去雕饰”的自然美之中。
        </div>
    </li>
    <li class="media my-4">
        <img src="images/c.jpg" class="mr-3" alt="">
        <div class="media-body">
            <h5 class="mt-0 mb-2">唐代诗人：杜甫</h5>
            在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长，风格多样，以“沉郁顿挫”四字准确概括出他自己的作品风格，而以沉郁为主。
        </div>
    </li>
    <li class="media">
        <img src="images/a.jpg" class="mr-3" alt="">
        <div class="media-body">
            <h5 class="mt-0 mb-2">宋代词人:李清照</h5>
            李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。
        </div>
    </li>
</ul>

进度条

1 定义进度条

在bootstrap中，进度条一般由嵌套的两层结构标签构成，外层标签引入progress类，用来设计进度槽；内层标签引入progress-bar类，用来设计进度条。基本结构如下：

<div class="progress">
    <div class="progress-bar"></div>
</div>

在进度条中使用width样式属性设置进度条的进度，也可以使用bootstrap4中提供的设置宽度的通用样式，例如w-25、w-50、w-75等。

<div class="progress"><!--进度条是外标签引入progress，内标签引入progress-bar类-->
    <div class="progress-bar w-25"></div>

2 设计进度条样式

1.添加标签
将文本内容放在progress-bar类容器中，可实现标签效果，可以设置进度条的具体进度，一般以百分比表示。

<div class="progress">
    <div class="progress-bar w-25">25%</div>
</div><br/>
<div class="progress">
    <div class="progress-bar w-50">50%</div>
</div><br/>

2.设置高度
在进度槽上设置高度，进度条会自动调整高度。

<!--设置进度条的高度为30px-->
<div class="progress" style="height:30px">
    <div class="progress-bar w-50">50%</div>

3.设置背景色
进度条的背景色可以使用bootstrap通用的样式bg-类来设置。代表primary、secondary、success、danger、warning、info、light和dark

div class="progress">
    <div class="progress-bar bg-success" style=" 50%"></div>
</div><br/>
<div class="progress">
    <div class="progress-bar bg-info" style=" 50%"></div>
</div><br/>

3 设计进度条风格

1.多进度条进度
如果有需要，可在进度槽中包含多个进度条。

<div class="progress">
    <div class="progress-bar" style="15%;">20%</div>
    <div class="progress-bar bg-warning" style=" 30%;">30%</div>
    <div class="progress-bar bg-info" style=" 20%;">20%</div>
</div>

2.条纹进度条
将progress-bar-striped类添加到.progress-bar容器上，可以使用CSS渐变对背景颜色加上条纹效果。

<div class="progress">
    <!--条纹进度条progress-bar-striped-->
    <div class="progress-bar w-25 progress-bar-striped">25%</div>
</div><br/>

3.动画条纹进度
条纹渐变也可以做成动画效果，将progress-bar-animated类加到.progress-bar容器上，即可实现CSS3绘制的从右到左的动画效果。
注意：动画条纹进度条不适用Opera 12浏览器中，因为它不支持CSS3动画。

<div class="progress">
    <!--动画条纹进度条progress-bar-animated-->
    <div class="progress-bar w-75 bg-success progress-bar-striped progress-bar-animated"></div>
</div><br/>

导航栏(重点)

1 定义导航栏

Bootstrap中，导航栏组件是有许多子组件组成的，可以根据需要从中选择。导航栏组件包含的子组件如下：
.navbar-brand：用于设置Logo或项目名称。
.navbar-nav：提供轻便的导航，包括对下拉菜单的支持。
.navbar-toggler：用于折叠插件和导航切换行为。
.form-inline：用于控制操作表单。
.navbar-text：对文本字符串的垂直对齐、水平间距作了处理优化。
.collapse .navbar-collapse：用于通过父断点进行分组和隐藏导航列内容。
1.Logo和项目名称

<!--导航栏用nav标签括起来-->
<nav class="navbar navbar-light bg-light my-4">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
        <img src="images/a.png" width="30" alt="" >
    </a>
</nav>

2.nav导航
navbar-toggler可实现响应式切换；.nav-link或.nav-item上天界active和disabled类，实现激活和禁用状态
下方代码还有.navbar-expand-md属性未知

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link " href="#">首页</a>
            </li>
            <!--可在nav标签里用 nav-link 或者 nav-item添加 active和 disabled属性-->
            <li class="nav-item">
                <a class="nav-link" href="#">特色</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="#">定价</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">联系</a>
            </li>
        </ul>
    </div>
</nav>

3.导航栏中添加下拉菜单

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link " href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">特色</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">定价</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    联系
                    <!--普通下拉菜单中 父元素必须有.dropdown；子元素中有.dropdown-toggle类;还需有这个属性data-toggle="dropdown"-->
                    <!--nav下拉菜单中 父元素必须有.nav-item ；子元素中有.nav-link类;还需有这个属性aria-haspopup="true" aria-expanded="false"
                    还需要为下方的下拉菜单绑定个id="navbarDropdownMenuLink"
                    -->
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">联系电话</a>
                    <a class="dropdown-item" href="#">联系地址</a>
                    <a class="dropdown-item" href="#">联系微信</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

4.表单.form-inline类容器

<nav class="navbar navbar-light bg-light justify-content-between">
    <a class="navbar-brand">Navbar</a>
    <form class="form-inline">
        <!--form-inline表单类容器，可以把各种表单控制元件和组件放置到其中-->
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>

5.Text文本处理

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    带有内联元素的导航栏文本
  </span>
</nav>

6.上述元件组合样例

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!--元件组合使用效果-->
    <div class="collapse navbar-collapse" id="collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link " href="#">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">特色</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">定价</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">联系</a>
            </li>
        </ul>
        <span class="navbar-text">
            带有内联元素的导航栏文本
        </span>
    </div>
</nav>

2 定位导航栏

使用bootstrap4提供的固定定位样式类，可以轻松实现导航栏的固定定位。
.fixed-top：导航栏定位到顶部。
.fixed-bottom：导航栏定位到底部。
只需要在导航栏外框上添加，即可实现。下面以fixed-bottom类为例，来看一下导航栏定位到底部的效果

<nav class="navbar navbar-light bg-light justify-content-between fixed-bottom">
    <a class="navbar-brand">Navbar</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav><!--为什么图片会在搜索框的上方呢；fixed-bottom导航栏定位到底部。-->
<img src="images/001.png" alt="" class="img-fluid vw-100">

3 设计导航栏配色

导航栏的配色方案和主题选择基于主题类和背景通用样式类定义，选择navbar-light类来定义导航颜色反转（黑色背景，白色文字），也可以使用.navbar-dark用于深色背景定义，然后再使用背景bg-*类进行定义。

<!--这里可以跟着敲代码-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="#">Navbar</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-info my-2">
    <a class="navbar-brand mr-auto" href="#">Navbar</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #e3f3fd;">
    <a class="navbar-brand mr-auto" href="#">Navbar</a>
    <form class="form-inline">
        <form class="form-inline">
            <input class="form-control mr-sm-2" type="search" placeholder="搜索">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form>
    </form>
</nav>

4 扩展导航栏内容

.navbar-expand{-sm|-md|-lg|-xl}类是用来设计响应式的导航栏内容显示和隐藏
扩展导航栏内容就是在此基础之上再加上折叠组件进行设计的，通过单击右侧的图标来激活折叠的内容。在折叠内容中，可以使用网格系统或其他组件进行设计所要展示的内容。

<!--折叠内容-->
<div class="collapse" id="navbarText">
    <!--navbarText用id作为折叠内容的标记-->
    <div class="bg-dark p-4">
        <div class="row">
            <div class="col-8">
                <h4 class="text-white">企业概述</h4>
                <span class="text-muted">概述内容</span>
            </div>
            <div class="col-4">
                <h6><a href="#" class="text-white">关于我们</a></h6>
                <h6><a href="#" class="text-white">产品介绍</a></h6>
                <h6><a href="#" class="text-white">联系我们</a></h6>
            </div>
        </div>
    </div>
</div>
<!--导航栏-->
<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand mr-auto" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

努力拼搏吧，不要害怕，不要去规划，不要迷茫。但你一定要在路上一直的走下去，尽管可能停滞不前，但也要走。