首页
所有分类
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 相关文章推荐
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
Jul 09 Javascript
JS判断字符串长度的5个方法（区分中文和英文）
Mar 18 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jquery通过name属性取值的简单实现方法
Jun 20 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
关于JS中的方法是否加括号的问题
Jul 27 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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
OpenFeign(1) Windows Server 2022(3) Hive(5) calc(1) HttpClient(1) NTP(1) SandBox(1) RestTemplate(1) K8s(1) Windows Server(4)
You might like
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
Windows2003下php5.4安装配置教程（IIS）
2016/06/30 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
javascript 对象的定义方法
2007/01/10 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
js打造数组转json函数
2015/01/14 Javascript
javascript日期处理函数，性能优化批处理
2015/09/06 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
vue3.0 上手体验
2020/09/21 Javascript
从零学Python之hello world
2014/05/21 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
python操作mysql数据库
2017/03/05 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python找出完数的方法
2018/11/12 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
详解Django CAS 解决方案
2019/10/30 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
MUGLER官方网站：蒂埃里·穆勒香水
2019/11/26 全球购物
个人现实表现材料
2014/02/04 职场文书
有趣的广告词
2014/03/18 职场文书
法律专业大学生职业生涯规划书：向目标一步步迈进
2014/09/22 职场文书
长江三峡导游词
2015/01/31 职场文书
HR在给员工开具离职证明时，需要注意哪些问题？
2019/07/03 职场文书
新店开业策划方案怎么书写？
2019/07/05 职场文书
2019奶茶店创业计划书范本，值得你借鉴
2019/08/14 职场文书
试了下Golang实现try catch的方法
2021/07/01 Golang
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python