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. github学习：如何从本地把项目上传到github&&如何把github项目通过clone复制下来，详细教程

    一.第一步---注册一个Github账号 首先要在GitHub上创建一个帐号,可以去官方网站注册一个账号. 前提:本地安装一个git 本人github:https://github.com/saucx ...

  2. gdb常用命令记录

    gdb常用命令 最近在研究nginx源码,gdb用于调试非常方便,之前这篇有研究过如何使用gdb调试nginx:https://www.cnblogs.com/yjf512/archive/2012/ ...

  3. 使用mpvue开发小程序教程（三）

    在上一篇文章中,我们熟悉了一下通过vue-cli生成的mpvue工程代码骨架的基本结构,大致了解了每一个部分的代码到底要放到何处.从本文起我们就开始涉及真正的编码部分,学习使用Vue的语法去编写小程序 ...

  4. pwnable.tw unexploitable 分析

    这题是和pwnable.kr差不多的一道题,主要区别在于没有给syscall.所以需要自己去找. 只有read和sleep两个函数. 思路一是首先劫持堆栈到bss段,然后调用read函数将sleep的 ...

  5. SmartSql For Asp.Net Core 最佳实践

    常规操作 安装 SmartSql Install-Package SmartSql 安装 SmartSql.DIExtension Install-Package SmartSql.DIExtensi ...

  6. 一个emoji引发的一条血案：mysql存储emoji表情字符时报错解决

    以下是我插入一条带表情的数据到mysql后出现错误 2019-03-04 14:24:40,462 ERROR 2807 [-/139.199.27.244/-/2ms POST /api/activ ...

  7. CSS中层叠和CSS的7阶层叠水平（上篇）

    今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平 在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平 这个东西就是 ...

  8. msf中exploit的web_delivery模块

    背景:目标设备存在远程文件包含漏洞或者命令注入漏洞,想在目标设备上加载webshell,但不想在目标设备硬盘上留下任何webshell文件信息 解决思路:让目标设备从远端服务器加载webshell代码 ...

  9. [JavaScript] audio在浏览器中自动播放

    audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...

  10. javascript基础修炼(2)——What's this(上)

    目录 一.this是什么 二.近距离看this 三. this的一般指向规则 四. 基本规则示例 五. 后记 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一.thi ...