bootstrap是基于Jquery而开发的一个前端框架。

全中文的学习网站:http://www.runoob.com/bootstrap/bootstrap-tutorial.html

实际上就是html+css,但是使用该框架可以让我们的项目界面更统一,更美观,更强大。当然对我们来说,他最大的好处在于响应式布局,在如今手机上访问bootstrap开发的网站,和在电脑上看起来几乎一样。

目前使用较广的是版本2和3,其中2的最新版本的是2.3.2,3的最新版本是3.3.7。

在2015年8月下旬,Bootstrap四周岁之际,Bootstrap团队发布了Bootstrap 4 alpha版。如果您的浏览器是IE8,建议还是使用2或者3。

下面带大家入门,当然需要有html和css基础才行。

例如在网页中定义一个table。

<table>

</table>

我们只需要引入三个文件,分别是:bootstrap.min.css,jquery.min.js,bootstrap.min.js.

然后在<table class='table'>就可以让表格加上样式.并且还可以实现响应式哦.

以下内容来自runoob学习网站:

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

齐论电商    淘宝学习网

标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中:

描述 实例
.table 为任意 <table> 添加基本样式 (只有横向分隔线) 尝试一下
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) 尝试一下
.table-bordered 为所有表格的单元格添加边框 尝试一下
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态 尝试一下
.table-condensed 让表格更加紧凑 尝试一下
联合使用所有表格类 尝试一下  

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格:

描述 实例
.active 将悬停的颜色应用在行或者单元格上 尝试一下
.success 表示成功的操作 尝试一下
.info 表示信息变化的操作 尝试一下
.warning 表示一个警告的操作 尝试一下
.danger 表示一个危险的操作  

最后,这些开源的框架确实为我们带了极大的方便,有可能的话,可以适当捐赠这些开源免费的网站!

推荐web前端框架bootstrap的更多相关文章

  1. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  2. React 还是 Vue: 你应该选择哪一个Web前端框架?

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  3. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  4. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  5. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  6. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  7. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  8. 响应式web前端框架Foundation & Bootstrap 对比

    Foundation & Bootstrap都是易用.强大且灵活的前端框架,用于构建基于任何设备上的 Web 应用.提供流式布局,及多种 js UI 组件,如导航.表单.按钮.Tabs 等等. ...

  9. Web前端框架汇总

    在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...

随机推荐

  1. 批量生成sql语句,难得

    在工作我们常常要批量生成sql文件,因为业务部门经常给我们的是excel文件,根据我的经验,推荐两种批量生成sql文件方式 1.excel批量生成sql ,sql语句如下 INSERT INTO Ta ...

  2. # CodeCraft-20 (Div. 2)

    CodeCraft-20 (Div. 2) A. Grade Allocation 思路 : 无脑水题 代码 #include<iostream> #include<algorith ...

  3. C/C++知识总结 一 C/C++常识概述

    C/C++常识概述 程序与计算机语言 C/C++简介与发展 C/C++异同 C/C++编译特点 学习编程建议 程序与计算机语言 程序:是一组计算机能识别和执行.预先编好的一些指令操作合集. 计算机语言 ...

  4. (C++ Error: Incompatible types in assignment of ‘char*’ to ‘char [2])

    in C++, cannot assign a pointer to an array. c++中char*与char[]不是一种类型,但是在C里面可以,所以尽量使用C++中的类,如string, v ...

  5. ERROR:TypeError: Cannot read property 'upgrade' of undefined

  6. PTA 7-42 整型关键字的散列映射(手写哈希表的线性探测法)

    本题考点: 整型哈希表的线性探测法 给定一系列整型关键字和素数P,用除留余数法定义的散列函数将关键字映射到长度为P的散列表中.用线性探测法解决冲突. 输入格式: 输入第一行首先给出两个正整数N(≤10 ...

  7. VAuditDemo-任意文件读取

    任意文件读取是属于文件操作漏洞的一种. 一般任意文件读取漏洞可以读取配置信息.甚至系统重要文件. 严重的话,就可能导致SSRF,进而漫游内网. 文件操作漏洞 任意文件删除--删除lock 任意文件复制 ...

  8. 1005 Spell It Right (20 分)

    Given a non-negative integer N, your task is to compute the sum of all the digits of N, and output e ...

  9. 从零搭建一个SpringCloud项目之Zuul(四)

    整合Zuul 为什么要使用Zuul? 易于监控 易于认证 减少客户端与各个微服务之间的交互次数 引入依赖 <dependency> <groupId>org.springfra ...

  10. 家庭版记账本app进度之关于listview显示账单,并为其添加点击事件

    这个主要学习是关于listview的学习. 怎样去自定义adapter,以及使用.自己创建文件,还有就是为listview的每一个子控件添加点击事件. 在整个过程中收获到的知识点如下: 一.对于数据库 ...