Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
notAll
456 / 175 / 64
Регистрация: 27.05.2016
Сообщений: 461
Завершенные тесты: 2
1

HTML5 семантика и Bootstrap

21.11.2016, 13:24. Просмотров 763. Ответов 1
Метки нет (Все метки)

Такой вопрос, можно ли использовать семантические теги HTML5 (типа <header>, <main>, <article>) как ячейки таблицы Bootstap? Или же лучше пихать div-вы внутрь этих тегов? Вот например мой подход:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!--...-->
<body>
<article class="container">
    <header>
        <div class="row">
            <h1 class="col-xs-8">Hello</h1>
 
            <!-- Groups Selector -->
            <div class="col-xs-4" id="group-selector">
                <strong>Група: </strong>
                <select>
                    <option value="">Val 1</option>
                    <option value="">Val 2</option>
                    <option value="">Val 3</option>
                </select>
            </div>
        </div>
 
        <!-- Navigation -->
        <div class="row">
            <nav>
                <div class="col-xs-12">
                    <ul class="nav nav-tabs">
                        <li role="presentation" class="active"><a href="#">First</a></li>
                        <li role="presentation"><a href="#">Second</a></li>
                        <li role="presentation"><a href="#">Third</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </header>
 
    <main class="row">
        <div class="col-xs-12">
            <div class="alert alert-warning" role="alert">Warning.</div>
            <h2>Main Content</h2>
            <a class="btn btn-primary" href="#">Button</a>
 
 
            <table class="table table-striped table-hover">
                <!--....-->
            </table>
        </div>
    </main>
 
    <footer class="row">
        <small class="col-xs-12">&copy; 2016 Footer information</small>
    </footer>
</article>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
Или делать, например, так?
HTML5
1
2
3
<main>
    <div class="row">
        <div class="col-xs-12">
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.11.2016, 13:24
Ответы с готовыми решениями:

Семантика HTML5
Здравствуйте. Подскажите пожалуйста по тэгам html5. Есть тэги: main, section,...

Правильная семантика в html5
Перечитал много разных источников, и у меня возник вопрос. С точки зрения...

Теги html5 и колонки bootstrap
Здравствуйте. Правильно ли задавать для html5-тегов классы колонок bootstrap? ...

Правильное использование html5 тегов в Bootstrap
Правильно ли я размещаю html5 теги вместе с сеткой Bootstrap? &lt;div...

Для чего в Bootstrap файлы bootstrap.css.map и bootstrap-theme.css.map?
В дистрибутиве Bootstrap были замечены файлы bootstrap.css.map и...

1
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2832 / 2399 / 1037
Регистрация: 15.12.2012
Сообщений: 8,916
Записей в блоге: 5
21.11.2016, 13:48 2
notAll, можно... В бутстрап ключевую роль играют классы элементов... Рассмотрим небольшой пример... Возьмём два тега header и div... Оба тега блочные, хотя с точки зрения семантической вёрстки header является тегом, который определяет содержимое шапки сайта, тогда как div является более универсальным контейнером в отличии от header... C точки зрения CSS по умолчанию оба тега обладают одинаковыми свойствами... Поэтому в принципе нет препятствий для замены div на header... Но, если Вы пытаетесь заменить div строчно-блочным или блочным элементом, то есть вероятность, что стили определённые в бутстрап для блока будут применены частично, не в полной мере, как это предусмотрено... И вернёмся к вопросу почему разработчики бутстрап в сетке используют именно тег div? Всё просто он универсален для любого рода содержимого... Кстати, тег main использовать не рекомендую у него проблемы с кроссбраузерностью...
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.11.2016, 13:48

Не ясна семантика HTML 5
Здрасте! Читал, что в HTML 5 были придуманы теги &lt;header&gt;, &lt;footer&gt;, &lt;nav&gt;,...

Семантика для SEO
На сколько важно знать её верстальщику, и с чего начать её изучение?

Эстетичность верстки, семантика, корректная верстка
Неоднократно замечал, что в сайтах, которые верстали настоящие профи - всегда...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru