bootstrap栅格布局,第一次成功

代码:
<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> <span>{sh:$Think.config.site_url}{sh::UP('Store/Mall/index', array('mid' => $info['id']))}</span></div>
</div>
</div>
</div>
第一次有成功的体验,以后继续努力。用栅格进行布局,方便高效。
bootstrap栅格布局,第一次成功的更多相关文章
- bootstrap栅格布局-v客学院知识分享
今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...
- Bootstrap栅格布局系统的特点
栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...
- bootstrap栅格布局学习历程
了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...
- bootstrap栅格布局
<!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...
- 浮动元素垂直居中,bootstrap栅格布局垂直居中
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS:谈谈栅格布局
检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...
- bootstrap(关于栅格布局)
栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需 ...
- Bootstrap栅格系统详解,响应式布局
Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...
- Bootstrap 框架 栅格布局系统设计原理
如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下 ...
随机推荐
- MySQL定时事件
1.创建一个测试表 CREATE TABLE aaa (timeline TIMESTAMP); 2.创建一个事件:每秒插入一条记录到数据表 CREATE EVENT e_test_insert SE ...
- 对openflow 1.0协议的扩展
通过这几天对openvswitch代码的分析,以及项目的须要,须要对openflow 1.0进行一定的扩展,发现网上没有这方面的教程,尽管在搞懂ovs代码架构,floodlight controlle ...
- Spine(2D骨骼动画)
点击进入Spine官网 Spine 是一款针对游戏的 2D 骨骼动画编辑工具. Spine 旨在提供更高效和简洁 的工作流程,以创建游戏所需的动画. 功能: 1.摄影表 Dopesheet 在动画制作 ...
- 从零开始写一个Tomcat(壹)
Tomcat是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,也是一个servlet容器的优秀解决方案,做Java web开发的基本上都使用过,但是tomcat大多时间对于我们是一个黑 ...
- STL之auto_ptr
What's auto_ptr? The auto_ptr type is provided by the C++ standard library as a kind of a smart poin ...
- 通过yum升级CentOS/RHEL最小化安装
1.如果你有安装CentOS / RHEL最小服务器安装,您可能有很多麻烦没有安装包 2.有一种方法来安装所有的包,需要一个基本的服务器,使用yum groupinstall命令 3.从最小的安装基本 ...
- 几个常用的ps命令
1. ps aux If you are looking for a short summary of the active processes, use ps aux [root@rhel7 tm ...
- sql sever 随机查询
Select * From TableName Order By NewID() NewID()函数将创建一个 uniqueidentifier 类型的唯一值.上面的语句实现效果是从Table中随 ...
- 营配数据质量核查,关于营销mis系统与配电gis系统里面的sql语句查询,做为积累使用,下次就不用重复写同样的语句了。
1.配电gis线路导出数据: select r.name 线路名称,r.run_status 运行状态,r.voltage_level 电压等级,r.manager_depart 管理部门,r.bel ...
- 安装VMware vCenter过程设置数据库方法
VMware vCenter自带免费版的SQL Server 2005 Express,但此免费版数据库适合于小于5台ESX主机的小型部署.如果规模较大可以单独安装数据库系统进行配置,这里选择我独立安 ...