Skip to content

Update bootstrap3.zh_cn

nothing edited this page Dec 13, 2013 · 14 revisions

升级bs3注意事项

  1. 模块凡是有三级导航的统一使用nav nav-tabs。 (系统统一处理)

  2. 在list页面出现新增页面,新增都做成链接

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">All navigations</a>
  <li>
    <a href="#">Add new</a>
</ul>
  • 新增页面的表单成功跳回到list页面,然后给出message,出错在当前页面显示出错信息。
  1. 布局统一使用 col-md-%d
<div class="row">
  <div class="col-md-8">
  </div>
  <div class="col-md-4">
  </div>
</div>
  1. page-header
<div class="page-header">
   <h2>Title</h2>
</div>
  1. 表单 (后台的表单尽量都使用system提供的form模板)
form.phtml
form-popup.phtml
forms.phtml
  1. 面板统一使用panel
<div class="panel panel-xx">
</div>
  1. 列表页出现查询操作,都使用form-inline
<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
  1. 后台table都必须包在一个div里面
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
  1. 所有的table里面的操作,代码如下,(至于是否hover出现,等调查实践后在做决定)
<div class="pi-row-action">
   <a href="#">Edit</a>
   <a href="#">Delete</a>
</div>
  1. 如果文字长度不确定,但又想一排显示,使用 pi-ellipsis
<a class="pi-ellipsis">Text</a>
  1. 页面中需要icon的,请从 Font Awesome 选择

  2. 模块的icon,在module.php里面定义

'icon' => 'fa fa-user'

未完,待续,有什么问题及时提出,在修改此文档

Front布局

  1. 2个页面宽度 940 1140
  2. 布局左右间距各15,加起来30
  3. 区块下间距20
Clone this wiki locally