bootstrap简单使用
Bootstrap （版本 v3.3.7） 官网教程： https://v3.bootcss.com/css/
row——行 row——列
push——推 pull——拉
col-md-offset-3 在左边偏移3格
col-md-push-5 向右推5格
col-md-pull-2 向左拉2格
结构
<div class="container">
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
<body class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王小二</td>
<td>男</td>
<td>21</td>
</tr>
<tr class="info">
<td>2</td>
<td>张溜溜</td>
<td>女</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>程陈晨</td>
<td>男</td>
<td>25</td>
</tr>
<tr class="success">
<td>4</td>
<td>李云龙</td>
<td>男</td>
<td>53</td>
</tr>
</tbody>
</table>
</body>
{
position:absolute;
background-position: center center;
background-size:cover;
}
jQuery文件。务必在bootstrap.min.js 之前引入(因为是基于jquery)
站点图标 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
快速生成图片 https://www.dummyimage.com/
bootstrap 实现两种方法：1）通过 js 实现 2）通过css3 媒体查询实现
图片：<img src="..." class="img-responsive"/> 图片响应式
用到栅格，应在父元素清除浮动（clearfix）
container 和 container-fluid 的区别
.container类用于固定宽度并支持响应式布局
.container-fluid类用于100%宽度，占据全部视口
https://www.cnblogs.com/zhangbao/p/6593121.html
一个典型导航条的结构如下：
nav .navbar.navbar-default
.container
.nav-header
a.nav-brand
<div class="form-group">
<label class="sr-only">用户名:</label>
<input type="text" class="form-control" name="name" placeholder="输入用户名" />
</div> <div class="checkbox">
<label><input type="checkbox" />记住密码</label>
</div>
bootstrap简单使用的更多相关文章
- 基于Bootstrap简单实用的tags标签插件
http://www.htmleaf.com/jQuery/ jQuery之家 自由分享jQuery.html5和css3的插件库 基于Bootstrap简单实用的tags标签插件
- Bootstrap简单入门
Bootstrap简单入门 BootStrap基本模板 <!DOCTYPE html> <html> <head> <meta charset="U ...
- Bootstrap简单Demo（2015年05月-18日）
Bootstrap的简单使用 1.Bootstrap是什么? 这是Bootstrap官网上对它的描述:Bootstrap是最受欢迎的HTML.CSS和JS框架,用于开发响应式布局.移动设备优先的WEB ...
- bootstrap简单图文环绕效果
一． 下载bootstrap-3.3.7 二． 在html页面引入css,js; eg: <link src="bootstrap-3.3.7-dist/css/b ...
- Bootstrap简单HelloWorld入门教程
这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点.看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots ...
- mvc area区域和异步表单，bootstrap简单实例
码农最怕眼高手低 今天来练习mvc Area技术和bootstrap以及异步表单的C#代码实现. 1.area区域架构对于建立复杂业务逻辑很有帮助,由 AreaRegistration.Regist ...
- 【Bootstrap简单用法】
一.下载及使用 参考网站:http://www.bootcss.com/ 1.使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) <!-- 最新版本的 ...
- bootstrap 简单练习（后续把其它页面也进行练习）
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- bootstrap简单使用实例
表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...
随机推荐
- 几个常用dos网络命令
ping www.baidu.com 测试网络的同时,查看ip地址 1. 如图:百度的ip为 14.215.177.39.浏览器直接输入ip即可进入百度首页. 另外还有,14.215.177.38 ...
- FCM算法的matlab程序（初步）
FCM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648430.html文章中已经介绍了FCM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...
- C#批量向数据库插入数据
程序中,批量插入数据有两种思路. 1.用for循环,一条一条的插入,经实测,这种方式太慢了(插入一万条数据至少都需要6-7秒),因为每次插入都要打开数据库连接,执行sql,关闭连接,显然这种方式不可行 ...
- MYSQL基本操作（下）
好了,废话不多说,接着开始Mysql剩下部分的小结了 Mysql 之 基础下 事务 事务:一系列将要发生或正在发生的连续操作,旨在保证数据操作的完整性.在事务开启之后,所有的操作都会被临时存储到事务日 ...
- Ajax的beforeSend
巧用Ajax的beforeSend 提高用户体验 jQuery是经常使用的一个开源js框架,其中的$.ajax请求中有一个beforeSend方法,用于在向服务器发送请求前执行一些动作.具体可参考jQ ...
- 关于折半法查找的一些总结以及ArrayList类的总结
一.折半法查找的总结(这算法很好理解,但我花了好久琢磨他有啥用.....) 1.实际意义 折半法查找主要是为了能够很快在一个数组中找出我们所需要的那个元素,与往常我们通过一个一个比较的方法不同,折半法 ...
- MySQL大小写敏感的解决方案
前言:对于MySQL的大小写敏感的影响,笔者在一个小项目中深刻的体会到:当想要查询一条数据时,总是出来两条或多条,后来发现是大小写敏感造成的原因,本文就该问题提出解决方案. 1.MySQL大小写敏感的 ...
- [NOI2017]蔬菜
[NOI2017]蔬菜 题目描述 大意就是有\(n\)种物品,第\(i\)个物品有\(c_i\)个,单价是\(a_i\).然后每天你可以卖出最多\(m\)个物品.每天结束后第\(i\)种物品会减少\( ...
- 机器学习算法总结(十二)——流形学习（Manifold Learning）
1.什么是流形 流形学习的观点:认为我们所能观察到的数据实际上是由一个低维流行映射到高维空间的.由于数据内部特征的限制,一些高维中的数据会产生维度上的冗余,实际上这些数据只要比较低的维度就能唯一的表示 ...
- HTTP协议中GET和POST的区别（详细描述）
HTTP协议在现代网络通信中被广泛应用,在HTTP 1.0版本中有7种请求方式,在HTTP 1.1版本中有8种请求方式,而这些请求方式中最常用的就是GET和POST,网上关于GET与POST请求方式的 ...