云路UI - 栅格/容器demo

栅格&容器demo

栅格使用效果

col-xs-12 col-md-4 col-lg-6

col-xs-12 col-md-4 col-lg-3

col-xs-6 col-md-3

col-xs-12 col-md-6

容器一 && 栅格使用代码

<div class="container"> <div class="row"> <div class="col-xs-12 col-md-4 col-lg-6">栅格使用规范</div> <div class="col-xs-12 col-md-4 col-lg-3">栅格使用规范</div> <div class="col-xs-12 col-md-4 col-lg-3">栅格使用规范</div> </div> <div class="row"> <div class="col-xs-12 col-md-4">栅格使用规范</div> <div class="col-xs-12 col-md-4">栅格使用规范</div> <div class="col-xs-12 col-md-4">栅格使用规范</div> </div> </div>

容器二 && 栅格使用代码

<div class="container-separate"> <div class="container-separate-menu"> menu </div> <div class="container-separate-main"> <div class="row"> <div class="col-xs-12 col-md-4">导航展开</div> <div class="col-xs-12 col-md-4">导航展开</div> <div class="col-xs-12 col-md-4">导航展开</div> </div> <div class="row"> <div class="col-xs-12 col-md-4">导航展开</div> <div class="col-xs-12 col-md-4">导航展开</div> <div class="col-xs-12 col-md-4">导航展开</div> </div> </div> </div>  <div class="container-separate"> <div class="container-separate-menu"> menu </div> <div class="container-separate-main fat-main"> <div class="row"> <div class="col-xs-12 col-md-4">导航收起</div> <div class="col-xs-12 col-md-4">导航收起</div> <div class="col-xs-12 col-md-4">导航收起</div> </div> <div class="row"> <div class="col-xs-12 col-md-4">导航收起</div> <div class="col-xs-12 col-md-4">导航收起</div> <div class="col-xs-12 col-md-4">导航收起</div> </div> </div> </div>

容器三 && 栅格使用代码

<div class="container-cloud"> <div class="container-header clearfix"> <div class="sidebar-switch pull-left"></div> /*头部内容区*/ </div> <div class="container-main clearfix"> <div class="main-sidebar"> /*导航内容区*/ </div> <div class="main-content"> /*内容主体区*/ </div> </div> </div>  <div class="container-cloud"> <div class="container-header clearfix"> <div class="sidebar-switch pull-left on"></div> /*头部内容区*/ </div> <div class="container-main clearfix open-sidebar"> <div class="main-sidebar"> /*导航内容区*/ </div> <div class="main-content"> /*内容主体区*/ </div> </div> </div>