bootstrap复习

菜单

<div class="row">下拉菜单/分裂菜单</div>
            <div class="dropdown btn-group">

                <!--下拉菜单-->
                <a href="#" class="btn btn-primary dropdown-toggle" data-toggle = "dropdown">菜单</a>

                <!--分裂菜单-->
                <!--<a href="#" class="btn btn-primary">菜单</a>
                <div class="btn btn-primary dropdown-toggle-split dropdown-toggle" data-toggle = "dropdown"></div>-->

                <div class="dropdown-menu">
                    <div class="dropdown-header">标题1</div><!--标题-->
                    <a href="" class="dropdown-item">HTML</a>
                    <a href="" class="dropdown-item">CSS</a>
                    <div class="dropdown-divider"></div><!--分割线-->
                    <div class="dropdown-header">标题2</div><!--标题-->
                    <a href="" class="dropdown-item">JavaScript</a>
                    <a href="" class="dropdown-item">jQuery</a>
                    <a href="" class="dropdown-item">Bootstrap</a>
                </div>
            </div>

文本控件前后置

<div class="input-group m-2">
                    <div class="input-group-prepend">
                        <input type="button" value="控件前置" class="btn btn-dark"/>
                        <!--<span class="input-group-text">文本前置</span>-->
                    </div>
                      <input type="text" class="form-control" placeholder="输入文本">
                      <div class="input-group-append">
                          <input type="button" value="控件后置" class="btn btn-dark"/>
                        <!--<span class="input-group-text">文本后置</span>-->
                    </div>
                </div>

先引用jquery

再引用bootstrap.bundle

最后引用bootstrap

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

导航可以用列表

<ul>

<li></li><li></li>

</ul>

或者nav标题