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. 使用logdashboard查看可视化日志

    logdashboard 日志面板是我在Github写的一个开源项目,旨在让查看日志变的方便快捷.在线预览 现在功能有日志检索.趋势图.异常堆栈快速查看.日志详情等 logdashboard支持自定义 ...

  2. kubernetes进阶之三：Pod

    一:Pod 是什么 Pod是Kubernetes的最重要最基本的概念.它是能够被创建,调度和管理的最小部署单元.一个Pod代表集群中一个运行的进程. 二:Pod的组成 一个Pod由一个特殊的根容器Pa ...

  3. 适配器模式 adapter 结构型 设计模式(九)

    现实世界中的适配器模型   先来看下来几个图片,截图自淘宝 上图为港版的插头与港版的插座   上图为插座适配器卖家的描述图   上图为适配后的结果 现实世界中适配器模式 角色分类 这就是适配器模式在电 ...

  4. 我是这样理解HTTP和HTTPS区别的

    为何要用https? http协议的缺点 通信使用明文,内容可能被窃听(重要密码泄露) 不验证通信方身份,有可能遭遇伪装(跨站点请求伪造) 无法证明报文的完整性,有可能已遭篡改(运营商劫持) 用htt ...

  5. eclipse maven 打war包的几种方式

    第一种:利用pom.xml文件打包. 右键pom.xml文件,选择Debug as或Run as 都行.但需要选择Maven install  打包 执行成功后,日志会打印出位置(看自己配置是否日志输 ...

  6. ZooKeeper的三种典型应用场景

    引言 ZooKeeper是中典型的pub/sub模式的分布式数据管理与协调框架,开发人员可以使用它进行分布式数据的发布与订阅.另外,其丰富的数据节点类型可以交叉使用,配合Watcher事件通知机制,可 ...

  7. 巧妙解决vue2.0关于set添加属性后视图不能更新的问题

    今天在工作中遇到一个问题,郁闷了很久,特地写一篇博客记录一下,方便以后再遇到可以查找,也分享个各位小伙伴,在网上查找很多资料说用Vue.$set设置属性后视图也会更新,但是真相并不是这样,通过等于号赋 ...

  8. DSAPI之摄像头追踪指定颜色物体

    Private CAM As New DSAPI.摄像头_avicap32 Private Clr As Color = Color.FromArgb(230, 50, 50) Private _Lo ...

  9. 用EF的三种方式（SqlServer数据库和Oracle数据库）

    SqlServer数据库 1.DB First 现有DB,生成edmx文件 贴一下生成的model //------------------------------------------------ ...

  10. win10 git bash 闪退

    使用ghost重装了win10 专业版后.安装git,尝试重装了n个版本的git,右键git bash here 直接闪退,直接进入安装目录打开git-bash.exe依旧闪退, git右键点击Git ...