1 表格

  Bootstrap为表格设计了漂亮的样式。

1)表格基本实例

任意 <table> 标签添加 .table

<table class="table">
<tr>
<td></td>
<td></td>
<td></td>
...
</tr>
</table>

表格基本实例代码如下:

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<h1 class="page-header">Table<small>基本实例</small></h1> <table class="table">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>张三</td>
<td></td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td></td>
<td>广州</td>
</tr>
</table> </div> </body> </html>

显示效果如下图所示:

2)条纹状表格

通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

<table class="table table-striped">
...
</table>

显示的效果如下图所示:

3)带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-bordered">
...
</table>

4)鼠标悬停

  通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

<table class="table table-hover">
...
</table>

5)紧缩表格

  通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

<table class="table table-condensed">
...
</table>

6)状态类

  通过这些状态类可以为行或单元格设置颜色。

  描述
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr> <!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>

7)响应式表格

  将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

<div class="table-responsive">
<table class="table">
...
</table>
</div>

2 表单

  表单提供了与用户提交信息的方式,比如用户注册会员,填写注册信息的时候回用到表单。用户登录到网站的时候,会用到用户名和密码也需要表单。搜索内容也需要表单。Bootstrap为表单元素设计了漂亮的样式。

1)普通表单

  单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea><select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<!DOCTYPE html>
<html>     <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">         <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>         <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <h1 class="page-header">Form<small>组件</small></h1>
            <form role="form">
                <label for="username">用户名:</label><input placeholder="请输入用户名" id="username"  class="form-control" type="text" name="username" maxlength="5" />
                <label for="pwd">密码:</label> <input placeholder="请输入密码" id="pwd" class="form-control" type="password" name="pwd" />
            </form>
        </div>
    </body>
</html>

  添加描述标签<label>,填写描述内容。

  • label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
  • <label> 标签的 for 属性应当与相关元素的 id 属性相同。

显示的效果如下图所示:

2)水平排列的表单

  通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类(col-sm-*),可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head> <body>
<div class="container">
<h1 class="page-header">Form<small>组件</small></h1>
<form class="form-horizontal" role="form"> <div class="form-group">
<label class="col-sm-2 control-label" for="username">用户名:</label>
<div class="col-sm-10">
<input placeholder="请输入用户名" id="username" class="form-control" type="text" name="username" maxlength="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="pwd">密码:</label>
<div class="col-sm-10">
<input placeholder="请输入密码" id="pwd" class="form-control" type="text" name="pwd" maxlength="" />
</div>
</div>
</form>
</div>
</body> </html>

显示的效果如下图所示:

参考代码:

http://v3.bootcss.com/css/#code

bootstrap学习总结-04 常用标签2的更多相关文章

  1. bootstrap学习总结-03 常用标签1

    1 显示段落 在HTML中,段落使用p标签包起来,重要的文字使用strong标签,em标签.<em> 标签告诉浏览器把其中的文本表示为强调的内容.对于所有浏览器来说,这意味着要把这段文字用 ...

  2. bootstrap学习总结-05 常用标签3

    1 单选框,多选框 1)单选框 单选框(radio)用于从多个选项中只选择一个.设置了 disabled 属性的单选或多选框都能被赋予合适的样式.对于和多选或单选框联合使用的 <label> ...

  3. JavaWeb学习之JSP常用标签、EL表达式的运算符、JSTL标签库(6)

    1.JSP常用标签 * 只要支持JSP文件,常用标签有可以直接使用 * 格式: jsp:xxxx * jsp:forward ,完成jsp页面的转发 * page属性:转发的地址 <% requ ...

  4. 2019-9-19:渗透测试,基础学习,html常用标签,笔记

    HTML常用标签<br>:换行<meta charset="utf-8">:编码标签<script type="路径">:插 ...

  5. html学习第一弹の常用标签的归类

    HTML初步学习: 行内元素:只占据他对应标签的边框所包含的空间,默认横向排布. 块级元素:块级元素占据其父元素(容器)的整个空间,因此创建了一个块,通常浏览器会在块级元素前后另起一行,默认竖向排布. ...

  6. BootStrap学习(4)_分页&标签&缩略图&警告&进度条

    一.分页 分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页.  .pagination     --添加该 class 来在页面上显示分页. .disa ...

  7. 【html学习整理】常用标签

    什么是html 超文本标记语言 html语法规则       所有的命令放到<> 大部分成对存在,以<tag>开始,</tag>结束 网页的基本框架,常用的标记 & ...

  8. CSS学习笔记-04 a标签-导航练习

    个人练习,各位大神勿笑  .. <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. java struts2入门学习--OGNL语言常用符号和常用标签学习

    一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...

随机推荐

  1. JQuery fullCalendar 时间差 排序获取距当前最近的时间。

    let time = (wo: WoDto) => wo.ScheduleTime || wo.ScheduleStartTime; let wo = technician.wos .filte ...

  2. HTTPS科普扫盲帖

    为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...

  3. mysql中导入txt文件

    1 windows 下 mysql导入txt文件(使用mysql的workbench) load data local infile 'path' into table table_name fiel ...

  4. SqlServer中——查找杀死阻塞进程

    查找阻塞进程: SELECT blocking_session_id '阻塞进程的ID', wait_duration_ms '等待时间(毫秒)', session_id '(会话ID)' FROM ...

  5. Day Three(Beta)

    站立式会议 站立式会议内容总结 331 今天:列表关于div控制长度选择控制字段长度而非cssCtrl;editor学习使用 遇到的问题:无 明天:复习,没什么时间花在代码上,可以构思下闹钟的过程 4 ...

  6. iOS开发小技巧--自定义带有占位文字的TextView(两种方式)

    自定义控件注意或框架注意:自己暴露在外面的属性,一定要重写setter,保证外界与内部的交互性 一.方案一:通过drawRect:方法将文字画到textView中,监听文字改变用的是通知中心(代理也可 ...

  7. Java Decompiler 反编译工具下载地址及JD-Eclipse设置菜单翻译

    官网地址:http://jd.benow.ca/ JD-GUI:jd-gui-0.3.6.windows.zip JD-Eclipse:jd-eclipse-site-1.0.0-RC2.zip 菜单 ...

  8. HTML基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  9. UITableView的常用属性和代理方法

    以下是近期总结的关于tableView的一些属性和代理方法,以及一些常见的问题,现汇总如下,今后还会持续更新,请继续关注:   tableView 的头部和尾部视图属性: UISwitch *foot ...

  10. java,js,jstl,EL的简单交互

    EL全名Expression Language.EL提供了在JSP脚本编制元素范围外使用运行时表达式的功能. 脚本编制元素是指页面中能够用于在JSP文件中嵌入java代码的元素. JSP标准标记库(j ...