推荐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 ...
随机推荐
- 11g数据库使用DBUA升级Exadata数据库至12c
DB Name: GRPSource DB: 11.2.0.3 Target DB: 12.1.0.2 11g数据库使用DBUA升级Exadata数据库至12c前提条件: 0.需要11g源数据库fu ...
- Python库的安装方式
Python库的安装方式 1.Python库的自定义安装——找到相应网站,下载安装 示例:pywin32库安装 .exe,直接双击,自动识别安装目录 安装就可以了. 载入成功 2.Python库的工具 ...
- 一款基于SVM算法的分布式法律助手
一. 项目简介 与 使用说明 体验网站(适配手机端): http://www.zhuchangwu.com 项目基于 Spring Cloud .Vue 构建,平台针对需要维权的用户而设计,主要提供如 ...
- Android ConstraintLayout 构建自适应界面
原文链接 使用 ConstraintLayout 构建自适应界面 ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局.它与 RelativeLayout 相 ...
- 1519: 【USACO】超级书架
1519: [USACO]超级书架 时间限制: 1 Sec 内存限制: 64 MB 提交: 1735 解决: 891 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 Farmer Jo ...
- Face The Right Way POJ - 3276(区间)
Farmer John has arranged his N (1 ≤ N ≤ 5,000) cows in a row and many of them are facing forward, li ...
- Java 判断日期的方法
//str:传入的日期 eg:"2018-07-23" function IsDate(str) { arr = str.split("-"); if(arr. ...
- python--Django(后台管理模块)
一.准备工作 1.创建应用 python manage.py startapp test 2.定义模型类 (1)打开刚创建的app目录test,打开models.py文件 (2)代码如下 from d ...
- python的字符串、列表、字典和函数
一.字符串 在python中字符串无需通过像php中的explode或者javascript中的split进行分解即可完成切片,可以直接通过下标获取字符串中的每一个字符,下标从0开始,如果从厚望签署, ...
- python 函数--装饰器
一.装饰器 1.为什么要用装饰器? 装饰器的功能:在不修改原函数以及调用方式的情况下对原函数功能进行扩展. 二.开放和封闭原则 1.对扩展是开放的 2.对修改是封闭的 三.装饰器的固有结构 impor ...