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模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
随机推荐
- leetcode 111二叉树的最小深度
使用深度优先搜索:时间复杂度O(n),空间复杂度O(logn) /** * Definition for a binary tree node. * struct TreeNode { * int v ...
- Openstack_通用模块_Oslo_vmware 创建/删除 vCenter 虚拟机
目录 目录 oslovmware Connect to vCenter Server Create VirtualMachine for vCenter 常用的虚拟机配置项 删除虚拟机 oslo.vm ...
- 深入理解webpack(三) babel之配置文件
一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...
- Postman + Newman 生成测试报告
1.安装Node.js 下载地址: https://nodejs.org/download/ 2.安装Newman 1) 打开cmd,输入:npm install -g newman 2) 安装支持N ...
- struts2 基础5 OGNL、标签、四大域、默认拦截器说明
OGNL表达式 OGNL:对象导抗图语言 OGNL表达式是一个上下文的概念,上下文Map结构 OGNL表达式需要使用#标注命名空间.访问上下文(Context)中的对象需要使用#符号标注命名空间,如# ...
- Mac 设置git命令tab自动补全(亲测有效)
转载 :https://blog.csdn.net/tiancaijyy/article/details/84888868 注意: 获取git-completion.bash 要对应自己的git版本 ...
- idea 2017 快捷键
Ctrl+Shift + Enter,语句完成 “!”,否定完成,输入表达式时按 “!”键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更改的文件 Shift+Click,可以关闭文件 C ...
- oracle--事物特性、锁、
update emp set comm = 100 where empno = 7369; 使用dba用户查看事务 ADDR XIDUSN XIDSLOT XIDSQN UBAFIL UBABLK U ...
- 解决浏览器打开网页后提示“dns_probe_possible”的方法
使用浏览器浏览网页时偶尔会遇到无法上网且浏览器提示:DNS_PROBE_POSSIBLE 一般有三种情况会导致这样的故障: 1.网络协议出现故障,也就是常说的 DNS 设置问题 2.浏览器中设置问题, ...
- display:table的几个用法 块级子元素垂直居中
DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比 ...