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. 利用U盘安装win2008r2系统的步骤

    我们在公司或者家里,经常要安装各种系统,最近公司需要重新安装win2008r2系统.折腾了一天的时间,终于把系统装好了.将安装的步骤记录下来,方便大家查看,自己也做个记录. 1 准备win2008r2 ...

  2. hadoop分布式搭建

    1.新建三台机器,分别为: hadoop分布式搭建至少需要三台机器: master extension1 extension2 本文利用在VMware Workstation下安装Linux cent ...

  3. 【Spark篇】---Spark中广播变量和累加器

    一.前述 Spark中因为算子中的真正逻辑是发送到Executor中去运行的,所以当Executor中需要引用外部变量时,需要使用广播变量. 累机器相当于统筹大变量,常用于计数,统计. 二.具体原理 ...

  4. 最近要租房子,用Python看一下房源吧..

    前言:最近我的朋友想要租房子,为了装个b,决定运用技术去帮助他. 这个网站是什么我也不知道 反正是一个房子交易网站  http://www.ljia.net/ 设置请求头 headers = {'Ac ...

  5. gradle插件从3.2.0升级到3.2.1后报错Error: Cannot create directory 项目目录\thirdlib\build\intermediates\packaged_res\debug\drawable

    报错信息如下:  解决方案: 删除thirdlib\build目录,然后重新编译. 但是紧接着又会报类似的错误,只不过build目录变成其他module的了. 所以,先clear build,然后再重 ...

  6. Android软键盘事件imeOptions响应

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 在android发开过程中,有时候需要对EditText的软键盘进行监听. 当点击软键盘回车位置按键的时候,需要实现 完成.前进.下 ...

  7. JAVA 连等赋值问题

    一.描述 关于 Java 连等赋值,例如a=b=c;我们知道它是从右往左依次赋值的,其结果大致可以拆分为b=c;a=b;,但是当栈中没有持有变量的引用时,则会出现问题,例如: public class ...

  8. java内部类深入详解 内部类的分类 特点 定义方式 使用

    本文关键词: java内部类 内部类的分类 特点  定义方式 使用   外部类调用内部类 多层嵌套内部类  内部类访问外部类属性  接口中的内部类  内部类的继承  内部类的覆盖  局部内部类 成员内 ...

  9. 经典面试题|讲一讲JVM的组成

    JVM(Java 虚拟机)算是面试必问的问题的了,而但凡问 JVM 一定会问的第一个问题就是:讲一讲 JVM 的组成?那本文就注重讲一下 JVM 的组成. 首先来说 JVM 的组成分为,整体组成部分和 ...

  10. 痞子衡嵌入式：第一本Git命令教程（5）- 提交(commit/format-patch/am)

    今天是Git系列课程第五课,上一课我们做了Git本地提交前的准备工作,今天痞子衡要讲的是Git本地提交操作. 当我们在仓库工作区下完成了文件增删改操作之后,并且使用git add将文件改动记录在暂存区 ...