首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap 实现表格样式、表单布局的实例代码

Posted in Javascript onDecember 09, 2018

1. 表格的一些样式

Bootstrap 实现表格样式、表单布局的实例代码

举例：

<!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>

页面效果：

Bootstrap 实现表格样式、表单布局的实例代码

2. 表格行或单元格的样式

Bootstrap 实现表格样式、表单布局的实例代码

举例：

<!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>

页面效果：

Bootstrap 实现表格样式、表单布局的实例代码

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>

效果：

Bootstrap 实现表格样式、表单布局的实例代码

(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>

效果：

Bootstrap 实现表格样式、表单布局的实例代码

(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 实现表格样式、表单布局的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Bootstrap 实现表格样式、表单布局的实例代码

- Author -

在代码的世界里游走

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript css float属性的特殊写法
Nov 13 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
JavaScript简易计算器制作
Jan 17 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 #Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 #Javascript
vue form check 表单验证的实现代码
Dec 09 #Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 #Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 #Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 #Javascript
JS数组去重的6种方法完整实例
Dec 08 #Javascript
鸿蒙(2) xhunter1.sys(1) 蓝牙(1) 蓝牙耳机(1) HarmonyOS(1) 虚拟键盘(1) 鸿蒙3.0(1) 华为(1) Debian(1) RustDesk(1)
You might like
PHP下MAIL的另一解决方案
2006/10/09 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读（十一）
2014/06/25 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
js常见遍历操作小结
2019/06/06 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue+Element中table表格实现可编辑（select下拉框）
2020/05/21 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
python自定义类并使用的方法
2015/05/07 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
带你认识Django
2019/01/15 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
自学python用什么系统好
2020/06/23 Python
大二学生学习个人自我评价
2014/01/19 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
毕业大学生自荐信
2014/06/17 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书