Bootstrap

Всем привет, сегодня мы начинаем не большой курс по изучению Bootstrap.

Что это?

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

Как добавить в свой сайт?

Я считаю что самое лёгкое это добавить BootsrapCDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

У вас должно получиться примерно как у меня, ссылка

Начнём:

1. Создание блоков

Код:

<div class="container p-3 my-3 border">

<h1>блок</h1>

<p>простой блок</p>

</div>

Также можно сделать тёмный блок:

Просто надо добавить в div | bg-dark

Если нам надо что-бы текст был по центру:

Добавляем text-center

Код: ссылка

2. Кнопки

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-link">Link</button>