代码:

<div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top: 20px;padding-left:20px;">
<div class="row" style="height: 100px;">
<label class="col-sm-1">二维码:</label>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-2">
<img class="store_img" src="{sh:$info.qrcode}" width="90px" />
</div>
<div class="col-sm-6">
<div class="input-inline">
<p class="text-red"><strong>微信扫描二维码进入商铺</strong></p>
<a class="btn btn-warning" href="{sh::UP('Home/Show/store', array('token' => $store['token']))}" target="_blank">商铺推广页</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="height: 100px;">
<label class="col-sm-1">链接:</label>
<div class="col-sm-9">
<div class="alert alert-info link-alert"><strong class="text-red">商城首页:</strong>&nbsp;<span>{sh:$Think.config.site_url}{sh::UP('Store/Mall/index', array('mid' => $info['id']))}</span></div>
</div>
</div>
</div>

第一次有成功的体验,以后继续努力。用栅格进行布局,方便高效。

bootstrap栅格布局,第一次成功的更多相关文章

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

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

  2. Bootstrap栅格布局系统的特点

    栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...

  3. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  4. bootstrap栅格布局

    <!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...

  5. 浮动元素垂直居中,bootstrap栅格布局垂直居中

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

  6. CSS:谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  7. bootstrap(关于栅格布局)

    栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...

  8. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  9. Bootstrap 框架 栅格布局系统设计原理

    如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...

随机推荐

  1. linux —— 问题解决(锦集)

    这里收录了我在使用ubuntu 时遇到的问题以及解决方案. 1. Ubuntu上由于/boot容量不足引起的无法更新系统 解决: [ link1 ] [ link2 ] 2. 在未联网的情况下,sud ...

  2. springMVC之本地化和国际化

    spring框架的大部分都支持国际化,就像springMVC一样.DispatcherServlet使你能够动态的通过客户端的本地语言进行配置.这是通过LocaleResolver完成的.   当一个 ...

  3. .NET获取英文月份缩写名(可获取其他国家)

    来自: http://www.cnblogs.com/highend/archive/2010/03/16/1687126.html 今天在看本公司原有的项目代码当中 很不幸看到其中一些实现的部分代码 ...

  4. 沧海一声笑,移动应用的CRASH原因我找到! --记最新款数字化測试“星云測试“的使用攻略

    沧海一声笑,移动应用的CRASH原因我找到! --记最新款数字化測试"星云測试"的使用攻略 世界进步那么快,非常多新奇的点子层出不穷,于是我们创业.我们做最酷的手机应用,做最轰炸的 ...

  5. Java 数量为5的线程池同时运行5个窗口买票,每隔一秒钟卖一张票

    /** * 1.创建线程数量为5的线程池 * 2.同时运行5个买票窗口 * 3.总票数为100,每隔一秒钟卖一张票 * @author Administrator * */ public class ...

  6. [转] 在 Linux 中怎样使用cp命令合并目录树

    PS:通过cp -r --link a/* b/* merged 硬链接不需要复制 怎样将两个布局相似的目录树合并成一个新的目录树?为理解该问题让我们思考下面的例子. 假设 dir1 和 dir2 目 ...

  7. IntelliJ IDEA 中module的dependencies是其它module时的注意事项

    Dependencies on other modules If a module (module A) depends on another module (module B), IntelliJ ...

  8. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  9. DedeCMS批量替换栏目文件保存目录的方法

    学点sql还是很有必要的.   有时候由于栏目太多,但是要修改一下栏目的保存目录.一个一个修改真的有点费事和慢.所以想了一个方法来批量修改栏目的保存目录.就是批量替换: update dede_arc ...

  10. Mysql group_concat

    select p.id,p.parent_id,group_concat(distinct(CONCAT("分类名称:",c.name)) order by c.id desc s ...