网站首页 > 技术文章 正文
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 | 表示一个危险的操作 |
最后,这些开源的框架确实为我们带了极大的方便,有可能的话,可以适当捐赠这些开源免费的网站!
猜你喜欢
- 2024-09-10 Web前端:确保项目成功的10大Web开发框架
- 2024-09-10 目前最受欢迎的12个Python web框架,你用过几个?
- 2024-09-10 42款经典JavaScript前端框架库,开发的瑞士军刀,随需随取
- 2024-09-10 web前端开发中常见的7个HTML5框架,程序员必知
- 2024-09-10 Web前端会学习哪些框架
- 2024-09-10 常用的前端框架有哪些?
- 2024-09-10 Web前端开发必不可少的9个开源框架
- 2024-09-10 web前端开发要学哪些?主流框架有哪些?
- 2024-09-10 「Web前端基础知识」Web前端主流框架汇总
- 2024-09-10 2022年优秀的Web前端UI框架推荐
你 发表评论:
欢迎- 最近发表
-
- 前端流行框架Vue3教程:13. 组件传递数据_Props
- 前端必看!10 个 Vue3 救命技巧,解决你 90% 的开发难题?
- JAVA和JavaScript到底是什么关系?是亲戚吗?
- Java和js有什么区别?(java和javascript的区别和联系)
- 东方标准|Web和Java的区别,如何选择这两个专业
- 前端面试题-JS 中如何实现大对象深度对比
- 360前端一面~面试题解析(360前端笔试)
- 加班秃头别慌!1 道 Vue 面试题,快速解锁大厂 offer 通关密码
- 焦虑深夜刷题!5 道高频 React 面试题,吃透 offer 稳了
- 2025Web前端面试题大全(整理版)面试题附答案详解,最全面详细
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)