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 -- 表格样式、表单布局的更多相关文章

  1. 推荐的bootstrap之 formgroup表单布局样式

    一直没能找到比较好的Form Group样式,直到找到如下样式 转自 https://www.cnblogs.com/jokerjason/p/5721349.html <form class= ...

  2. bootstrap之 formgroup表单布局样式

    <form class="form-horizontal" role="form"> <fieldset> <legend> ...

  3. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  4. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  5. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  6. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  7. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  8. 基于表单布局：分析过时的table结构与当下的div结构

    一些话在前面 最近做了百度前端学院一个小任务,其中涉及到表单布局的问题, 它要处理的布局问题:左边的标签要右对齐,右边的输入框.单选按钮等要实现左对齐. 从开始入门就被告知table布局已经过时了,当 ...

  9. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

随机推荐

  1. 关于CGI 和 PHP-FPM需要弄清的

    https://blog.csdn.net/gao_yu_long/article/details/79390510 补充一点: 如果php-cgi -b 127.0.0.1:6999,则6999端口 ...

  2. Java破解图片防盗链

    前言 今天想下载几张好看的壁纸,然后发现了一张是自己比较喜欢的额.然后点进去看看,WOW!好多好看的壁纸呀,于是我就起了贪念.哈哈!想把他们这一组图片打包下载,小白的方法就是一张一张下载,那样对于我们 ...

  3. php 定时任务

    crontab第一次使用真是个坑 第一次使用crontab 时,会出现no crontab for root - using an empty one“Select a editor ......”下 ...

  4. 序列化Serializable和Parcelable

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下序列化Serializable和Parcelable的使用方法. Android中Intent如果要传递类对象,可以通过两 ...

  5. 【Python3爬虫】网易云音乐爬虫

    此次的目标是爬取网易云音乐上指定歌曲所有评论并生成词云 具体步骤: 一:实现JS加密 找到这个ajax接口没什么难度,问题在于传递的数据,是通过js加密得到的,因此需要查看js代码. 通过断掉调试可以 ...

  6. Python的魔法函数

    概要 如何定义一个类 类里通常包含什么 各个部分解释 类是怎么来的 type和object的关系 判断对象的类型 上下文管理器 类结构 #!/usr/bin/env python # -*- codi ...

  7. MHA非root用户搭建测试

    最近一直在瞎搬砖,最大的感触是运维工作难做.不过废话不多说,最近被分配了一项比较有意思的task,尝试着非root用户搭建MHA并测试下能否成功漂移,以下是两天测试和文档编写的成果,分享给各位看客,欢 ...

  8. 实战Kafka ACL机制

    1.概述 在Kafka0.9版本之前,Kafka集群时没有安全机制的.Kafka Client应用可以通过连接Zookeeper地址,例如zk1:2181:zk2:2181,zk3:2181等.来获取 ...

  9. Config Server高可用

    一 简介构建高可用的Config Server集群,包括Config Server的高可用,以及依赖Git仓库的高可用. 二 Git仓库的高可用由于配置的内容都存储在Git仓库中,所以要想实现Conf ...

  10. 如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes

    前言 在之前的一篇文章中,我们介绍了 如何将一个本地的 Java 应用程序直接部署到阿里云 ECS ,有不少读者反馈,如果目前已经在使用阿里云容器服务 Kubernetes 了,那该如何配合这个插件部 ...