bootstrap 的布局
第一步:你要做的就是选择适合你显示器的标签:
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
假如你用的是电脑;那么你就应该选择-----md,选择其他的就会出现 换行 等错误
第二步,引入bootstrap
第三步,实验:
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<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 class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
有趣的实验结果就会很清晰的出现在你的桌面上!!
bootstrap 的布局的更多相关文章
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap 可视化布局--拖拽后弹窗进行编辑
Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...
- 使用BootStrap网格布局进行一次演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
- 实现 Bootstrap 基本布局
看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML ...
- [前端]分享一个Bootstrap可视化布局的网站
如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...
- BootStrap网格布局
如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局2 - 包含BS文件
如图所示: bootstrap布局基于HTML5,为了使IE8以下也能使用某些HTML5的标签,必须要引入文件:http://html5shiv.googlecode.com/svn/trunk/ht ...
- bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
随机推荐
- Linux内核调试方法总结之反汇编
Linux反汇编调试方法 Linux内核模块或者应用程序经常因为各种各样的原因而崩溃,一般情况下都会打印函数调用栈信息,那么,这种情况下,我们怎么去定位问题呢?本文档介绍了一种反汇编的方法辅助定位此类 ...
- sshd使用
sshd服务 1.sshd介绍 sshd为secure shell的简称:可以通过网络在主机中开机shell的服务 连接方式(在客户端):ssh username@ip #文本模式 ...
- ORACLE 临时表空间管理
临时表空间和临时段 临时表空间用于存放排序.临时表等数据,其信息不需要REDO,因此临时表的DML操作往往比普通表产生的REDO少很多.临时表数据变化不产生REDO,UNDO数据变化产生REDO.临 ...
- VUE Right-hand side of ‘instanceof’ is not an object 解决方案
这里要注意一下, props之前没注意写成了 props: { wrd: '', sname:'zs' }, 这样是不能被解析成object的,所以一定要写的更具体一点 ...
- java对接短信平台
短信验证码目前是比较主流验证身份的一种方式,下面分享下我对接的几种短信平台 阿里云短信:https://api.alidayu.com/docs/api.htm?spm=a3142.7395905.4 ...
- 一个有关Golang Deferred Function 执行顺序的问题
先看一下一段关于defer的解释, 引自<Go程序设计语言> Syntactically, a defer statement is an ordinary function or met ...
- 正则表达式——POSIX字符组
前面介绍了常用的字符组,但是在某些文档中,你可能会发现类似[:digit:].[:lower:]之类的字符组,看起来不难理解(digit就是"数字",lower就是"小写 ...
- Hibernate入门4
HIbernate的导航查询: 适用场景:当一张A表关联到另一张B表的多条记录,存在一对多的关系(或者多对多),那么查询A表的记录时,就可以将A表某条记录关联的B表的所有记录查询出来,这种方式,就叫做 ...
- css的继承之width属性(容易忽略)
众所周知,css的三大特性分别是 继承性,层叠性,和优先级. 那么这里就详细说一下css中width的继承性及其特殊情况. 继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性,子元 ...
- Count on a tree SPOJ 10628 主席树+LCA(树链剖分实现)(两种存图方式)
Count on a tree SPOJ 10628 主席树+LCA(树链剖分实现)(两种存图方式) 题外话,这是我第40篇随笔,纪念一下.<( ̄︶ ̄)↗[GO!] 题意 是说有棵树,每个节点上 ...