Bootstrap全局css样式_表单
2024-05-15 09:08:54
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form action=""> <div class="form-group"><label for="em">用户名</label><input type="email" class="form-control" placeholder="Email" id="em"></div><div class="form-group"><label for="">密码</label><input type="password" class="form-control"></div><div class="form-group"><label for="">File input</label><input type="file"><p>请选择您需要的文件</p></div><div class="box"><label for=""><input type="checkbox">女</label></div><button type="submit" class="btn btn-default">提交</button></form></div></body>
</html>内联表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-inline"> <div class="form-group"><label class="sr-only">username</label><div class="input-group"><div class="input-group-addon">$</div><input type="email" class="form-control" placeholder="金额"><div class="input-group-addon">.00</div></div></div><div class="form-group"><label class="sr-only">password</label><input type="password" class="form-control" placeholder="password"></div></form></div></body>
</html>水平排列的表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><div class="form-group"><label class="col-md-2 control-label">Email</label><div class="col-md-10"><input type="email" class="form-control"></div></div></form></div></body>
</html>文本域
支持多行文本的表单控件。可根据需要改变 rows 属性。<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><textarea class="form-control" rows="3"></textarea></form></div></body>
</html>下拉列表（select）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form action=""><select class="form-control"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select><select multiple class="form-control"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></form></div></body>
</html>焦点状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><label class="sr-only">hello</label><input class="form-control" focus></form></div></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><label class="sr-only">hello</label><input class="form-control" disabled></form></div></body>
</html>禁用状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><fieldset disabled><div class="form-group"><label class="sr-only">hello</label><input class="form-control"></div><div class="form-group"><label class="sr-only">hello</label><input class="form-control"></div><div class="form-group"><label class="sr-only">hello</label><input class="form-control"></div><button type="reset" class="btn btn-default">重置</button><a href="#">aaaa</a></fieldset></form></div></body>
</html>只读状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><a href="#">aaaa</a><div class="form-group"><label class="sr-only">hello</label><input class="form-control" type="text" placeholder="zhidu" readonly></div></form></div></body>
</html>校验状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><div class="form-group has-success"><label class="control-label">hello</label><input type="text" class="form-control"></div></form></div></body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><div class="form-group has-error"><label class="control-label">hello</label><input type="text" class="form-control"></div></form></div></body>
</html>添加额外的图标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><div class="form-group has-success has-feedback"><label class="control-label">hello</label><input type="text" class="form-control" placeholder="hello" aria-describedby="inputsuccessstatus" aria-hidden="true"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span></div></form></div></body>
</html>控件尺寸
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form表单</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body><div class="container"><form class="form-horizontal"><input class="form-control input-lg" type="text" placeholder="大"><input type="text" class="form-control" placeholder="默认"><input type="text" class="form-control input-sm" placeholder="小"></form></div></body>
</html>Bootstrap全局css样式_表单相关推荐
- 前端基础之《Bootstrap（6）—全局CSS样式_表单》
一.基本 1.基本表单(.form-group) 2.输入框的样式(.form-control) 3.表单浅灰色占位符(placeholder属性) 4.单选框(.checkbox) 5.多选框(.r ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
- Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接 当前页面中的其他部分,那么,务必为其设置 role ...
- Bootstrap全局css样式_图片，响应式工具
响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...
- Bootstrap全局css样式_表格
条纹状表格 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式.<!DOCTYPE html> <html lang=" ...
- Bootstrap全局css样式_代码
内联代码 通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
- Bootstrap全局css样式_辅助类
情境文本颜色通过颜色来展示意图,Bootstrap 提供了一组工具类.这些类可以应用于链接,并且在鼠标经过时颜色可以 还可以加深,就像默认的链接一样.<!DOCTYPE html> < ...
- bootstrap起步 全局css样式概览 全局css样式_栅格 全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
- 前端基础之《Bootstrap（2）—全局CSS样式_栅格系统》
一.Bootstrap要点 1.bootstrap全局CSS样式 2.bootstrap CSS组件 3.bootstrap javascript插件 其实就是官网上的这三个. 二.项目引入Boots ...
最新文章
- C++从键盘读取字符
- luajit表记录监控（忆一次项目上线中遇到的luajit对象内存泄漏）
- appweb ejs_具有快速路线的EJS
- docker部署ubuntu并连接ssh远程调试代码
- 电工产品的电磁兼容要求
- org.springframework.beans.factory.UnsatisfiedDepen
- 2020年“深圳杯”数学建模挑战赛C题-无线可充电传感器网络充电路线规划
- mp c2011sp文件服务器,理光Ricoh MP C2011SP驱动
- 快速上手Onvif（Python）心得
- Postfix权威指南阅读笔记
- 如何破解瞻博网络认证的互联网专家 - JUNOS安全考试（JNCIS）
- Linux编程学习笔记-多进程编程
- Ext群 群主大漠穷秋的五年开发技术集合
- VBA中调用Excel函数
- 未知usb设备(设备描述请求失败)_HomePod mini?电源线同样不可拆卸：但或能用USB-C移动电源供电...
- 《深入理解Android 卷III》第八章深入理解Android壁纸
- 单片机实现模块化编程：思维+实例+系统教程(实用程度令人发指)
- Cocos2d-x 2.0 之 Actions “三板斧” 之三
- FPGA 开发项目参考
- DBA到底要做什么？
热门文章
- 类和对象：一些相关的BIF - 零基础入门学习Python040
- TOJ 4393 Game
- 进程返回linux系统编程之管道（二）：管道读写规则和Pipe Capacity、PIPE_BUF
- Java两则故障分析和常见连接超时时间
- 通向架构师的道路（第十天）之Axis2 Web Service(一)
- [HNOI2016]矿区
- 浅析VS2010反汇编 VS 反汇编方法及常用汇编指令介绍 VS2015使用技巧 调试-反汇编 查看C语言代码对应的汇编代码...
- 解决问题：心态 原则 方法
- Android照片墙完整版，完美结合 内存方案 LruCache 和 硬盘方案 DiskLruCache
- Windows平台Eclipse配置Maven