Bootstrap 4, Grids

@deGeneral · Регистрация: 20.11.2012

Author24 — интернет-сервис помощи студентам

Сразу привожу код страницы, он простейший:

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-sm">
                The first of four columns
            </div>
            <div class="col-sm">
                The second of four columns
            </div>
            <div class="col-sm">
                The third of four columns
            </div>
            <div class="col-sm">
                The fourth of four columns
            </div>
        </div>
    </div>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

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

Как мне стилизовать грид по-своему, если я захочу какие-то ячейки покрасить, обрамить бордером и типо того?

@novichek_1905 · 05.08.2019, 17:40

Сообщение от deGeneral

Это правильно, так и должно быть или я что-то недоподключил?

Это правильно

Сообщение от deGeneral

Как мне стилизовать грид по-своему, если я захочу какие-то ячейки покрасить, обрамить бордером и типо того?

Создайте свой CSS файл, туда добавьте классы с нужными стилями и примените их колонкам.

@deGeneral · 05.08.2019, 18:11 **[ТС]**

То есть, я в своем CSS пишу:

CSS

1
2
3

.col-sm {
border: 1px solid black;
}

и все работает, как надо. Это не будет признаком дурного тона, что я дублирую имя класса? Или я должен создавать какой-то свой my-col, не трогая бутстраповский, а на странице указывать

HTML5

1	<div class="col-sm my-col"

?

Я пробовал оба варианта, они оба работают. Какой все же предпочтительнее?

@novichek_1905 · 05.08.2019, 18:20

Сообщение от deGeneral

Это не будет признаком дурного тона, что я дублирую имя класса?

Создайте свой класс, и просто добавляйте к колонкам) Старайтесь не цепляться к классам бутстрапа.

Добавлено через 25 секунд

Сообщение от deGeneral

Какой все же предпочтительнее?

с my-col

@deGeneral · 05.08.2019, 18:25 **[ТС]**

Спасибо, линию поведения понял!

@wwowa · 05.08.2019, 20:49

Сообщение от deGeneral

если я захочу какие-то ячейки покрасить, обрамить бордером

Задать бордюр

HTML5

1	<div class="col-sm border">

Залить цветом

HTML5

1	<div class="col-sm border bg-primary">

И так далее. В бутстрапе много чего есть и классов не счесть. В русской документации, как я понял много чего не описано. Но про цвета и границы есть. Там и градиент есть. Но по умолчанию он выключен.
Так что для творческих людей они советуют подкорректировать их scss файлы и переопределить, как душе угодно.
Не хочется заниматься, можно "побыстрому" подкорректировать их стиль на сторонних сервисах загрузки. Для примера
https://bootstrap.build/
По своему опыту скажу, что это может затянуть и вместо верстки сайта, будешь колдовать над стилями. Лучше привыкнуть к стандартному бутстрапу.. Тем более, что сайты сейчас ваяют в основном "серенькие".. Но это дело вкуса. Он есть или его нет

По поводу добавления своих классов - не соглашусь. Для примера меню

HTML5

1	<nav class="navbar navbar-expand-lg navbar-light bg-light">

А бывает и больше. И лепить туда еще свой класс ??? К Но это опять же сугубо имхо.
По мне, так в идеале свой файл стилей должен быть практически пустой. Зачем тогда тащить весь этот бутстрап. Можно взять только сетку. Как многие(некоторые) и делают. А стили свои.

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	05.08.2019, 17:40	2
	Сообщение от deGeneral Это правильно, так и должно быть или я что-то недоподключил? Это правильно Сообщение от deGeneral Как мне стилизовать грид по-своему, если я захочу какие-то ячейки покрасить, обрамить бордером и типо того? Создайте свой CSS файл, туда добавьте классы с нужными стилями и примените их колонкам. 0

@novichek_1905 469 / 334 / 144 Регистрация: 16.02.2018 Сообщений: 930
	05.08.2019, 18:20	4
	Сообщение от deGeneral Это не будет признаком дурного тона, что я дублирую имя класса? Создайте свой класс, и просто добавляйте к колонкам) Старайтесь не цепляться к классам бутстрапа. Добавлено через 25 секунд Сообщение от deGeneral Какой все же предпочтительнее? с `my-col` 1

@deGeneral 5 / 5 / 1 Регистрация: 20.11.2012 Сообщений: 50
	05.08.2019, 18:25 [ТС]	5
	Спасибо, линию поведения понял! 0

	05.08.2019, 20:49

Bootstrap 4, Grids

Решение