[我使用Meteorjs和Bootstrap 3创建了一个项目。
在该项目中,我可以向首页动态添加引导面板(或模式)。
令我困扰的是,这些面板(或模态)的位置是随机的,我希望将它们组织起来。例如:计算机屏幕中等时,我希望每列中有3个面板(或模式)。
您对此有想法吗?
代码是:
<template name="home">
{{> navigation}}
<div class="container-fluid lov">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
{{#each positions}}
{{> position}}
{{/each}}
</div>
</div>
</div>
</template>
这是此模板的JavaScript:
Template.home.events ({
'dblclick .lov': function (e, tmpl) {
e.preventDefault();
e.stopPropagation();
if(e.target.className === 'container-fluid lov'){
var id = Positions.insert({ name:'Clique here to change the title', domaine:'ici tu ecris ton text en gros',footername:'le nom de pays et la ville si tu veux'});
Session.set('editing_table',id);
}
}
});
这是收藏集:
Positions = new Meteor.Collection('positions');
这是位置模板的代码,可让我们创建面板:
<template name="position">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="panel panel-default" id="{{_id}}" style="position:absolute;left:{{left}};top:{{top}}; width:350px">
<div class="panel-heading">
{{#if hadanata3ou}}
<a class="close" data-dismiss="modal">x</a>{{/if}}
{{#if editing_tablename}}
<input class="input input-medium tablename" value="{{name}}" type="text" />
{{else}}
<h6 class="tablename">{{name}}</h6>
{{/if}}
<!-- <h3 class="panel-title">Panel title</h3> -->
</div>
<div class="panel-body">
<div id="{{_id}}">
{{#if editing_field}}
<textarea class="input input-lg efield" name="efield" type="text">
{{domaine}}
</textarea>
{{else}}
<span>
{{domaine}}
</span>
{{/if}}
</div>
</div>
<div class="panel-footer">
{{#if editing_footer}}
<input class="input input-medium footer" value="{{footername}}" type="text" />
{{else}}
<p class="muted">{{footername}}</p>
{{/if}}
</div>
</div>
</div>
</div>
</template>
老实说,我对meteorjs
模板一无所知,但是我可以向您展示Bootstrap
网格系统如何根据视图的大小来渲染不同数量的面板。 >
Bootstrap使用4种不同的尺寸:
lg
(桌面)md
(横向图形输入板)sm
(人像输入板)xs
(移动电话)并且使用类.visible-SIZE
和.hidden-SIZE
,您可以控制以什么尺寸显示/渲染哪些元素。例如:
<div class="container-fluid"> <div class="row visible-lg visible-md hidden-sm hidden-xs" > <div class="col-lg-4 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><span class="hidden-lg visible-md">Panel One - Medium</span> <span class="hiddn-md visible-lg">Panel One - Large</span></h4> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><span class="hidden-lg visible-md">Panel Two - Medium</span> <span class="hiddn-md visible-lg">Panel Two - Large</span></h4> </div> </div> </div> <div class="col-lg-4 col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4><span class="hidden-lg visible-md">Panel Three - Medium</span> <span class="hiddn-md visible-lg">Panel Three - Large</span></h4> </div> </div> </div> </div> <div class="row hidden-lg hidden-md visible-sm visible-xs"> <div class="col-sm-6 col-xs-6"> <div class="panel panel-default"> <div class="panel-heading"> <h4><span class="hidden-sm visible-xs">Panel One - Extra Small</span> <span class="hiddn-xs visible-sm">Panel One - Small</span></h4> </div> </div> </div> <div class="col-sm-6 col-xs-6"> <div class="panel panel-default"> <div class="panel-heading"> <h4><span class="hidden-sm visible-xs">Panel Two - Extra Small</span> <span class="hiddn-xs visible-sm">Panel Two - Small</span></h4> </div> </div> </div> </div> </div>
此代码呈现
.panel panel-default
<div>
元素的行。当视图为md
或lg
时,它将渲染3个<div>
,每个类别为col-md-4
和col-lg-4
。您可以拥有的列总数为12,并且具有col-*-4
的类占据了这12个插槽中的4个。因此,3 * 4是12,或1个完整的行。与col-sm-6
和col-xs-6
的2 * 6相同。
在meterojs
模板中,您需要确定如何使用这些类来呈现正确数量的列。并不是很困难,但是花一些时间来获取所需的布局。如果要查看有效的测试布局,请检查此链接:
并尝试调整浏览器窗口的大小。
希望可以为您提供Bootstrap
网格布局以及如何根据浏览器大小呈现不同列的一些见解。