bootstrap 表单控件 控件状态 控件大小 help-block

最新推荐文章于 2023-05-25 22:26:21 发布
最新推荐文章于 2023-05-25 22:26:21 发布
阅读量985 收藏
点赞数
文章标签： javascript ViewUI

bootstrap 表单控件 控件状态 控件大小 help-block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body>
    <div class="container">

        <p class="btn-primary">表单控件</p>
        <input type="text" placeholder="this is text">
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
        </select>
        <select name="" id="" multiple>
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
        </select>
        <div class="checkbox">
            <label for="">
                <input type="checkbox"> abc
            </label>
        </div>
        <div class="radio">
            <label for="">
                <input type="radio" name="A" value="A" checked="">A
            </label>
        </div>
        <div class="radio">
            <label for="">
                <input type="radio" name="A" value="B">B
            </label>
        </div>
        <div class="checkbox-inline">
            <label for="">
                <input type="checkbox"> ABC
            </label>
        </div>
        <div class="radio-inline">
            <label for="">
                <input type="radio"> A
            </label>
        </div>
        <p class="btn-primary">控件状态</p>
        <input type="text" value="ABC" disabled="disabled">
        <input type="text" value="set class disabled is useless" class="disabled">
        <input type="text" value="ABC">
        <p class="btn-primary">验证提示状态</p>
        <div class="form-group has-warning">
            <label for="inputwarning" class="control-label">input Warning</label>
            <input type="text" class="form-control" id="inputwarning">
        </div>
        <div class="form-group has-error">
            <label for="inputerror" class="control-label">input Error</label>
            <input type="text" class="form-control" id="inputerror">
        </div>
        <div class="form-group has-success">
            <label for="inputsuccess" class="control-label">input Success</label>
            <input type="text" class="form-control" id="inputsuccess">
        </div>
        <div class="form-group has-warning has-feedback">
            <label for="inputwarning" class="control-label">input Warning</label>
            <input type="text" class="form-control" id="inputwarning">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
        </div>
        <div class="form-group has-error has-feedback">
            <label for="inputerror" class="control-label">input Error</label>
            <input type="text" class="form-control" id="inputerror">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <label for="inputsuccess" class="control-label">input Success</label>
            <input type="text" class="form-control" id="inputsuccess">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
        <p class="btn-primary">控件大小</p>
        <div class="row">
            <div class="col-xs-2">
                <input type="text" class="input-lg form-control" placeholder='.col-xs-2'>
            </div>
            <div class="col-xs-3">
                <input type="text" class="input-sm form-control" placeholder='.col-xs-3'>
            </div>
        </div>
        <p class="btn-primary">.help-block</p>
        <span>this is span before help-block</span>
        <span class="help-block">this is help block span</span>
        <span>this is span after help-block</span>
    </div>
</body>

</html>

 

weixin_34151004
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap-表单控件大小和状态
lhh_12345的博客
11-21 5万+
1、表单控件大小 可以通过设置控件height、line-height、padding和font-size等属性实现控件高度的设置。 bootstrap中对input、textarea和select控件使用两个类名来控制大小，但是都需要“form-control”维持基本样式：      input-sm：让控件比正常更小；      input-lg：让控件比正常更大。 源码：
Bootstrap的表单控件
Q
01-05 7069
支持的表单控件Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。 输入框（Input）最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-loc
jquery bootstrap help-block input 表单 提示 帮助 信息
aiqingshan6402的博客
04-03 780
<div class="form-group"> <label for="hot" class="col-sm-3 control-label">是否热门</label> <div class="col-sm-9"> ...
Bootstrap 表单的帮助文本
歪脖先生的博客
03-07 1406
表单的帮助文本Bootstrap 中，可以为表单控件提供一些帮助文本，来作为用户输入时的帮助信息。支持行内帮助文本和块级帮助文本。在文本输入框的后面，添加 .help-inline 的元素，就可以为它添加行内帮助文本。如：&lt;input type="text"&gt;&lt;span class="help-inline"&gt;Inline help text&lt;/span&gt;效果如...
Bootstrap<表单>
Andy_java_的博客
11-10 937
1.基础表单（垂直表单） 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 同样，表单也是Bootstrap框架中的核心内容，下面向大家介绍Bootstrap框架中表单的制
改变Bootstrap的iCheck的尺寸
daelly的专栏
06-19 2405
看到iCheck的漂亮的多选、单选按钮，但是iCheck的大小已经被固定住了。怎样调整iCheck的大小让它更适合我们的页面。
05-bootstrap-CSS样式-表格、表单
最新发布
记录java学习日常~
05-25 196
为 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。通过添加 .table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。
Bootstrap表单组件教程详解
09-02
此外，Bootstrap还提供了其他表单组件，如预填充的表单（.form-group.has-feedback）、帮助文本（.help-block）、验证状态（.has-error, .has-warning, .has-success）以及表单控制组（.form-control-feedback）等，...
bootstrap表单验证
06-01
首先，Bootstrap提供了内置的表单控件样式，如文本输入框、选择器、复选框和单选按钮等，这些样式使得表单在视觉上更加一致和专业。然而，仅仅有美观的外观是不够的，我们还需要验证用户在这些控件中输入的数据。这...
如何使用Bootstrap创建表单
12-09
首先，要创建一个基本的Bootstrap表单，我们需要遵循以下步骤： 1. **设置表单基础结构**：使用`<form>`标签作为表单的基本容器，并为其添加`role="form"`属性，以便浏览器可以识别其为表单元素。 2. **创建表单组...
bootstrap非常实用的复选框
10-11
非常实用的复选框，经典、推荐。非常实用的复选框，经典、推荐。
CheckBox复选框美化版
12-08
CheckBox复选框美化版 推荐下载
bootstraps 复选框样式 优化 样式修改
04-17
bootstraps 复选框样式 优化 样式修改
Bootstrap表单使用方法详解
08-31
Bootstrap 支持多种表单控件，包括输入框、选择框、复选框、单选按钮、文本区域等。以下是一些常见的表单控件示例： - 输入框：`<input type="text">`，可以添加 `placeholder` 属性提供提示文本。 - 密码输入框：`...
html表单如何提示信息,表单提示信息
weixin_34517026的博客
06-20 3922
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。成功状态你输入的信息是正确的…运行效果如下或查看右侧结果窗口：具体样式代码请查看bootstrap.css文件第1922行～第1927行：.help-block {display: block;margin-top: 5px;m...
Bootstrap 表单控件的尺寸
热门推荐
歪脖先生的博客
03-07 3万+
表单控件的尺寸在Bootstrap中，有三种设置控件尺寸的方法，一种是让控件成为块级元素，一种是使用相对尺寸，一种是使用网格尺寸。1、让控件成为块级元素如果想让控件像块级元素一样占满容器，就可以为它添加 .input-block-level 类。这样，控件不仅可以占满容器，还可以根据浏览器窗口自动调整尺寸。如：&lt;input class="input-block-level" type="te...
checkbox多选框大小设置方法
weixin_39536750的博客
05-29 8982
input[type=checkbox] { -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FireFox */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ }input[...
Bootstrap表单控件全解析：input、textarea等实例演示
在实际应用中，这些表单控件可以嵌套使用，并通过Bootstrap的CSS和JavaScript插件（如`.form-control`, `.has-error`, `.help-block`等）进行额外的样式定制和交互增强。同时，Bootstrap还提供了表单验证的功能，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值