推荐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 ...
随机推荐
- 将java中Map对象转为有相同属性的类对象(json作为中间转换)
java中Map对象转为有相同属性的类对象(json作为中间转换) 准备好json转换工具类 public class JsonUtil { private static ObjectMapper o ...
- sql 模块sqllit
1.创建数据库表 面对 SQLite 数据库,我们之前熟悉的 SQL 指令都可以用: >>> create_table = "create table books (tit ...
- [vijos1159&洛谷1494]岳麓山上打水<迭代深搜>
题目链接:https://vijos.org/p/1159 https://www.luogu.org/problem/show?pid=1494 这是今天的第三道迭代深搜的题,虽然都是迭代深搜的模板 ...
- 深度使用JSON.stringify()
按照 JSON 的规范,使用 JSON.stringify() 做对象序列化时,如果一个属性为函数,那这个属性就会被忽略. const data1 = { a: 'aaa', fn: function ...
- 微信小程序wx:for隐藏遍历的最后一个元素
微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最 ...
- 关于selenium定位元素时,出现此问题的处理办法:find_element=wait.until(ec.presence_of_element_locatetd(locator))定位不到页面元素的问题
最近再用,selenium中的from selenium.webdriver.common.by import By方法时,一直报错如下(图一),各种百度都没有解决,最后只能脱离框架,从最原始的代码开 ...
- AJAX对数据库增删改查实例
前端代码: <!DOCTYPE html><html><head><meta charset="UTF-8"><title&g ...
- 关于Linux目录的配置
关于Linux目录的配置说明 大家都知道Linux一切皆文件,但是Linux的文件有那么多,目录也不少.他们都是干什么用的呢,有没有什么规律呢?今天我们就来讨论一下Linux目录的配置 Linux目录 ...
- Linux网络安全篇,进入SELinux的世界(四)
SELinux的策略与规则管理set 1.安装SELInux工具 yum install setools-console 2.基本的命令 seinfo [-Atrub] -A ===> 列出SE ...
- 10.2 io流 之字节流和字符流
FileWriter 用于写入字符流.要写入原始字节流,请考虑使用 FileOutputStream. io流相关文档: https://www.cnblogs.com/albertrui/p/836 ...