/
githubmirror
/
Semantic-UI
Обзор
Документация
Войти
/
githubmirror
/
Semantic-UI
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
2.1.2
examples/grid.html
408 строк
14 KB
jlukic
Fix grid example
10 июн 2015, 01:46
10 июн 2015, 01:46
0173292
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <!-- Standard Meta --> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <!-- Site Properities --> <title>Grid Example - Semantic</title> <link rel="stylesheet" type="text/css" href="../dist/components/reset.css"> <link rel="stylesheet" type="text/css" href="../dist/components/site.css"> <link rel="stylesheet" type="text/css" href="../dist/components/container.css"> <link rel="stylesheet" type="text/css" href="../dist/components/divider.css"> <link rel="stylesheet" type="text/css" href="../dist/components/grid.css"> <link rel="stylesheet" type="text/css" href="../dist/components/header.css"> </head> <body> <div class="ui text container"> <h1 class="ui dividing header">Using Grids</h1> <h3 class="first">Container</h3> <p>A container is a fixed width element that wraps your site's content. It remains a constant size and uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.</code> </p> </div> <div class="ui container"> <div class="ui grid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div> <div class="ui text container"> <h3 class="first">Text Container</h3> <p>Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is a special type of container optimized for a single flowing column of text, like this instructions on this page. </p> <p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p> </div> <div class="ui text container"> <div class="ui one column grid"> <div class="column"></div> </div> </div> <div class="ui text container"> <h1 class="ui dividing header">Grid Content</h1> <h3 class="first">Column Flow</h3> <p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p> <div class="ui grid"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <h3>Clearing Rows</h3> <p>Adding row wrappers allow you to manually specify you want a new row to begin.</p> <div class="ui three column grid"> <div class="column"></div> <div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> </div> <h3>Specifying Row Width</h3> <p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p> <div class="ui three column grid"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> <h3>Specifying Column Width</h3> <p>You can also specify column widths for each column individually</p> <div class="ui three column grid"> <div class="four wide column">four wide column</div> <div class="eight wide column">eight wide column</div> <div class="four wide column">four wide column</div> </div> <h3>Special Variations</h3> <p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p> <div class="ui horizontal section divider">Celled Grid</div> <div class="ui celled grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div> <div class="ui horizontal section divider">Internally Celled Grid</div> <div class="ui internally celled grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div> <div class="ui horizontal section divider">Divided Grid</div> <div class="ui divided grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div> <div class="ui horizontal section divider">Vertically Divided Grid</div> <div class="ui vertically divided grid"> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> <div class="row"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> </div> <h1 class="ui dividing header">Adjusting Grids</h1> <h3 class="first">Centering Content</h3> <p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid. </p> <div class="ui two column centered grid"> <div class="column"></div> <div class="four column centered row"> <div class="column"></div> <div class="column"></div> </div> </div> <h3>Floating Rows</h3> <p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p> <div class="ui grid"> <div class="left floated six wide column"> <div class="ui segment"> Left floated </div> </div> <div class="right floated six wide column"> <div class="ui segment"> Right floated </div> </div> </div> <h3>Text Alignment</h3> <p>You can specify text alignment using alignment variations on a grid, row, or column level.</p> <div class="ui grid"> <div class="right aligned eight wide column"> right aligned column </div> <div class="left aligned eight wide column"> left aligned column </div> <div class="center aligned two column row"> <div class="column"> center aligned row </div> <div class="column"> center aligned row </div> </div> <div class="sixteen wide right aligned column"> right aligned column </div> </div> <h3>Vertical Alignment</h3> <p>You can specify vertical alignment on a grid, row, or column level.</p> <div class="ui middle aligned four column centered grid"> <div class="row"> <div class="column"> <img class="ui wireframe image" src="assets/images/wireframe/image.png"> </div> <div class="column"> <img class="ui wireframe image" src="assets/images/wireframe/image.png"> <img class="ui wireframe image" src="assets/images/wireframe/image.png"> </div> <div class="column"> <img class="ui wireframe image" src="assets/images/wireframe/image.png"> </div> </div> </div> <h3>Equal Width Columns</h3> <p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p> <div class="ui equal width grid"> <div class="row"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> <div class="row"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> </div> <h1>Responsive Patterns</h1> <h3 class="first">Doubling</h3> <p>You can set columns to double in width at each device jump</p> <div class="ui five column doubling grid"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> <h3>Stackable</h3> <p>You can set columns to stack on mobile</p> <div class="ui three column stackable grid"> <div class="column">column</div> <div class="column">column</div> <div class="column">column</div> </div> <h3>Responsive Width Adjustments</h3> <p>You can specify columns to appear at different widths on different screens</p> <div class="ui grid"> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> <div class="eight wide mobile six wide tablet four wide computer column"></div> </div> <div class="ui grid"> <div class="four wide two wide large screen one wide widescreen column"></div> <div class="four wide two wide large screen one wide widescreen column"></div> <div class="four wide two wide large screen one wide widescreen column"></div> <div class="four wide two wide large screen one wide widescreen column"></div> </div> <h3>Specifying Device Visibility</h3> <p>You can specify columns to appear only a particular screen</p> <div class="ui grid"> <div class="two column computer only row"> <div class="ten wide column">ten wide column computer only</div> <div class="six wide column">six wide column computer only</div> </div> <div class="sixteen wide mobile only column">sixteen wide column mobile only</div> <div class="three column computer only row"> <div class="column">computer only row</div> <div class="column">computer only row</div> <div class="column">computer only row</div> </div> <div class="two column mobile only row"> <div class="column">mobile only column</div> <div class="column">mobile only column</div> </div> <div class="two column row"> <div class="column">column</div> <div class="column">column</div> </div> </div> </div> </div> <style type="text/css"> /* Some basic formatting */ code { background-color: #E0E0E0; padding: 0.25em 0.3em; font-family: 'Lato'; font-weight: bold; } .container { padding: 5em 0em; } .ui.dividing.header, .first { margin-top: 5em; } .ui.dividing.header:first-child { margin-top: 0em; } h1, h3 { margin-top: 10em; } img { display: block; max-width: 100%; } img + img { margin-top: 0.5em; } /* Shows content box (not negative margins) */ .grid { position: relative; } .grid:before { position: absolute; top: 1rem; left: 1rem; background-color: #F0F0F0; content: ''; width: calc(100% - 2rem); height: calc(100% - 2rem); box-shadow: 0px 0px 0px 1px #DDDDDD inset; } .ui.divided.grid:before, .celled.grid:before { display: none; } .ui.aligned .column:after { display: none !important; } .grid .column:not(.row):not(.grid):after { background-color: rgba(86, 61, 124, .15); box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset; content: ""; display: block; min-height: 50px; } @media only screen and (max-width: 768px) { .stackable.grid:before { width: 100%; left: 0em; } } </style> </body> </html>