Bootstrap表单控件的大小和状态

最新推荐文章于 2022-05-23 17:23:41 发布
最新推荐文章于 2022-05-23 17:23:41 发布
阅读量4.7k 收藏 6
点赞数 1
分类专栏： Bootstrap 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengqiuming/article/details/86563708
版权

一 表单控件大小

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件大小</title>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>
<body>
<h1>案例1</h1>
<form role="form">
    <div class="form-group">
        <label class="control-label">控件变大</label>
        <input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
    </div>
    <div class="form-group">
        <label class="control-label">正常大小</label>
        <input class="form-control" type="text" placeholder="正常大小">
    </div>
    <div class="form-group">
        <label class="control-label">控件变小</label>
        <input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
    </div>
</form>



<h1>案例2</h1>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
        <div class="col-xs-4">
            <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>
        <div class="col-xs-6"><input class="form-control" type="text" placeholder=".col-xs-6"></div>

    </div>
    <div class="form-group">
        <div class="col-xs-5">
            <input class="form-control input-sm" type="text" placeholder=".col-xs-5">
        </div>
        <div class="col-xs-7">
            <input class="form-control input-sm" type="text" placeholder=".col-xs-7">
        </div>
    </div>
</form>
</body>
</html>

2 效果

二 焦点状态

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title>表单控件状态——焦点状态</title>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<form role="form" class="form-horizontal">
  <div class="form-group">
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
    </div>
    <div class="col-xs-6">
      <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
    </div>
  </div>
</form>
</body>
</html>

2 效果

三 禁用状态

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件状态——禁用状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<h3>示例1</h3>
<form role="form" class="form-horizontal">
    <div class="form-group">
        <div class="col-xs-6">
            <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
        </div>
        <div class="col-xs-6">
            <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
        </div>
    </div>
</form>



<h3>示例2</h3>
<form role="form">
    <fieldset disabled>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 无法选择
            </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </fieldset>
</form>



<h3>示例3</h3>
<form role="form">
    <fieldset disabled>
        <legend><input type="text" class="form-control" placeholder="显然我颜色变灰了，但是我没被禁用，不信？单击试一下"/></legend>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 无法选择
            </label>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </fieldset>
</form>
</body>
</html>

2 效果

四 验证状态

1 代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控件状态——验证状态</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h3>示例1</h3>
<form role="form">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    </div>
</form>



<h3>示例2</h3>
<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态">
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
    </div>
    <div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
    </div>

</form>
</body>
</html>

2 效果

 

chengqiuming
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap中表单控件大小的设置
weixin_42289273的博客
06-12 1382
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件大小的设置</title> {% load staticfiles %} <link rel="stylesheet" href="{% static 'learn/css/bootstrap.css' %}"> <script s.
bootstrap的尺寸、边框、间距
hdj0511的博客
08-30 386
bootstrap的尺寸、边框、间距
Bootstrap历练实例：表单控件大小
adiking520110的博客
11-23 114
表单控件大小 您可以分别使用 class.input-lg和.col-lg-*来设置表单的高度和宽度。 实例： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title...
Bootstrap 表单控件的尺寸
歪脖先生的博客
03-07 3万+
表单控件的尺寸在Bootstrap中，有三种设置控件尺寸的方法，一种是让控件成为块级元素，一种是使用相对尺寸，一种是使用网格尺寸。1、让控件成为块级元素如果想让控件像块级元素一样占满容器，就可以为它添加 .input-block-level 类。这样，控件不仅可以占满容器，还可以根据浏览器窗口自动调整尺寸。如：&lt;input class="input-block-level" type="te...
BootStrap框架模块:BootStrap4组件
LiLi的博客
01-14 1831
BootStrap4组件 1.1 BootStrap组件部分一 警告提示框(Alert) 警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供常见的上下反馈消息和提示。 警报是一组颜色控件（共八个颜色样式），可用于任何长度的文本，以及可选的关闭按钮，系统提供8个可用的正确的样式（如，.alert-success），如你还可以使用jQuery插件方法来解除内联元素。 <div class="alert alert-primary" role="alert"> A simple prim
Bootstrap中表单控件状态(验证状态)
09-01
总的来说，Bootstrap的表单控件状态和验证机制提供了一套强大且易于使用的工具，帮助开发者轻松创建出具有专业反馈功能的表单，从而提升用户体验。通过灵活地应用警告、错误和成功状态，以及相应的图标，你可以构建...
BootStrap 表单控件之单选按钮水平排列
08-30
本文将详细讲解如何实现Bootstrap表单控件中的单选按钮（Radio Buttons）水平排列。 首先，让我们回顾一下Bootstrap表单的基本结构。一个基本的Bootstrap表单通常包含在一个`<form>`元素内，并使用`role="form"`...
BootStrap表单控件之文本域textarea
08-30
在Bootstrap中，表单控件是构建用户界面的关键元素，它们使得用户能够输入和提交数据。本文将深入探讨Bootstrap中的一个特定表单控件——文本域（textarea）。 文本域通常用于在表单中收集较长的文本输入，如用户...
Bootstrap表单控件学习使用
08-31
总结，Bootstrap表单控件是构建交互式网页的关键组件，它们提供了丰富的样式和功能，可以极大地提高表单的可用性和美观度。通过熟练掌握这些控件的使用，开发者能够更高效地构建出符合现代Web标准的动态网页。
Bootstrap表单控件使用方法详解
08-31
总的来说，Bootstrap表单控件的使用涉及多个HTML元素和Bootstrap特有的CSS类，通过合理组合这些元素，我们可以快速构建出功能齐全且具有良好视觉效果的Web表单。了解并熟练掌握这些控件，将有助于提升开发效率，同时...
BootStrap表单宽度设置方法
08-31
主要介绍了BootStrap表单宽度设置方法,仅仅是小编日常遇到问题记录，写的不好还请见谅，需要的朋友可以参考下
class="control-label" 什么意思?
_Speed的博客
07-15 4872
经过测试原来是右对齐!!! 在右边有输入框的情况下. label的文字向右靠. 这会更好看点,我觉得
Bootstrap-表单控件大小和状态
热门推荐
lhh_12345的博客
11-21 5万+
1、表单控件大小 可以通过设置控件height、line-height、padding和font-size等属性实现控件高度的设置。 bootstrap中对input、textarea和select控件使用两个类名来控制大小，但是都需要“form-control”维持基本样式：      input-sm：让控件比正常更小；      input-lg：让控件比正常更大。 源码：
改变Bootstrap的iCheck的尺寸
daelly的专栏
06-19 2393
看到iCheck的漂亮的多选、单选按钮，但是iCheck的大小已经被固定住了。怎样调整iCheck的大小让它更适合我们的页面。
checkbox复选框如何修改尺寸大小
woaini1314815的博客
05-23 1万+
checkbox复选框修改尺寸大小
bootstrap的datetimepicker使用
四万八千里
03-03 343
引用css <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="css/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"> 引用js &lt...
9、表单控件
QilanAllen的博客
05-22 1290
为了让控件在各种表单风格中样式不出错，需要添加类名“form-control” 一、单行输入框<input> 单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”] 例如 <!doctype html> <html lang="en"> <head>
基本CSS样式（三）
逝者如风
02-17 640
出处：http://blog.sina.com.cn/s/blog_656ee78e0101oqit.html 不可编辑的输入框 对于在表单中呈现不可编辑的数据，无需使用实际的表单控件。 Some value here class="input-xlarge uneditable-input">Some value here 表单行为 将一组行为(按
bootstrap调整form大小
最新发布
04-07
可以使用Bootstrap提供的表单控件类来调整表单大小，例如： 姓名 请输入姓名"> 其中，form-control-lg类可以调整输入框的大小为大号。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值