bootstrap中导航导航栏表单及自定义表单

Posted 2021-05-21 苦海123

导航：

bootstrap中使用列表封装了水平导航，其类样式如：

类名	描述
.nav	给ul或ol，用于清除列表默认样式，并将列表项水平排列
.nav-item	给li,用于布局
.nav-link	给li里面的a,用于a布局
.justify-content-center	用于居中ul或ol（使位于屏幕中间）
.justify-content-end	用于靠右ul或ol（使位于屏幕右侧）
.flex-column	给ul 或 ol，使垂直排列
.nav-tabs	选项卡式布局，对选中的项添加active类来进行标记
.nav-pills	胶囊导航，使有active的选项背景成蓝色
.nav-justified	使导航的每一项都各自等宽
data-toggle=“tab”	实现选项卡切换功能，给链接（a标签）添加，链接中的href指向tab-content中的锚点值;此属性后面的值若是 pill则表示样式为胶囊型
.tab-pane	控制选项卡内容隐藏，给具体的内容
.nav-tabs	实现选项卡中导航样式

<!-- 导航、选项卡导航部分： -->
<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中提供了导航栏功能的封装，导航栏一般时放到页面的顶部；相关类样式如下:

类名	描述
.navbar	创建一个导航栏，后面可跟 navbar-expand-S类实现响应式导航栏；默认是垂直排列的
.navbar-expand-S	根据屏幕尺寸做出响应式的导航栏，当屏幕小于指定值时，列表会垂直排列；S的值可以是 xl、lg、md、sm
.navbar-nav	给导航栏上元素ul添加此类，清除ul默认样式，并使ul水平排列
.nav-item	给navbar-nav中li添加此类，修改样式
. nav-link	给nav-item中的链接a添加此类，清除鼠标hover下划线样式并进行了布局
.navbar-light	此类设置了一个黑色color，但是后面有以此为基础的active类，有此项active选中的链接会有突显效果
.disabled	禁用a标签
.navbar-brand	高亮效果，用于突显logo等，若此类用于img则图片自适应导航栏
.navbar-text	设置导航栏非链接文本
.fixed-top	用于固定导航栏，给nav添加此标签将导航栏固定到顶部
.fixed-bottom	用于固定导航栏，给nav添加此标签将导航栏固定到底部
.breadcrumb	定义面包屑导航栏，给父级容器加此类，如ul
.breadcrumb-item	导航栏中每一项中添加的类名，此类是一个/符

<!-- 基本导航栏： -->
<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-control	定义一个宽度100%的表单元素，给input标签
.form-inline	定义一个水平排列的响应式表单域（给form标签），当屏幕小到一定程度时表单元素会垂直排列
.form-check-inline	将一个容器中的选项水平排列
.disabled	禁用一个表单元素
.input-group-prepend	用来定义一个给输入框前面添加文本的容器，此类给div元素，实际没太大作用
.input-group	将input-group-append和input-group-prepend的其他元素放到一组，使在同一行上
.input-group-text	定义输入框组中的文本,使之有样式
.input-group-append	用来定义一个给输入框后面添加文本的容器，此类给div元素，实际没太大作用
.input-group-S	定义一组输入框的大小，此类给input-group容器加，其中S值有sm和lg

<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封装了关于表单的自定义类样式等，如下：

类名	描述
.custom-control	定义一个选框的容器，此类名做样式布局
.custom-checkbox	定义被选中时方框中的对号
.custom-control-input	将选框的默认选框隐藏
.custom-control-label	一个伪元素用于代替隐藏的默认选框
.custom-radio	定义圆形选框及被选中时选框中的白点
.custom-control-inline	将自定义控件布局在同一行
.custom-select	定义选择菜单（给select元素设置此类），默认是通栏显示；但是一般会在后面加限定大小的后缀sm和lg，如： custom-select-sm
.custom-range	自定义滑块输入，滑动点仅为一个点，在本地测试和默认效果一样
.custom-file-label	用于label初始化一个自适应通栏的文件域
.custom-file-input	使元素相对定位，且 opacity: 0；使用时建议外面套一个容器并给类样式custom-file

<!-- 自定义复选框原理：将默认的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>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海