bootstrap表单的其他组件

最新推荐文章于 2023-10-19 14:57:04 发布
最新推荐文章于 2023-10-19 14:57:04 发布
阅读量1k 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap bootstrap表单 bootstrap表单其他组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011175410/article/details/24638795
版权 
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 表单</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body style="padding:50px;">
    <h3>其他常用表单控件【多个复选框或单选按钮并排显示.inline】</h3>
    <p>让多个表单标签并排显示，只需要给label添加一个.inline类</p>
    <label for="" class="checkbox inline"><input type="checkbox" name="" id="" value="">1</label>
    <label for="" class="checkbox inline"><input type="checkbox" name="" id="" value="">2</label>
    <label for="" class="radio inline"><input type="radio" name="sex" id="">男</label>
    <label for="" class="radio inline"><input type="radio" name="sex" id="">女</label>
    
    <h3>选项列表</h3>
    <select name="" id="">
    	<option value="">1</option>
    	<option value="">2</option>
    	<option value="">3</option>
    	<option value="">4</option>
    	<option value="">5</option>
    </select>
    <br>
    <p>下拉列表选择多项，只需加句multiple="multiple"即可</p>
    <select name="" id="" multiple="multiple">
    	<option value="">1</option>
    	<option value="">2</option>
    	<option value="">3</option>
    	<option value="">4</option>
    	<option value="">5</option>
    </select>
    
    <h3>扩展表单组件【前/后置组件】</h3>
    <ol>
    	<li>讲表单组件用div包含，并添加一个input-prepend类或input-append类</li>
    	<li>然后在div里面添加一个.add-on类的span标签</li>
    	<li>后面紧跟表单文本框的控件</li>
    	<li>span的位置可以在前，也可以在后</li>
    </ol>
    <div class="input-prepend">
    	<span class="add-on">@</span>
        <input type="text" name="" id="" placeholder="张三丰">
    </div>
    
    <div class="input-append">
        <input type="text" name="" id="" placeholder="张三丰">
    	<span class="add-on">@</span>
    </div>
    
    <div class=" input-prepend input-append">
    	<span class="add-on">$</span>
    	<input type="text" name="" id="">
    	<span class="add-on">.00</span>
    </div>
    <div class=" input-prepend input-append">
    	<button class="btn">选项</button>
    	<input type="text" name="" id="">
    	<button class="btn">搜索1</button>
    	<button class="btn">搜索2</button>
    </div>
    
    <h3>圆弧搜索表单</h3>
    <form class="form-search" action="">
    	<div class="input-prepend">
        	<button class="btn">搜索1</button>
            <input class="search-query" type="text" name="" id="" placeholder="开始搜索">
        </div>
        <br><br>
    	<div class=" input-append">
            <input class="search-query" type="text" name="" id="" placeholder="开始搜索">
        	<button class="btn">搜索2</button>
        </div>
    </form>
    
    <h3>控件大小设置</h3>
    <input class="input-block-level" type="text" name="" id="" placeholder="块级文本框">
    
    <b>控制控件大小除了.span*，还可以用类名input-mini/small/medium/large/xlarge/xxlarge</b><br>
    <input class="input-mini" type="text" name="" id=""><br>
    <input class="input-small" type="text" name="" id=""><br>
    <input class="input-medium" type="text" name="" id=""><br>
    <input class="input-large" type="text" name="" id=""><br>
    <input class="input-xlarge" type="text" name="" id=""><br>
    <input class="input-xxlarge" type="text" name="" id=""><br>
    
    <h3>相对大小的控件</h3>
    <input class="span1" type="text" name="" id="">
    <input class="span2" type="text" name="" id="">
    <input class="span3" type="text" name="" id="">
    
    <select class="span1" name="" id="">...</select>
    <select class="span2" name="" id="">...</select>
    <select class="span3" name="" id="">...</select>
    
    <h3>不可编辑的控件</h3>
    <input class="uneditable-input" type="text" name="" id="" placeholder="文本不可编辑"><br>
    <textarea class="uneditable-textarea" name="" id="" cols="30" rows="5"></textarea>
    
    <form class="form-horizontal">
    	<div class="control-group warning">
            <label class="control-label">Input widht warning</label>
            <div class="controls">
                <input type="text" name="" id="">
                <span class=" help-inline">something may have gone wrong!</span>
            </div>
        </div>
        <div class="control-group error">
            <label class="control-label">Input widht warning</label>
            <div class="controls">
                <input type="text" name="" id="">
                <span class=" help-inline">something may have gone wrong!</span>
            </div>
        </div>
        <div class="control-group info">
            <label class="control-label">Input widht warning</label>
            <div class="controls">
                <input type="text" name="" id="">
                <span class=" help-inline">something may have gone wrong!</span>
            </div>
        </div>
        <div class="control-group success">
            <label class="control-label">Input widht warning</label>
            <div class="controls">
                <input type="text" name="" id="">
                <span class=" help-inline">something may have gone wrong!</span>
            </div>
        </div>
    </form>
  </body>
</html>

预览效果：


波克比520
关注
专栏目录
Bootstrap 基础CSS - 表单（Forms）
Try my best
01-27 5万+
样式 名称 类 描述 垂直式 (默认) .form-vertical (非必填，默认) 堆叠式的，所有控件的标签文字都左对齐 行式 .form-inline 标签文字左对齐，控件以inline-block紧凑形式存在 搜索式 .form-search 经典的搜索美化方案，对文本框
Bootstrap表单的使用
Debug的博客
02-26 2644
HTML中表单是网页和应用程序不可缺少的一部分，Bootstrap通过预定义的类极大的简化了表单组件的样式及使用方式。
Bootstrap 表单控件的尺寸
热门推荐
歪脖先生的博客
03-07 3万+
表单控件的尺寸在Bootstrap中，有三种设置控件尺寸的方法，一种是让控件成为块级元素，一种是使用相对尺寸，一种是使用网格尺寸。1、让控件成为块级元素如果想让控件像块级元素一样占满容器，就可以为它添加 .input-block-level 类。这样，控件不仅可以占满容器，还可以根据浏览器窗口自动调整尺寸。如：&lt;input class="input-block-level" type="te...
Bootstrap 表单的扩展控件
歪脖先生的博客
03-07 1472
表单的扩展控件除了基本的控件，作为对 HTML 表单控件的补充，Bootstrap 还为表单额外提供了一些非常实用的扩展控件。输入框的前置和后置组件，是非常实用的控制控件。利用输入框的前置和后置组件，可以在输入框的前面或后面添加用户输入中的公共内容。如，可以为输入框前置人民币符号、电子邮件的 @ 符号、或其他公共的内容。要在输入框的前面或后面添加内容，首先创建一个 .input-prepend 或...
深入理解inline元素，block-level元素和display属性
jujuwuju的专栏
07-23 1050
行内元素和块级元素有什么异同？ 可能你觉得这是一个老掉牙的问题，但其实并没有那么简单。 对于初学者来说，当遇到面试官问到这个问题的时候，脑海里的第一印象是css的display属性，值为inline时为行内元素，值为block时为块级元素，那值为inline-block时呢，元素是块级行内元素吗？ 其实我们看问题的角度从一开始就错了，错误地站在了css的角度，而真正正确的是站在html的角度。因为这里的元素，本质上是指html的DOM元素。 下面我们就3个原理展开深入： 深入理解inline元.
Bootstrap的表单组件相关知识
昊虹AI笔记
10-19 164
Bootstrap的表单组件相关知识
Bootstrap提交表单基本组件
WangCode
11-13 446
Bootstrap提交表单基本组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <link rel="stylesheet " href="static/css/bootstrap.min.css"> </head> <body> <form role="
详解Bootstrap表单组件
atbird0321的专栏
06-27 1102
转载：https://www.cnblogs.com/jnslove/p/5434577.html 表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本： LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset、legend、label标签进行了定制 fi...
bootstrap fileinput上传组件和form表单一起提交
人的一生就是在学习的道路上不断进步
12-02 3715
bootstrap fileinput上传组件和form表单一起提交
Bootstrap表单组件教程详解
09-02
本教程将深入讲解Bootstrap表单组件的使用方法。 首先，表单组件的基本元素包括文本输入框、下拉选择框、单选框、复选框、文本域以及按钮。这些元素在HTML中都有对应的标签，如`<input>`（文本输入框）、`<select>`...
bootstrap 相关web组件库
最新发布
02-05
Font-Awesome图标可以通过CSS控制大小、颜色和其它样式，与Bootstrap的其他组件结合使用，能为网页增添专业且一致的视觉元素。 Bootstrap-Datepicker 是一个用于Bootstrap的日期选择插件，它允许用户在网页上方便地...
vue2.0数据双向绑定与表单bootstrap+vue组件
01-19
最近一直在用vue，觉得确实是好用。 一，拿数据的双向绑定来说吧 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>demo1</title>... new Vue({
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
12-30
还是表单验证的问题，发现如果表单内有使用BootStrap-select的下拉选框，在重置表单内容时，会触发对下拉选框的验证，并且验证的提示不会被清除，仍然会存在。 1.HTML结构 <form id=validatorForm> ... ...
bootstrap搜索图标的使用
波克比的前端CSDN博客
05-06 6321
一个搜索表单 submit
bootstrap响应式导航
波克比的前端CSDN博客
04-26 1941
Bootstrap Demo1 Bokebi
bootstrap简单的页面Demo1
波克比的前端CSDN博客
05-06 1794
{CSDN:CODE:html5shiv} 预览图片：
bootstrap按钮和图像
波克比的前端CSDN博客
05-06 1225
Bootstrap 按钮 按钮大小 large button large button default button default button small button large butto
Bootstrap表单组件深度解析
"Bootstrap表单组件教程详解，涵盖了表单中的基本元素，如文本输入框、下拉选择框、单选框、复选框、文本域和按钮，并提供了Bootstrap对这些元素的定制样式，包括LESS和SASS文件的引用。Bootstrap主要对fieldset、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值