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模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
随机推荐
- duration of lease 1 0.5 0.875 DHCP 租借时间 续租时间 重新绑定时间
w
- Java 基础-基本数据类型与表达式
基本数据类型 基本概念 标识符 标识符与内存中的某个位置对应,Java 中标识符的规范如下: 必须由大小写字母.下划线.美元符号.数字组成 首字母只能是大小写字母.下划线.美元符号 变量 变量的值可以 ...
- JavaSE编码试题强化练习5
1.不使用函数实现字符串的翻转 /** * 1.不使用函数实现字符串的翻转 */ public class TestStringReverse { public static void main(St ...
- Samba服务问答
1. samba服务用在什么地方?samba服务用于把Linux服务器上的文件或者打印接共享给windows或者Linux. 2. 在samba服务的配置文件中,[global]配置部分的securi ...
- Java-JavaMail邮件开发(1)Java Mail
1.仅使用Java Mail 使用163邮箱作为代理服务器: 引入依赖: <dependency> <groupId>com.sun.mail</groupId> ...
- Maven-maven安装、Eclipse配置maven
1.下载maven安装包,下载完成,解压到安装路径. 2.配置环境变量 3.修改setting.xml配置本地库,阿里云中央仓库 路径:C:\fyliu\software\apache-maven-3 ...
- hdu-2255.奔小康赚大钱(最大权二分匹配)
奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- 懵圈了,面试官问一个 TCP 连接可发多少个 HTTP 请求?
作者:松若章 https://zhuanlan.zhihu.com/p/61423830 一道经典的面试题是从 URL 在浏览器被被输入到页面展现的过程中发生了什么,大多数回答都是说请求响应之后 DO ...
- python为什么人们喜欢学习呢?
软件的质和量. 既有量的积累也有质的区别.继承一定的前人研究基础. 基本上来说,python更加的注重可读性,一致性,可移植性,其中软件的质量也是比较的讲究的. python支持开发的高级重用机制,例 ...
- Oracle数据库的发展历程
前言 1970年的6月,IBM 公司的研究员埃德加·考特 (Edgar Frank Codd) 在 Communications of ACM 上发表了那篇著名的<大型共享数据库数据的关系模型& ...