推荐web前端框架bootstrap
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的更多相关文章
- 前端框架 bootstrap 的使用
内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...
- React 还是 Vue: 你应该选择哪一个Web前端框架?
学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue 如果你喜欢简单和“能用就行”的东西 ...
- 前端框架Bootstrap
前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/
- Web前端框架学习成本比较及学习方法
就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...
- 国内5款优秀的WEB前端框架
1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...
- Web前端框架与类库
Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...
- Web前端框架与移动应用开发第八章
Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...
- 响应式web前端框架Foundation & Bootstrap 对比
Foundation & Bootstrap都是易用.强大且灵活的前端框架,用于构建基于任何设备上的 Web 应用.提供流式布局,及多种 js UI 组件,如导航.表单.按钮.Tabs 等等. ...
- Web前端框架汇总
在做web开发的时候难免遇到一个问题,那就是,选择什么样的框架.下面把前端的框架简单的列一下. 1.flex Apache基金会今天发布了Flex 4.8版本,这是Adobe将Flex捐献给Apach ...
随机推荐
- VS2015 远程调试:Remote Debugger
一.关于Remote Debugger 使用VS远程调试器Remote Debugger,我们可以调试部署在不同机器上的应用程序,如桌面应用程序和Asp.Net应用程序. 二.Remote Debug ...
- MQTT协议实现Android中的消息收发
前言 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输),基于发布/订阅范式的消息协议,是一种极其简单和轻量级的消息协议,专为受限设备和低带宽.高延迟 ...
- 深入解读ES6系列(四)
来自老曾es6的前言: 哈喽小伙伴们,爱说'废'话的Z又回来了,欢迎来到Super IT曾的博客时间,上一节说了字符串,面向对象以及json的知识,这一节我们继续我们知识的海洋,一起奋斗不秃头!不足的 ...
- 数据挖掘-K-近邻算法
数据挖掘-K-近邻算法 目录 数据挖掘-K-近邻算法 1. K-近邻算法概述 1.1 K-近邻算法介绍 1.1.1 KNN算法作用 1.1.2 KNN 算法思想 1.1.3 KNN算法特点 1.2 K ...
- TP的where方法的使用
1.Thinkphp中where()条件的使用 总是有人觉得,thinkphp的where()就是写我要进行增加.查询.修改.删除数据的条件,很简单的,其实我想告诉你,where()是写条件语句的,但 ...
- 28 api的使用2
本文将讲解如下api的使用: Object.System.Date.DateFormat.Calendar.Integer-- int的包装类等 1. 类 Object 是类层次结构的根类.每个类都使 ...
- css--->圆角设置
1.为元素添加四个相同的圆角: 语法结构:border-radius:r: r为圆角的半径大小 eg:如下样式,给元素添加四个圆角为10px 代码如下: <!DOCTYPE html> ...
- matplotlib TransformedBbox 和 LockableBbox
TransformedBbox 和 LockableBbox 都是BboxBase的子类.TransformedBbox支持使用变换来初始化bbox, LockableBbox可实现锁定bbox的边不 ...
- python3(三十二) try except
""" 异常处理 """ __author__on__ = 'shaozhiqi 2019/9/19' # 大量的代码来判断是否出错: # ...
- IDEA永久激活码获取
废话少说,直接上地址:http://idea.medeming.com/jet/ *小编还是建议,有家底的程序猿还是直接买正版的号,非正版的很多不便的地方~