网站宝库 - UI前端Html5组件
文档首页
基础部分
组件部分
扩展部分
JS部分
移动端
文档首页
基础部分
组件部分
扩展部分
JS部分
移动端

页面布局

栅格

1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
ui-col-8
ui-col-4
<div class="ui-row">
    <div class="ui-col">1</div>
    <div class="ui-col">2</div>
    <div class="ui-col">3</div>
    <div class="ui-col">4</div>
    <div class="ui-col">5</div>
    <div class="ui-col">6</div>
    <div class="ui-col">7</div>
    <div class="ui-col">8</div>
    <div class="ui-col">9</div>
    <div class="ui-col">10</div>
    <div class="ui-col">11</div>
    <div class="ui-col">12</div>
</div>
<div class="ui-row">
    <div class="ui-col-3">1</div>
    <div class="ui-col-3">2</div>
    <div class="ui-col-3">3</div>
    <div class="ui-col-3">4</div>
    <div class="ui-col-3">5</div>
    <div class="ui-col-3">6</div>
    <div class="ui-col-3">7</div>
    <div class="ui-col-3">8</div>
</div>
<div class="ui-row">
    <div class="ui-col-8">ui-col-8</div>
    <div class="ui-col-4">ui-col-4</div>
</div>

间断

ui-column
ui-column
w-100
ui-column
ui-column
ui-column
ui-column
ui-column
ui-column
w-100
ui-column
ui-column
ui-column
ui-column
<div class="ui-row">
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-w-100">w-100</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
</div>
<div class="ui-row">
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-w-100">w-100</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
    <div class="ui-col">ui-column</div>
</div>

方向

One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
One of two ui-columns
<div class="ui-row ui-justify-content-start">
    <div class="ui-col-4">One of two ui-columns</div>
    <div class="ui-col-4">One of two ui-columns</div>
</div>
<div class="ui-row ui-justify-content-center">
    <div class="ui-col-4">One of two ui-columns</div>
    <div class="ui-col-4">One of two ui-columns</div>
</div>
<div class="ui-row ui-justify-content-end">
    <div class="ui-col-4">One of two ui-columns</div>
    <div class="ui-col-4">One of two ui-columns</div>
</div>
<div class="ui-row ui-justify-content-around">
    <div class="ui-col-4">One of two ui-columns</div>
    <div class="ui-col-4">One of two ui-columns</div>
</div>
<div class="ui-row ui-justify-content-between">
    <div class="ui-col-4">One of two ui-columns</div>
    <div class="ui-col-4">One of two ui-columns</div>
</div>