导航：
bootstrap中使用列表封装了水平导航，其类样式如：
<!-- 导航、选项卡导航部分： --><ul class="nav nav-tabs nav-pills nav-justified"><!--a标签href属性值指向下面内容锚点值--><li class="nav-item"><a href="#cont1" class="nav-link active" data-toggle="tab">1</a></li><li class="nav-item"><a href="#cont2" class="nav-link" data-toggle="tab">12</a></li><li class="nav-item"><a href="#cont3" class="nav-link" data-toggle="pill">123</a></li><li class="nav-item"><a href="#cont4" class="nav-link" data-toggle="pill">1234</a></li></ul><!-- 结合上面导航部分构成选项卡模块，以下是选项卡内容部分： --><div class="tab-content"><!---tab-content隐藏下面所有的内容，但是有active的内容会显示--><div id="cont1" class="tab-pane active">1</div><div id="cont2" class="tab-pane">12</div><!-- tab-pane隐藏带有此类的div自身 --><div id="cont3" class="tab-pane">123</div><div id="cont4" class="tab-pane">1234</div></div>
导航栏：
bootstrap中提供了导航栏功能的封装，导航栏一般时放到页面的顶部；相关类样式如下:
<!-- 基本导航栏： --><nav class="navbar navbar-expand-sm bg-warning navbar-light"><ul class="navbar-nav"><li class="nav-item"><img src="2.png" class="navbar-brand" width='50px' height='50px'></li><li class="nav-item"><a class="nav-link navbar-brand" 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></nav><!-- 折叠导航栏： --><!-- 1.定义按钮：按钮必须有 data-toggle="collapse"实现功能层面、data-target=".navbox"指定需要折叠的对象--><button data-toggle="collapse" data-target=".navbox">展示/收起</button><!-- 2.定义一个盒子用于上面按钮折叠，同时将基础导航栏装入此盒子 --><div class="navbox show"><!--这里加show解决首次点击出现bug问题--><nav class="navbar navbar-expand-sm bg-warning navbar-light"><ul class="navbar-nav"><li class="nav-item"><img src="2.png" class="navbar-brand" width='50px' height='50px'></li><li class="nav-item"><a class="nav-link navbar-brand" 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></nav></div><!--面包屑导航栏--><ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">首页</a></li><li class="breadcrumb-item"><a href="#">设置</a></li><li class="breadcrumb-item active">个人中心</li></ul>
表单：
bootstrap提供了类样式供创建表单，其具体如下：
<form action="" class="form-inline"><div class="form-group form-check-inline"><span>用户名：</span><input type="url" class="form-control"><span>密码：</span><input type="password" class="form-control"></div><div class="form-group radio-inline"><span>用户名：</span><input type="text" class="form-control"><span>密码：</span><input type="password" class="form-control"></div></form>
自定义表单：
bootstrap封装了关于表单的自定义类样式等，如下：
<!-- 自定义复选框原理：将默认的CheckBox选框隐藏掉或将label的伪元素定位到默认CheckBox的位置将其覆盖，选中时在修改伪元素样式--><form method="GET"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox1" name="apple"><label class="custom-control-label" for="checkbox1">apple</label></div><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox2" name="water"><label class="custom-control-label" for="checkbox2">water</label></div><input type="submit" value="提交"></form><!-- 自定义单选框：原理和复选框一样 --><form method="GET"><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="checkbox1" name="sex" value='1'><label class="custom-control-label" for="checkbox1">男</label></div><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="checkbox2" name="sex" value='2'><label class="custom-control-label" for="checkbox2">女</label></div><input type="submit" value="提交"></form><!-- 自定义选择菜单： --><form><select name="number" class="custom-select-sm"><option value="0" selected disabled>数字</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="submit" value="提交"></form><!-- 自定义滑块输入： --><form method="GET"><label for="rangebox">自定义滑块</label><input type="range" class="custom-range" id="rangebox" name="values"><input type="submit" value="提交"></form><!-- 自定义文件域： --><form method="POST"><div class="custom-file"><input type="file" class="custom-file-input" id="fileBox"><label class="custom-file-label" for="fileBox">选择文件</label></div><input type="submit" value="提交"></form>
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@联系笔者删除。
笔者：苦海
