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. iOS 构建动态库

    一.构建步骤 创建一个动态库 MyDynamicFramework 创建一个测试类 在 MyDynamicFramework.h(默认生成,可统一暴露头文件) 中 #import "Pers ...

  2. 树莓派 Raspberry PI基础

    树莓派 Raspberry PI基础 官网网址:https://www.raspberrypi.org 下载地址:https://www.raspberrypi.org/downloads/ 官方系统 ...

  3. kerberos系列之flink认证配置

    大数据安全系列的其它文章 https://www.cnblogs.com/bainianminguo/p/12548076.html-----------安装kerberos https://www. ...

  4. Java线程及其实现方式

    一.线程&多线程 线程: 线程是进程的一个实体,是 CPU 调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程 自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序 ...

  5. Java 连接数据库总是报错

    mysql账号密码是正确的,但是一直报账号密码错误. 报错信息: java.sql.SQLException: Access denied for user 'root'@'localhost' (u ...

  6. jmeter发送Query String Parameters格式参数报错

    当发起一次GET请求时,参数会以url string的形式进行传递.即?后的字符串则为其请求参数,并以&作为分隔符 当参数为json格式时,这时需要勾选编码,否则会报错

  7. Mysql数据库卸载

    Mysql数据库卸载的操作流程(Windows10): 1.停止mysql的所有服务 方法一:此电脑——管理——服务中查找到所有Mysql的服务,并停止. 方法二:cmd——net stop mysq ...

  8. 【linux】阿里云防火墙相关

    1. 需现在阿里云安全组策略中开启相应端口,80.3306等. 2. 想用外网访问3306需开启权限,进入mysql键入 GRANT ALL PRIVILEGES ON *.* TO 'myuser' ...

  9. MyBatis(八):高级结果映射

    本文是按照狂神说的教学视频学习的笔记,强力推荐,教学深入浅出一遍就懂!b站搜索狂神说或点击下面链接 https://space.bilibili.com/95256449?spm_id_from=33 ...

  10. 微信小程序 使用include导入wxml文件注意的问题

    (1)使用inlucde的时,要注意将最后的终止符 / 添加上去,否则不能正常的导入界面内容 <include src="header.wxml"/> (2)引入文件注 ...