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. 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 ...

  2. Python库的安装方式

    Python库的安装方式 1.Python库的自定义安装——找到相应网站,下载安装 示例:pywin32库安装 .exe,直接双击,自动识别安装目录 安装就可以了. 载入成功 2.Python库的工具 ...

  3. 一款基于SVM算法的分布式法律助手

    一. 项目简介 与 使用说明 体验网站(适配手机端): http://www.zhuchangwu.com 项目基于 Spring Cloud .Vue 构建,平台针对需要维权的用户而设计,主要提供如 ...

  4. Android ConstraintLayout 构建自适应界面

    原文链接 使用 ConstraintLayout 构建自适应界面 ConstraintLayout 可让您使用扁平视图层次结构(无嵌套视图组)创建复杂的大型布局.它与 RelativeLayout 相 ...

  5. 1519: 【USACO】超级书架

    1519: [USACO]超级书架 时间限制: 1 Sec 内存限制: 64 MB 提交: 1735 解决: 891 [提交] [状态] [讨论版] [命题人:外部导入] 题目描述 Farmer Jo ...

  6. 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 ...

  7. Java 判断日期的方法

    //str:传入的日期 eg:"2018-07-23" function IsDate(str) { arr = str.split("-"); if(arr. ...

  8. python--Django(后台管理模块)

    一.准备工作 1.创建应用 python manage.py startapp test 2.定义模型类 (1)打开刚创建的app目录test,打开models.py文件 (2)代码如下 from d ...

  9. python的字符串、列表、字典和函数

    一.字符串 在python中字符串无需通过像php中的explode或者javascript中的split进行分解即可完成切片,可以直接通过下标获取字符串中的每一个字符,下标从0开始,如果从厚望签署, ...

  10. python 函数--装饰器

    一.装饰器 1.为什么要用装饰器? 装饰器的功能:在不修改原函数以及调用方式的情况下对原函数功能进行扩展. 二.开放和封闭原则 1.对扩展是开放的 2.对修改是封闭的 三.装饰器的固有结构 impor ...