4.bootstrap练习笔记-内容区块
bootstrap练习笔记-内容区块
1.bootstrap中,采用的全部是div布局,把你的内容首先要包含在一个大的DIV区块当中
2.然后再写一个div.container,这个div里面存放真正的内容
3.div.row表示这个div占据一整行
4.div.row>div.col-md-6.col-sm-6*2表示这两个div在大于768px和大屏幕的时候都占据一行的 6/12 md、sm、lg等都表示屏幕分辨率的大小
5.Img.img-responsive表示做成响应式的图片 center-block表示变成区块并水平居中
<!--tab2-->
<div class="tab2">
<div class="container">
<div class="row">
<div class="auto col-md-6 col-sm-6 tab2-img">
<img src="img/tab2.png" class="auto img-responsive center-block" alt="">
</div>
<div class="text col-md-6 col-sm-6 tab2-text">
<h3>强大的学习体系</h3>
<p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
</div>
</div>
</div>
</div>
<!--tab3-->
<div class="tab3">
<div class="container">
<div class="row">
<div class="auto col-md-6 col-sm-6">
<img src="img/tab3.png" class="auto img-responsive center-block" alt="">
</div>
<div class="text col-md-6 col-sm-6">
<h3>完美的管理方式</h3>
<p>最新的管理培训方案,让您赶超同行。</p>
</div>
</div>
</div>
</div>
4.bootstrap练习笔记-内容区块的更多相关文章
- 3.bootstrap练习笔记-媒体内容
bootstrap练习笔记-多媒体对象 1.在bootstrap中,如果想存放内容,一种解决的方式就是利用media这个class 首先要设置一个div.container作为一个总的容器来存放内容 ...
- 6.bootstrap练习笔记-缩略图和list-group
bootstrap练习笔记-缩略图 1.其实缩略图很简单,只要按照固定的格式来设计 div.container 总容器 在宽度为1200px以上 div.row 一行内容 div.col-lg-3. ...
- 1.bootstrap练习笔记-导航条
bootstrap练习笔记 1.关于导航栏 官网链接:http://v3.bootcss.com/components/#nav 结构大概是这样的: nav标签标识导航栏 class为navbar ...
- Bootstrap学习笔记之整体架构
之前有粗略地看过一下Bootstrap的内容,不过那只是走马观花式地看下是怎么用的,以及里面有什么控件,所以就没想着记笔记.现在由于要给部门做分享,所以不得不深入地去学习下,不然仅是简单地说下怎么用, ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记 多媒体对象
本文将介绍Bootstrap中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- 5.bootstrap练习笔记-巨幕和流体布局
bootstrap练习笔记-巨幕和流体布局 1.在bootstrap中 .jumbotron可以设置巨幕效果 2.div.jumnotron自动设置一个黑色的巨幕效果 3.div.container ...
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
随机推荐
- 【Java每日一题】20161219
package Dec2016; import java.util.Arrays; public class Ques1219 { public static void main(String[] a ...
- 个人项目框架搭建 -- Autofac简单使用记录
1.添加autofac相关程序集/使用Nuget 2.引入命名空间 using Autofac; using Autofac.Configuration; 3.使用 3.1:直接使用 var buil ...
- [moka同学笔记]Linux命令基本格式及目录处理命令
命令提示符 [root@localhost ~]# root:当前登录用户localhost:主机名~:当前所在的目录,此处为"家"目录#:root超级用户的提示符,如果是普通用户 ...
- GJM :动作手游实时PVP 帧同步(客户端)[转载]
原帖地址:http://gad.qq.com/article/detail/7171195 原文作者:唐声福 原帖备注:版权所有,禁止匿名转载:禁止商业使用:禁止个人使用. 1.概述 1.1.基于U ...
- UML常用图
序列图 活动图
- 取消IE提示下载安全提问
需求:在企业访问内部WEB系统下载文件时,IE总会弹出安全提问,征得用户同意后弹出下载保存框.现用户需要点击下载后,直接弹出下载保存框. 方案:这涉及IE安全定义问题,进行相关设置即可.方法如下:
- Boostrap全局CSS样式
1.Bootstrap提供的CSS Reset * { box-sizing: border-box; } body { font ...; color: #333; background: ...; ...
- HTML5学习笔记三 HTML元素、属性、标题、段落简介
一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...
- C#中的泛型
写在前面:好几个月没更新了,这些天换了份工作,原来的公司出了很多事所以辞职了.这篇文章写的超级好,让我终于明白了困扰在我心里好久的C#泛型的概念,不仅收藏了,还手动转发一下 哈哈哈~ 1.1 C#中的 ...
- 使用NSAssert()和NSParameterAssert调试程序
NSAssert: NSAssert()只是一个宏,用于开发阶段调试程序中的Bug,通过为NSAssert()传递条件表达式来断定是否属于Bug,满足条件返回真值,程序继续运行,如果返回假值,则抛出异 ...