Bootstrap系列 -- 11. 基础表单

简介:   表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

 

  表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框下拉选择框、单选按钮、复选按钮文本域按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

  

<form role="form">
        <div class="form-group">
            <label for="exampleInputEmail1">邮箱:</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"/>
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>
                记住密码
   
            </label>
        </div>
        <button type="submit" class="btn btn-default">进入邮箱</button>
    </form>
基础表单

 

  Bootstrap中主要将这些元素的marginpaddingborder等进行了细化设置。当然表单除了这几个元素之外,还有inputselecttextarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。

  1. 宽度变成了100%

  2. 设置了一个浅灰色(#ccc)的边框

  3. 具有4px的圆角

  4. 设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化

  5. 设置了placeholder的颜色为#999

 

  运行效果图

相关文章
N..
|
1月前
|
开发框架 前端开发 UED
Bootstrap表单
Bootstrap表单
N..
18 0
|
7月前
|
前端开发 JavaScript 数据安全/隐私保护
Bootstrap 表单样式-水平排列
Bootstrap 表单样式-水平排列
43 0
|
6月前
|
Web App开发 移动开发 前端开发
|
7月前
|
前端开发
Bootstrap 表单样式
Bootstrap 表单样式
24 0
|
11月前
开心档 - 软件开发入门之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
|
11月前
|
移动开发 前端开发 HTML5
开心档 - 软件开发入门之 Bootstrap4 表单控件
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
|
11月前
|
前端开发 JavaScript 容器
开心档 - 软件开发入门之 Bootstrap4 表单
在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
|
11月前
开心档之 Bootstrap4 自定义表单
Bootstrap4 自定义表单Bootstrap4 可以自定义一些表单的样式来替换浏览器默认的样式。
|
前端开发
bootstrap 组件之表单 组件学习总结
bootstrap 组件之表单 组件学习总结
|
前端开发
关于Bootstrap 表格样式及表单布局的设置
讲解bootstrap、表格样式、表单布局、Bootstrap 实现表格样式、表单布局等。
258 0
关于Bootstrap 表格样式及表单布局的设置