第一步:你要做的就是选择适合你显示器的标签:

.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 的布局的更多相关文章

  1. Bootstrap页面布局3 - BS布局以及流动布局

    1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...

  2. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  3. 使用BootStrap网格布局进行一次演示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. bootstrap栅格布局-v客学院知识分享

    今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...

  5. 实现 Bootstrap 基本布局

    看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面 我们先创建一个基本的 HTML ...

  6. [前端]分享一个Bootstrap可视化布局的网站

    如果你像我一样:是个前端渣,能看懂css和html,略懂Bootstarp,懒! 当你每次都想独立完成一个web页面而不知道从哪里下手的时候,那么下面的这个网站,就是你所以需要的! http://ww ...

  7. BootStrap网格布局

    如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...

  8. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  9. Bootstrap页面布局2 - 包含BS文件

    如图所示: bootstrap布局基于HTML5,为了使IE8以下也能使用某些HTML5的标签,必须要引入文件:http://html5shiv.googlecode.com/svn/trunk/ht ...

  10. bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

随机推荐

  1. CentOS7 日常操作

    A 安装netstat1.首先配置好本机的yum源: yum repolist all2.利用netstat命令,却提示:-bash: netstat: command not found3.执行yu ...

  2. WeekMap WeakSet的用途

    1. WeekMap WeakSet有一个特性,就是加入其中的元素不会算入引用计数,所以当其他地方没有对对象的引用之后,就可以删除了,不会造成内存泄漏. WeekMap的一个用途是保存Dom节点引用, ...

  3. Delphi XE2 之 FireMonkey 入门(4) - 控件天生可做容器

    1.新建 FM(HD) 工程, 先添加 TLine(默认名称是 Line1);2.在 Line1 选择状态下添加 Button1;3.取消选择后添加 Button2 此时, Button1.Paren ...

  4. 错误:Only the original thread that created a view hierarchy can touch its views——Handler的使用

    在跟随教程学习到显示web页面的html源码时报错:Only the original thread that created a view hierarchy can touch its views ...

  5. DataGridView数值列和日期列

    本文转自:http://www.cnblogs.com/conexpress/p/5923324.html 在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会 ...

  6. 2017埙箫简谱清单分享(附音频Demo)

    前言 习箫五载,略有所获,皆在坚持. 本博文记录旨在记录练习过程中所录制的Demo以供自省.自娱.自乐,同时记录.分享简谱与箫友(目前为简谱,日后学会线谱后会添加相应谱子分类). 简谱 &&a ...

  7. Mysql 免安装版本配置

    1. 安装命令 (制定安装目录的my.ini文件) mysqld --install MySQL --defaults-file="C:\mysql-5.7.26-winx64\bin\my ...

  8. Log4Net使用详解(续)

    转:http://blog.csdn.net/zhoufoxcn/article/details/6029021 说明自从上次在2008年在博客上发表过有关log4net的用法介绍文章之后(网址:ht ...

  9. 本地SVN服务器的搭建(WINDOWS环境)

    1.下载安装 VISUALSVN SERVER 1.1下载地址:https://www.visualsvn.com/server/download/ 1.2下载完成后,双击安装. 2.下载安装 Tor ...

  10. 40-python基础-python3-字典常用方法-setdefault()

    setdefault() 常常需要为字典中某个键设置一个默认值,当该键没有任何值时使用它,如下面的情况: setdefault()方法, 字典.setdefault(键,默认值) 传递给该方法的第一个 ...