BootStrap-表单--乐字节前端

niepxiya

2020-06-25

关注关注

表单

? 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

表单控件

? .form-control .input-lg（较大） .input-sm（较小）

输入框 text

? .form-control

<div class="col-sm-3">
    <input type="text" name="" id="" class="form-control" />
    <input type="text" name="" id="" class="form-control input-lg" />
    <input type="text" name="" id="" class="form-control input-sm" />
</div>

下拉选择框 select

? 多行选择设置：multiple="multiple"

<div class="col-sm-3">
    <select class="form-control">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
    <select class="form-control" multiple="multiple">
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</div>

文本域 textarea

<div class="col-sm-3">
    <textarea class="form-control" rows="3"></textarea>
</div>

复选框 checkbox

? 垂直显示： .checkbox

? 水平显示： .checkbox-inline

<!-- 垂直显示 -->
<div>
    <div class="checkbox">
        <label><input type="checkbox" >游戏</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" >学习</label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="checkbox-inline">
        <input type="checkbox" >游戏
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" >学习
    </label>
</div>

单选框 radio

? 垂直显示： .radio

? 水平显示： .radio-inline

<!-- 垂直显示 -->
<div>
    <div class="radio">
        <label><input type="radio" >男</label>
    </div>
    <div class="radio">
        <label><input type="radio" >女</label>
    </div>
</div>
<!-- 水平显示 -->
<div>
    <label class="radio-inline">
        <input type="radio" >男
    </label>
    <label class="radio-inline">
        <input type="radio" >女
    </label>
</div>

按钮

1）使用 button 实现

? 基础样式： btn

<button class="btn">按钮</button>

? 附加样式：btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default

<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-link">按钮</button>

2）多标签支持：使用 a div 等制作按钮

<a href="##" class="btn btn-info">a标签按钮</a>
<span class="btn btn-success">span标签按钮</span>
<div class="btn btn-warning">div标签按钮</div>

3）按钮大小

? 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

<button class="btn btn-primary btn-xs">超小按钮.btn-xs</button>
<button class="btn btn-primary btn-sm">小型按钮.btn-sm</button>
<button class="btn btn-primary">正常按钮</button>
<button class="btn btn-primary btn-lg">大型按钮.btn-lg</button>

4）按钮禁用

? 方法1：在标签中添加disabled属性

<button class="btn btn-danger" disabled="disabled">禁用按钮</button>

? 方法2：在元素标签中添加类名"disabled"

<button class="btn btn-danger disabled">禁用按钮</button>

? 在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！

表单布局

? 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父 <form> 元素添加 role="form"。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。

水平表单

? 同一行显示form-horizontal

? 配合Bootstrap框架的网格系统

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="email" class="control-label col-sm-2">邮箱</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" placeholder="请输入邮箱"/>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="control-label col-sm-2">密码</label>
        <div class="col-sm-10">
            <input type="pwd" class="form-control" placeholder="请输入密码" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2">
            <div class=" checkbox">
                <label>
                    <input type="checkbox" />记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default">提交</button>
        </div>
    </div>
</form>

内联表单

? 将表单的控件都在一行内显示form-inline

? 注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别。

<form class="form-inline">
    <div class="form-group">
        <label for="email" >邮箱</label>
        <input type="email" class="form-control" placeholder="请输入邮箱"/>
    </div>
    <div class="form-group">
        <label for="pwd" >密码</label>
            <input type="pwd" class="form-control" placeholder="请输入密码" />
    </div>
    <div class="form-group checkbox">
        <label><input type="checkbox" />记住密码</label>
    </div>
    <div class="form-group">
        <button class="btn btn-default">提交</button>
    </div>
</form>

缩略图

? 缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现是配合网格系统一起使用。同时还可以让缩略图配合标题、描述内容，按钮等。

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="img/IMG_0131.JPG" alt="...">
                <h3>高圆圆</h3>
                <p>出生于北京市，中国内地影视女演员、模特。</p>
                <button class="btn btn-default">
                    <span class="glyphicon glyphicon-heart"></span>喜欢</button>
                <button class="btn btn-info">
                    <span class="glyphicon glyphicon-pencil"></span>评论
                </button>
            </div>
        </div>
    </div>
</div>

面板

? 默认的 .panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

? .panel-default：默认样式

? .panel-heading：面板头

? .panel-body：面板主体内容

<div class="panel panel-success">
    <div class="panel-heading">
        ......
    </div>
    <div class="panel-body">
        ......
    </div>
</div>

BootStrap 插件

1、基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航
2、分类: 
    1)、标签型 (nav-tabs)导航
    2)、胶囊形(nav-pills)导航
    3)、堆栈(nav-stacked)导航
    4)、自适应(nav-justified)导航
    5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
3、状态:
    1)、选中状态 active 样式
    2)、禁用状态: disable
4、二级菜单

标签式导航

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

胶囊式导航

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">iOS</a></li>
    <li><a href="#">VB.Net</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

分页导航

? 分页随处可见，分为页码导航和翻页导航

? 页码导航：ul标签上加pagination [pagination-lg | pagination-sm]

? 翻页导航：ul标签上加pager

分页

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

翻页

<ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
</ul>

下拉菜单

? 在使用Bootstrap框架的下拉菜单时，必须使用两个js

<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="js/bootstrap.min.js"></script>

? 要点：

1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框: 
   <div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入 . dropup 即可
3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中 使用font 制作下拉箭头
    <span class="caret"></span>
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
8、对齐方式:
    1)、dropdown-menu-left  左对齐 默认样式
    2)、dropdown-menu-right   右对齐
9、激活状态（.active）和禁用状态（.disabled）

<!--使用一个类名为dropdown,默认向下dropdown，向上弹起加入 . dropup 即可-->
<div class="dropdown ">
    <!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        喜欢频道 <span class="caret"></span><!--下拉箭头-->
    </button>
    <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
    <ul class="dropdown-menu">   <!--dropdown-menu-right右对齐-->
        <!--分组标题: li 添加类名 “dropdown-header” 来实现分组的功能-->
        <li class="dropdown-header">----科普----</li>
        <li>
            <a href="#">人与自然</a>
        </li>
        <!--分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能-->
        <li class="divider"></li>
        <li class="dropdown-header">----搞笑----</li>
        <li>
            <a href="#">欢乐喜剧人</a>
        </li>
        <li>
            <a href="#">快乐大本营</a>
        </li>
        <li class="divider"></li>
        <li class="disabled">   <!--禁用状态-->
            <a href="#">生活大爆炸</a>
        </li>
    </ul>
</div>

模态框

? 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

用法

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，可以通过 JavaScript 来调用带有 id="identifier" 的模态框：

$(‘#identifier‘).modal(options);

实例

<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

方法

方法	描述	实例
Toggle: .modal(‘toggle‘)	手动切换模态框。	`$(‘#identifier‘).modal(‘toggle‘);`
Show: .modal(‘show‘)	手动打开模态框。	`$(‘#identifier‘).modal(‘show‘);`
Hide: .modal(‘hide‘)	手动隐藏模态框。	`$(‘#identifier‘).modal(‘hide‘);`

想要更多Java，前端，大数据，微服务等资料<a href="https://i.loli.net/2020/06/22/zbPOtKIqDjo45Mw.png">点我扫码领取</a>

niepxiya

0 关注 0 粉丝 0 动态

关注关注

安科网

BootStrap-表单--乐字节前端

niepxiya

表单控件

输入框 text

下拉选择框 select

文本域 textarea

复选框 checkbox

单选框 radio

按钮

表单布局

水平表单

内联表单

缩略图

面板

BootStrap 插件

导航

标签式导航

胶囊式导航

分页导航

分页

翻页

下拉菜单

模态框

用法

实例

方法

niepxiya

niepxiya