Существует ли семантический пользовательский интерфейс, эквивалентный классу Bootstrap .container?

Я использовал Twitter Bootstrap в течение некоторого времени и всегда нуждался в дополнительных функциях пользовательского интерфейса администратора, я решил дать < href="http://semantic-ui.com/" rel="noreferrer">Semantic UI попробуйте. Документы Semantic намного менее кратки, чем документы Bootstrap, но каждый отдельный инструмент довольно прост в реализации. Тем не менее, я начал создавать базовый пользовательский интерфейс, чтобы попробовать семантический пользовательский интерфейс, и у меня возникли проблемы с выяснением некоторых основных вещей, например, что использовать в качестве подходящей замены для Bootstrap .container и т. д.


css twitter-bootstrap semantic-ui
person orokusaki    schedule 22.02.2015    source источник

Ответы (3)


arrow_upward
19
arrow_downward

Автор семантического пользовательского интерфейса здесь. Я добавлю общий класс контейнера в следующем второстепенном выпуске.

person Jack    schedule 08.03.2015
comment
Отлично, спасибо! Как только это будет упомянуто здесь для потомков. - person orokusaki; 08.03.2015
comment
.container не работает, как показано на сайте, облом - person benjaminz; 30.07.2015
comment
Привет, не знаю, насколько это полно, но я могу подтвердить, что в Semantic UI теперь есть класс-контейнер. - person flodin; 27.11.2015

arrow_upward
1
arrow_downward

semantic-ui работает по-другому, ожидая, что сеточная система и класс ui page grid используют аналогичный подход, такой как начальная загрузка. Вы также можете увидеть этот пример шаблона http://ehkoo.github.io/semantic-ui-examples/jumbotron, где в шаблоне вы можете изменить тестируемые классы. Когда применяется класс ui grid, он занимает всю ширину, а с ui page grid он работает для ширины 992 пикселей с padding-right и padding-left. вы можете найти медиа-запросы для минимальной ширины экрана 992px:

@media only screen and (min-width: 992px) {
    .ui.page.grid {
        padding: 0 8%;
    }
}

Кроме того, есть проблема, за которой вы можете следить. Ссылка: https://github.com/Semantic-Org/Semantic-UI/issues/175

И Вы можете следить за страницей документации: http://semantic-ui.com/collections/grid.html

Я не знаю, полезно это для вас или нет.

person A.R. Nirjhor    schedule 23.02.2015

arrow_upward
0
arrow_downward

Да, Вы можете сделать следующее:

    <div class='ui centered grid'>
         <div class='fifteen wide column'>
          <!-- Below you can write your code -->
           <div class='ui menu'>
           <a class='active item'>Editorials</a>
           <a class='item'>Reviews</a>
           <a class='item'>Upcoming Events</a>
          </div>
         <!-- your code ends here -->
       </div>
    </div>
person vinay goyal    schedule 04.10.2018