第三章之Bootstrap 表格与按钮功能_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.表格

2.按钮

本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果。

一.表格

Bootstrap 提供了一些丰富的表格样式供开发者使用。

1.基本格式

//实现基本的表格样式
<table class="table"> 

注:我们可以通过 Firebug 查看相应的 CSS。

2.条纹状表格

//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped"> 

注:表格效果需要基于基本格式.table

3.带边框的表格

//给表格增加边框
<table class="table table-bordered"> 

4.悬停鼠标

//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover"> 

5.状态类

//可以单独设置每一行的背景样式
<tr class="success"> 

注:一共五种不同的样式可供选择。

样式说明:

  active鼠标悬停在行或单元格上
  success标识成功或积极的动作
  info标识普通的提示信息或动作
  warning标识警告或需要用户注意
  danger表示危险或潜在的带来负面影响的动作

6.隐藏某一行

//隐藏行
<tr class="sr-only"> 

7.响应式表格

//表格父元素设置响应式,小于 768px 出现边框
<body class="table-responsive"> 

二.按钮

Bootstrap 提供了很多丰富按钮供开发者使用。

1.可作为按钮使用的标签或元素

//转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input"> 

注意事项有三点:

(1).针对组件的注意事项

虽然按钮类可以应用到 <a> 和 <button> 元素上,但是,导航和导航条组件只支持<button> 元素。

(2).链接被作为按钮使用时的注意事项

如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role="button" 属性。

(3).跨浏览器展现

我们总结的最佳实践是:强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

另外,我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug,其表现是:阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性,这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

2.预定义样式

//一般信息
<button class="btn btn-info">Button</button> 

样式说明

  btn-default默认样式
  btn-success成功样式
  btn-info一般信息样式
  btn-warning警告样式
  btn-danger危险样式
  btn-primary首选项样式
  btn-link链接样式

3.尺寸大小

//从大到小的尺寸
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button> 

4.块级按钮

//块级换行
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button> 

5.激活状态

//激活按钮
<button class="btn active">Button</button> 

6.禁用状态

//禁用按钮
<button class="btn active disabled">Button</button>

以上所述是小编给大家介绍的Bootstrap 表格与按钮功能,希望对大家有所帮助!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索bootstrap按钮
bootstrap表格按钮
bootstrap javascript、bootstrap 按钮样式、bootstrap 按钮、bootstrap单选按钮、bootstrap 开关按钮,以便于您获取更多的相关知识。

时间: 2024-10-25 10:20:24

第三章之Bootstrap 表格与按钮功能_javascript技巧的相关文章

详解Bootstrap各式各样的按钮(推荐)_javascript技巧

Bootstrap为我们提供了各式各样漂亮的按钮,我们无需自己给按钮写样式,直接使用它给我们提供的类样式,使用在我们的按钮上,非常的简单方便. 为尊重原创这里贴一下参考的教程:http://www.runoob.com/bootstrap/bootstrap-buttons.html.在我的很多笔记中,您可能会看到我贴的www.runoob.com相关的网址,在这里先声明这不是广告,我只是觉得每个人的劳动成果都应该被尊重.这个网站收集了很多的信息,供我学习,我非常的感激,借鉴于这些很好的教程,我

第四章之BootStrap表单与图片_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各种丰富的效果. 一.表单 Bootstrap 提供了一些丰富的表单样式供开发者使用. 1.基本格式 //实现基本的表单样式 <form> <div class="form-gr

全面解析Bootstrap表单使用方法(表单按钮)_javascript技巧

一.多标签支持 一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等. 同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名".btn". <button class="btn btn-default" type="button&

BootStrap实现带有增删改查功能的表格(DEMO详解)_javascript技巧

前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.CSS也经常给的不全,自己经过大概一个月左右的时间,把表格封装了一下,希望能分享给大家. 表格封装了3个版本,接下来给大家展示一下样式和代码. 版本一 1. 样式 表格布局: 添加:添加一行新的空白代码 修改:选中可修改的列,点击需要修改的单元格,即可变成可编辑的状态. 2.代码 View代码: <d

Bootstrap基本插件学习笔记之按钮(21)_javascript技巧

前面已经介绍过Button的使用.通过button按钮,我们还能实现一些诸如按钮状态控制等形式的交互. 0x01 加载状态 添加data-loading-text="Loading-"属性: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

JS组件Bootstrap Table使用实例分享_javascript技巧

学习使用bootstrap表格是对客户端进行分页的时候,在朋友的帮助下,找到了文档http://bootstrap-table.wenzhixin.net.cn/examples/                 找到了传到后台的每页条数Limit,和记录开始数Offset.              开始封装,分享一下我的代码,从bootstrap table 获取页码和页数,并交给后台处理. $('#table').bootstrapTable({ url: '<%=path%>/Feed

Bootstrap Table使用方法解析_javascript技巧

bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开发一个开台发布系统,就开发过程中,使用bootstap table遇到的一些问题及收获记录如下: 开始使用: 需要在你自己的页面中引入以下样式及脚本: <link rel="stylesheet" href="bootstrap.min.css"> <

JS+CSS实现表格高亮的方法_javascript技巧

本文实例讲述了JS+CSS实现表格高亮的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

Bootstrap三种表单布局的使用方法_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单  创建垂直或基本表单: •·向父 <form> 元素添加 role="form".  •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的.  •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control <form role=&q