bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一、列表 ul li
二、表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html)
1. 基本表格 <table class="table"> 2. 响应式表格 <div class="table respoinsive"><talbe >
单独设立标题样式 标头样式
三、表单
第一种:常规样式(垂直)
<form role="form">
<!-- form-group 设置一组,所有的文本框input=text,textarea,select 设置form-countrol-->
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</label>
<input type="file" id="inputfile"> //文本框只需要设置input的类型type=“file”
<p class="help-block">这里是块级帮助文本的实例。</p> //帮助说明的样式,文字颜色浅灰色
</div>
</form> 备注:一行整合在一起: <span class="input-group-addon">$</span> 第二种:内联表单(左对齐) <form class="form-horizontal" role="form"> 第三种:Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select。
Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、week、number、email、url、
search、tel 和 color。适当的 type 声明是必需的,这样才能让 input 获得完整的样式。
文本框: <textarea class="form-control" rows="3"></textarea>
选择框: 复选checkbox 单选radio
<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
<label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">选项 2</label>
</div>
<!-- radio name名称相同,id不同 label的作用是为了让选项和文字作为一个block-->
<div class="radio">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1 </label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 选项 2 - 选择它将会取消选择选项 1 </label>
</div> 内联的选择框 :
<div>
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1 </label>
<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2 </label>
</div>
第四种:选择框
单选: <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select>
多选: <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> 第五种:纯文本控件(不需要修改,例如id,注册的用户名) <p class="form-control-static">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="请输入密码">
</div>
</div>
</form>
四、图片
三种图片效果 圆角 圆形 照片加边框
<img src="" class="img-rounded">
<img src="" class="img-circle">
<img src="" class="img-thumbnail">
五、显示下拉式功能
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">一个链接</a></li>
<li><a href="#">另一个链接 link</a></li>
<li><a href="#">其他功能</a></li>
</ul>
</div>
六、关闭按钮
<button type="button" class="close" aria-hidden="true"> × </button>
七、输入框组
文本框前面可以加上select选择框,可用于(全文检索、标题检索)等场景
八、导航 标签式导航 nav-tabs , 胶囊式导航nav-pills ,垂直的胶囊式导航 <ul class="nav nav-pills nav-stacked">
<ul class="nav nav-tabs">
<li class="active">首页</li>
<li>分类1</li>
<li>分类2</li>
<li>分类3</li>
</ul>
九、导航栏 (和导航的区别,在移动设备中可以折叠)
响应式的导航栏,可用于手机端的分类展开,或者导航展开
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">头部文字</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
bootstrap 列表 表格 表单 复选 单选 多选 输入框组的更多相关文章
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- HTML的列表表格表单知识点
无序列表格式 ...
- [Swift通天遁地]二、表格表单-(17)制作在表单左侧添加单选和复选组件的表单行
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 表单复选框input[type="checkbox"]
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
随机推荐
- mysql及redis环境部署时遇到的问题解决
redis开启远程访问redis默认只允许本地访问,要使redis可以远程访问可以修改redis.conf打开redis.conf文件在NETWORK部分有说明 解决办法:注释掉bind 127.0. ...
- java中的类和对象
Java中的类是一个模板,它用于描述一类对象的行为和状态. 对象则是类中的一个实例,对象有状态(属性)和行为(方法).例如一条狗就是一个对象,他的状态就是他的颜色,名字,品种:他的行为就是叫,摇尾巴, ...
- OTG 接口烧写最小Linux的方法
通过该方式可以烧写Android4.0.3 系统和Linux-QT 系统. 需要准备一根OTG 线,绝大多数智能手机和PC 机相连接的线都是OTG线,都是通用的. 这种方式比TF卡烧写方式要快一些,我 ...
- weblogic对jms实现的QueueConnection实现与TopicConnection实现问题
今天看了一段之前同事写jms的代码,觉得好像不对,但是不可能,生产上用的代码.刚开始想了下,脑子没转过弯来,后来一想是个简单的问题 代码如下: topicConnection = (TopicConn ...
- leetcode-99 Recover_Binary_Search_Tree
题目要求: Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without ch ...
- PostgreSQL Insight Monitor pgstat
PostgreSQL Insight Monitor pgstat pgstat 是一个连接到数据库并获取数据库的活动状态的命令行工具. PostgreSQL有许多状态: archiver for ...
- zabbix监控路由器所有接口信息
zabbix监控路由器所有接口信息 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 1.首先在服务器端安装snmp工具 [root@bogon yinzhengjie]# yum - ...
- JavaScript读写脚txt文件
1.cmd切换到“C:\Windows\System32>”下,执行“regsvr32 Scrrun.dll” 2.JavaScript读写txt文本代码如下,注意要发布到服务器上 <!D ...
- Java获取当前内存及硬盘使用情况
import java.io.File; import java.lang.management.ManagementFactory; import com.sun.management.Operat ...
- bzoj4238 电压
首先先直接对图进行二染色,dfs染完色后,有的边为搜索树边,有的为非树边,当非树边连接的两头的点为异色的时候,那么很明显这条非树边和树边构成的环上的边必然不可能成为答案:如果非树边的两端的点同色,那么 ...