前端基础之《Bootstrap(6)—全局CSS样式_表单》
一、基本
1、基本表单(.form-group)
2、输入框的样式(.form-control)
3、表单浅灰色占位符(placeholder属性)
4、单选框(.checkbox)
5、多选框(.radio)
6、radio怎么只能选中一个,name相同的radio是同一个radio
7、例子
<form action=""><div class="form-group"><label for="">用户名:</label><input type="text" class="form-control" placeholder="username"></div><div class="form-group"><label for="">密码:</label><input type="password" class="form-control" placeholder="username"></div><div class="form-group"><label for="">留言:</label><textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="username"></textarea></div><div class="form-group"><label for="">城市:</label><select name="" id="" class="form-control"><option value="">北京</option><option value="">北京</option><option value="">北京</option></select></div><div class="form-group"><label for="">爱好:</label><div class="checkbox"><label><input type="checkbox" name="" id="">篮球</label><label><input type="checkbox" name="" id="">篮球</label></div></div><div class="form-group"><label for="">选择题:</label><div class="radio"><label><input type="radio" name="xyz" id="">篮球</label><label><input type="radio" name="xyz" id="">篮球</label></div></div><div class="form-group"><label for="">文件上传:</label><input type="file" name="" id="" class="form-control"></div><div class="form-group"><input type="submit" value="Ok" class="btn btn-primary"><input type="reset" value="Cancel" class="btn btn-danger"></div>
</form>
二、内联表单
1、表单横着放(.form-inline)
2、form表单中嵌入输入框组(.input-group)
<form action=""><div class="form-group"><div class="input-group"><div class="input-group-addon">$</div><input type="text" class="form-control"></input><div class="input-group-addon">.00</div></div></div>
</form>
3、水平排列的表单(.form-horizontal)
4、label右对齐(.control-label)
<form action="" class="form-horizontal"><div class="form-group"><label for="" class="col-md-2 control-label">用户名:</label><div class="col-md-10"><input type="text" class="form-control" placeholder="username"></div></div><div class="form-group"><label for="" class="col-md-2 control-label">密码:</label><div class="col-md-10"><input type="password" class="form-control" placeholder="username"></div></div><div class="form-group"><div class="col-md-10 col-md-offset-2"><input type="submit" value="Ok" class="btn btn-primary"><input type="reset" value="Cancel" class="btn btn-danger"></div></div>
</form>
5、form表单中的静态内容(.form-control-static)
三、禁用属性(disabled)
四、只读属性(readonly)
五、区域禁用
1、fieldset的disabled属性
为<fieldset>设置disabled属性,可以禁用<fieldset>中包含的所有控件
六、表单框阴影颜色
1、绿色(.has-success)
2、黄色(.has-warning)
3、红色(.has-error)
七、添加额外的图标
1、在form-group加入文本标记(.has-feedback)
2、在input加入文本图标(.form-control-feedback)
<form action="" class="form-horizontal"><div class="form-group has-feedback"><label for="" class="col-md-2 control-label">用户名:</label><div class="col-md-10"><input type="text" class="form-control" placeholder="username"><span class="glyphicon glyphicon-user form-control-feedback"></span></div></div><div class="form-group has-feedback"><label for="" class="col-md-2 control-label">用户名:</label><div class="col-md-10"><input type="text" class="form-control" placeholder="username"><span class="glyphicon glyphicon-ok form-control-feedback"></span></div></div><div class="form-group has-feedback"><label for="" class="col-md-2 control-label">用户名:</label><div class="col-md-10"><input type="text" class="form-control" placeholder="username"></div></div><div class="form-group"><label for="" class="col-md-2 control-label">密码:</label><div class="col-md-10"><input type="password" class="form-control" placeholder="username"></div></div><div class="form-group"><div class="col-md-10 col-md-offset-2"><input type="submit" value="Ok" class="btn btn-primary"><input type="reset" value="Cancel" class="btn btn-danger"></div></div>
</form>
八、控件尺寸
在input身上改
1、大尺寸(.input-lg)
2、小尺寸(.input-sm)
九、控件描述
1、描述(.help-block)
<p class="help-block">aaaaaaaaaaaaaaa</p>
前端基础之《Bootstrap(6)—全局CSS样式_表单》相关推荐
- 前端基础之《Bootstrap(13)—JavaScript插件_标签页、工具提示、弹出框、折叠效果和幻灯片》
一.data-开头的是什么 是bootstrap封装的js. data-toggle data-target data-dismiss data-spy 参考资料:https://blog.csdn. ...
- bootstrap插件bootbox参数和自定义弹出框宽度设置
插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...
- AndroidStudio_安卓原生开发_自定义蒙板弹出框WaitDialog---Android原生开发工作笔记134
android在执行程序过程中,很可能会用到,正在执行的提示.下面我们就自己做一个提示框,自带蒙板,执行过程中,后面的窗口内容不能操作. 下面的代码可以直接复制粘贴使用: 1.首先写一个WaitDia ...
- 前端常用插件之artDialog弹出框
前端常用插件之artDialog弹出框 最近,发现一个插件--好看精致的页面弹出框,个人觉得有必要与大家分享一下,它就是artDialog弹出框. 引用上一篇文章<前端常用插件之art-temp ...
- Bootstrap系列之弹出框(Popovers)
文章の目录 1.概述 2.Example: Enable popovers everywhere 3.Example: Using the container option 4.Example 4.1 ...
- 弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
- jQuery+Bootstrap美化弹出框
项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不吻合,因此需要修改弹出框样式. 采用jQuery+Bootstrap的方式这样弹出的 ...
- html弹出框教程,JavaScript 弹出框
JavaScript 弹出框 在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框 警告框是最简单的弹 ...
- web前端基础之Bootstrap(三) - 插件
模态框 放在body内的直接子元素 弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
- # 前端基础(HTML + CSS + JavaScript)
一.HTML 基础概念:超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 可以使用 HTML 来建立自己的 WEB 站点,H ...
最新文章
- [svc]磁盘接口与RAID
- Pandas 数据类型概述与转换实战
- 美国 AI 博士一针见血:Python 这样学最容易成为高手!
- ajax回调函数的返回值,使用ajax和回调函数向函数传递/返回值
- Working with multiple environments
- DOS特殊字符转义方法
- python中的可变数据类型有列表和元组_Python中列表的 += 和 .extend() 的异同
- 微信公众平台开发问答 【转发】
- 亮屏变“黄”,暗屏变“绿”,iPhone 12用户太难了
- c语言设计底层,【学习小总结】C语言的底层开发
- 计算机管理找不到指定模块,卸载时找不到指定模块怎么办_电脑卸载找不到指定模块处理方法-win7之家...
- ofo走出校园观察:市场定位导致产品错位?
- DRILLNET 2.0------第八章 预防碰撞分析模型
- css3中的@font-face的用法(定义多个规则)
- 大一计算机期末考试高数试卷,大一高数期末考试试题
- apache连接mysql配置_Apache+PHP配置及连接mysql数据库
- 大疆御2电池数据查看教程
- Inna and Alarm Clock
- 三个灭点来衡量一个立方体
- 酷炫小程序相册源码,制作属于自己的相册,免费下载