Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式、表单布局
1. 表格的一些样式
举例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>这是一个测试表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地区</th>
</tr>
</thead>
<tbody>
<tr>
<td>小胡子</td>
<td>26</td>
<td>陕西</td>
</tr>
<tr>
<td>大胡子</td>
<td>26</td>
<td>北京</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果：
2. 表格行或单元格的样式
举例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>这是一个测试表格</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地区</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>小胡子</td>
<td>26</td>
<td>陕西</td>
</tr>
<tr class="warning">
<td>大胡子</td>
<td>26</td>
<td>北京</td>
</tr>
</tbody>
</table>
</body>
</html>
页面效果：
3. 表单布局
(1)垂直表单：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
<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">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
效果：
(2)内联表单：它的所有元素是内联的，向左对齐的，标签是并排的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-inline">
<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">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</body>
</html>
效果：
(3)水平表单：水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="inputfile" class="col-sm-2 control-label">选择文件</label>
<div class="col-sm-10">
<input type="file" id="inputfile">
<div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</body>
</html>
效果：
Bootstrap -- 表格样式、表单布局的更多相关文章
- 推荐的bootstrap之 formgroup表单布局样式
一直没能找到比较好的Form Group样式,直到找到如下样式 转自 https://www.cnblogs.com/jokerjason/p/5721349.html <form class= ...
- bootstrap之 formgroup表单布局样式
<form class="form-horizontal" role="form"> <fieldset> <legend> ...
- BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- 一步一步学习Bootstrap系列--表单布局
前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
- 基于表单布局：分析过时的table结构与当下的div结构
一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...
- css011 表格和表单的格式化
css011 表格和表单的格式化 一. 让表格专司其职 Html中创建一个三行三列的表格 <table> <caption align="bottom" ...
随机推荐
- 【Spark篇】---SparkStream初始与应用
一.前述 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, Twitter, Zer ...
- CORS（跨域）请求总结和测试
一.简单请求与非简单请求 跨域请求分为简单与非简单请求,同时满足以下两种条件的可以确定为简单请求. 简单请求的请求方法 请求方法 说明 head 发送头部信息 get post 简单请求的HT ...
- qt delete
在写博文之前,先推荐一篇文章,我觉着挺不错,也是qt中delete相关:QT父子与QT对象delete 学习C++的童鞋都知道new和delete必须是同时出现的,否则就会导致内存泄露 ...
- 重写equals的详细说明
返回目录 原文地址Java equals() 方法总结 equals() 超类 Object 中有这个 equals() 方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public b ...
- XSS DOM 测试
dvwa DOM XSS DOM Based XSS:是基于DOM文档对象模型的操作,通过前端脚本修改页面的DOM节点形成的XSS,该操作不与服务器端进行交互,而且代码是可见的,从前端获取到DOM中的 ...
- Node.js 进程平滑离场剖析
本文由云+社区发表 作者:草小灰 使用 Node.js 搭建 HTTP Server 已是司空见惯的事.在生产环境中,Node 进程平滑重启直接关系到服务的可靠性,它的重要性不容我们忽视.既然是平滑重 ...
- kubernetes系列06—kubernetes资源清单定义入门
本文收录在容器技术学习系列文章总目录 1.认识kubernetes资源 1.1 常用资源/对象 workload工作负载型资源:pod,ReplicaSet,Deployment,StatefulSe ...
- 一统江湖的大前端（7）React.js-从开发者到工程师
目录 一. 前端打怪升级指南 1.1 我应该从哪个框架开始学? 1.2 一次转职 1.3 二次转职 1.4 转职-其他 二. 为什么你应该学习React 2.1 技术栈的延伸 2.2 组件化开发 2. ...
- 【转载】C#工具类：人民币金额转换为中文大写
在涉及到金融业务这一块的系统设计中,时常能够遇到的情况是需要将阿拉伯数字的人民币金额自动转换为中文的大写金额.现在互联网上也有很多网站提供此类服务,只要你输入人民币的阿拉伯数字金额,输入后自动给你转换 ...
- python之编码与解码
编码 字符串被当作url提交时会被自动进行url编码处理,在python里也有个urllib.urlencode的方法,可以很方便的把字典形式的参数进行url编码.当url地址含有中文或者“/”的时候 ...