38 lines
3.2 KiB
Markdown
38 lines
3.2 KiB
Markdown
|
---
|
|||
|
|
title: Get Started
|
|||
|
|
localeTitle: Начать
|
|||
|
|
---
|
|||
|
|
## Начать
|
|||
|
|
|
|||
|
|
Bootstrap - это бесплатная и открытая база данных, разработанная Twitter, она предоставляет множество шаблонов для использования с веб-разработкой frontend. Использование Bootstrap упрощает разработку полностью отзывчивого веб-сайта и является основой для изучения.
|
|||
|
|
|
|||
|
|
#### Что такое отзывчивый веб-сайт
|
|||
|
|
|
|||
|
|
Отзывчивый веб-сайт - это веб-сайт, который изменяет размеры и переупорядочивает эти элементы на странице в зависимости от размера вашего браузера. С помощью адаптивного веб-сайта, если вы измените размер своего браузера, вы увидите, что изменения происходят в реальном времени. Bootstrap делает ваш сайт отзывчивым для вас.
|
|||
|
|
|
|||
|
|
#### Как добавить Bootstrap на мою страницу
|
|||
|
|
|
|||
|
|
Добавление бутстрапа к вашей странице - это быстрый процесс, просто добавьте следующее в теги `<head>` в вашем коде.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вам также необходимо добавить следующее между тегами `body` в коде. С помощью бутстрапа вы будете использовать теги `<div>` при использовании многих функций Bootstrap, каждый тег будет иметь свой собственный уникальный набор классов, который позволяет тегу выполнять свою задачу. В других разделах этого руководства Bootstrap будут показаны дополнительные примеры того, как Bootstrap использует теги `<div>` . (теги `<div>` не являются эксклюзивными для Bootstrap, однако Bootstrap их использует.). Ниже приведен код, который добавит теги `body` в ваш код, чтобы завершить работу. Имейте в виду, что, пока это создает контейнер, страница все равно останется пустой, пока вы не добавите содержимое в контейнер.
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<div class="alert alert-success" role="alert">
|
|||
|
|
<strong>Congratulations!</strong>
|
|||
|
|
<p>Bootstrap is now working on this page</p>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Поздравляем!**
|
|||
|
|
|
|||
|
|
Bootstrap теперь работает на этой странице
|
|||
|
|
|
|||
|
|
#### Больше информации
|
|||
|
|
|
|||
|
|
* [Официальный сайт Bootstrap](http://getbootstrap.com/getting-started/)
|