BootStrap 学习笔记一
1、bootstrap列偏移
列偏移是指在网格系统中,可以使用偏移列来达到让某列右移的效果,只需要在class的“col-*-*”后追加“col-*-offset-*”
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
<div class="col-md-2">.col-md-3</div>
</div>
</div>
效果:
class="col-mdooffset-4"表示右移4份,一行12份;
col-xs类不支持偏移列,但是它可以通过简单的使用一个空的单元格来达到效果;
2、嵌套列
<div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div> <div class="col-md-9" style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p> sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div> <div class="row">
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div> </div> </div> </div>
效果:
外层为一行两列的网格,第一列占3份,第二列占9份,在第二列又嵌套了一个两行两列的网格,各占6份;
BootStrap 学习笔记一的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- bootstrap 学习笔记
bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...
随机推荐
- Windows上IOCP Socket事件模型管理
1.IOCP 2.使用IOCP 1)创建完成端口CreateIoCompletionPort: 2)向完成端口添加管理句柄与管理用户数据: 3)异步发送一个管理的事件请求: 4)开启工作线程来处理I ...
- 异步 async & await
1 什么是异步 异步的另外一种含义是计算机多线程的异步处理.与同步处理相对,异步处理不用阻塞当前线程来等待处理完成,而是允许后续操作,直至其它线程将处理完成,并回调通知此线程. 2 异步场景 l 不 ...
- Oracle创建表空间、表、一级用户授权
---恢复内容开始--- 1. 安装: 百度一下你就知道 2. sqlplus登录/sqlplus命令登录 在安装Oracle时,你需要记住设置的“全局数据库名”(默认为orcl) 和 口令,在以两种 ...
- visualization of filters keras 基于Keras的卷积神经网络(CNN)可视化
https://adeshpande3.github.io/adeshpande3.github.io/ https://blog.csdn.net/weiwei9363/article/detail ...
- 【转】数据处理常用的sql语句整理
一下语句都是基于 mysql数据库 查询是否使用索引 explain select * FROM t_table1; 结果列的含义: table:此次查询操作是关联哪张数据表 type:连接查询操作 ...
- linux windows 格式化一块大于2 TiB硬盘
转自:https://help.aliyun.com/document_detail/34377.html?spm=a2c4g.11186623.2.10.17447386JrLBNR#concept ...
- QT 添加外部库文件
LIBS += D:\Code\Opengltest\OpenGL32.Lib D:\Code\Opengltest\GlU32.Lib LIBS += OpenGL32.Lib GlU32.Lib ...
- EF框架和Ado.Net的使用比较
1.性能上(运行效率) Ado.Net的性能更高些,直接使用SQLHelper的Command.Connection等命令通过写SQL语句对数据库进行操作.(EF的实体模型,性能上肯定要损失些!!) ...
- day13函数的嵌套定义,global、nonlocal关键字,闭包及闭包的运用场景,装饰器
复习 ''' 1.函数对象:函数名 => 存放的是函数的内存地址 1)函数名 - 找到的是函数的内存地址 2)函数名() - 调用函数 => 函数的返回值 eg:fn()() => ...
- word模板导出的几种方式:第三种:标签替换(DocX组件读取与写入Word)
dll文件下载地址:https://files-cdn.cnblogs.com/files/daizhipeng/DocX.rar DocX wordDocumentOld = DocX.Load(S ...