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. 从零开始学习PYTHON3讲义（五）while循环和棋盘麦粒问题

    <从零开始PYTHON3>第五讲 ​上一节课重点学习了字符串,并且传递了一个重要的理念,就是程序要对开发人员自己和用户都足够友好.在这个过程中,利用字符串给出充分.完整.准确的提示是非常重 ...

  2. CentOS安装FTP服务

    最近公司有一个内部比赛(黑客马拉松),报名参加了这么一个赛事,在准备参赛作品的同时(参赛服务器需要自己搭建),借着这个机会,决定把tomcat部署相关的知识从0到1重新捋一遍.就当备忘录了. FTP服 ...

  3. centos7下误执行chmod -R 777 /后的权限修复方法

    今天由于权限问题zz一般把/usr/bin和/usr/lib两个目录用chmod -R 777执行了一遍,结果各种问题出现,su root就报su:鉴定故障的错误.然后上网找教程很多都要求在root权 ...

  4. SpringCloud Config客户端

     SpringCloud Config服务端 1.导入依赖 <dependency> <groupId>org.springframework.cloud</groupI ...

  5. 是时候给你的产品配一个AI问答助手了！

    本文由云+社区发表 | 导语 问答系统是信息检索的一种高级形式,能够更加准确地理解用户用自然语言提出的问题,并通过检索语料库.知识图谱或问答知识库返回简洁.准确的匹配答案.相较于搜索引擎,问答系统能更 ...

  6. 打造自己的.NET Core项目模板

    前言 每个人都有自己习惯的项目结构,有人的喜欢在项目里面建解决方案文件夹:有的人喜欢传统的三层命名:有的人喜欢单一,简单的项目一个csproj就搞定.. 反正就是萝卜青菜,各有所爱. 可能不同的公司对 ...

  7. JDK源码分析（三）—— LinkedList

    参考文档 JDK源码分析(4)之 LinkedList 相关

  8. 使用表类型（Table Type-SqlServer）实现百万级别的数据一次性毫秒级别插入

    使用表类型(Table Type)实现百万级别的数据一次性插入 思路 1 创建表类型(TaBleType)         2 创建添加存储过程         3 使用C#语言构建一个DataTab ...

  9. java开发环境配置——Maven

    前篇讲了jdk的安装,这篇讲一下包管理工具Maven,Maven主要是用来统一管理项目引用的jar包,还有用来打包的. Maven官网下载地址:http://maven.apache.org/down ...

  10. 跨域iframe如何实现高度自适应？

    经常有项目会要求实现iframe高度自适应,如果是同域的还好说,如果是跨域的,父页面没有办法操作子页面,想要正确获取子页面高度的话,可以采用以下办法: 方法一:使用HTML5 postMessage ...