bootstrap table响应式布局,cdn引入

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<link href="../css/bootstrap.css" type="text/css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
// alert(‘ddd‘);
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr>
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr>
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

时间： 2024-08-26 18:00:45

bootstrap table响应式布局,cdn引入的相关文章

Bootstrap禁用响应式布局

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

bootstrap的响应式布局

css ul{ list-style: none; margin: 0; padding: 0; } a{ color: #666; text-decoration: none; } a:hover{ text-decoration: none; } body{ background: #f5f5f5; } .container{ background: #fff; } /* 因为设计稿是1280px的,而bootstrap里面的container最大为1170px,因此我们手动修改contai

关于bootstrap和响应式布局

bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

响应式布局之BootStrap

本文在于巩固基础 学习bootStrap官网http://getbootstrap.com/ 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 而bo

Demo —— 响应式布局

响应式布局实例演示 What is 响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过. 优点:面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题. 缺点:兼容各种设备工作量大,效率低下:代码累赘,

如何实现页面的响应式布局？

所谓响应式布局,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.他的好处我们不用写多套屏幕模板而只需要写一个就可以实现,现在用的比较多的就是bootstrap的响应式布局,而他实现的原理就是,他会为一个元素设置多个类,然后通过媒体查询会根据当前屏幕分辨率来选择适合的类进行渲染. bootstrap主要是利用栅格式布局的原理,会自动将屏幕分为12列,然后我们可以根据需要分类,并且他将屏幕分为三类: col-xs-* 超小屏幕,手机 (宽度<768px) col-sm-* 小屏幕,

响应式设计(2)--引入bootstrap栅格布局

bootstrap为我们内置了栅格系统布局,通过它,我们可以非常快速的在不同宽度的屏幕下进行自适应布局. [grid栅格系统]http://v3.bootcss.com/css/#grid  [响应式工具]http://v3.bootcss.com/css/#responsive-utilities 不了解bootstrap栅格布局的同学,可以先看看上面的链接,了解个大概. 你真的了解吗?只要你了解个大概的话,就能回答的出下面几个问题,回答不出来的话,点开上面的链接好好看一遍 1)bootstr

Bootstrap响应式布局以及栅格框架

一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> <link rel="stylesheet&q

0083 移动端WEB开发之响应式布局、bootstrap

移动端WEB开发之响应式布局 1. 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕(手机) 768~992之间的为小屏设备(平板) 992~1200的中等屏幕(桌面显示器) 大于1200的宽屏设备(大桌面显示器) 1.2 响应式布局容器 响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果. 原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列