Bootstrap уроки: Bootstrap уроки — основы адаптивной верстки Бутстрап на itProger

Bootstrap уроки — основы адаптивной верстки Бутстрап на itProger

Уроки по Bootstrap для начинающих! Новый видеокурс, в котором мы будет изучать фреймворк Bootstrap от базовых классов и до написания JavaScript скриптов. За курс вы узнаете как верстать сайты с помощью Bootstrap и какими характеристика обладаете данная технология.

Полезные ссылки:

Информация про Bootstrap

При каждом создании списка лучших фреймворков CSS в числе лидеров всегда стоит Bootstrap и это не случайно. Он занимает заслуженное место в списке благодаря наличию уникальных функций, часть из них не существует ни в одном другом фреймворке. 

Изначально разрабатывался для популярнейшей соцсети Twitter, но его роль выходит далеко за пределы одного сервиса. Сегодня является одним из самых используемых и эффективных фреймворков CSS. Бутстрап включает и другие широко известные языки – HTML и Javascript. 

Bootstrap уроки для начинающих стали не менее востребованы, чем сам фреймворк. Это говорит о его популярности и актуальности.

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

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

Почему используют Bootstrap?

Bootstrap содержит множество готовых стилей и JavaScript скриптов для создания веб сайта. Написание стилей для сайта можно значительно сократить за счёт использования уже готовых решений от Bootstrap.

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

Как работать с Bootstrap?

Принцип работы с Bootstrap прост. Вам предстоит:

• скачать или подключить Bootstrap при помощи CDN;
• выполнить верстку сайта с помощью Bootstrap, используя подготовленные стили. 

Верстка сайта на Bootstrap легкая даже для новичков в сфере веб разработки. Понять как работать с бутстрап и освоить Bootstrap основы можно в течении пары часов. Далее вы сможете проектировать сайты на бутстрап, делая их адаптивными, отзывчивыми и красивыми.

Версии Bootstrap

На сегодняшний день существует несколько основных версий Bootstrap. Последние крупные обновления это:

• Bootstrap 3 – добавлены классы для работы со множеством HTML5 объектов;
• Bootstrap 4 – представлена возможность строить адаптивную верстку Bootstrap на основе FlexBox;
• Bootstrap 5 – улучшены и добавлены стили к HTML объектам. Уменьшен код, увеличина производительность.

План курса

За курс мы ознакомимся с фреймворком Bootstrap. Мы изучим все основные классы, что содержаться в фреймворке. Также изучим использование подготовленных JavaScript скриптов. На основе практических Bootstrap примеров верстки вы сможете построить веб сайт и изучить Bootstrap с нуля. 

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

К концу курса у вас будет достаточно знаний чтобы использовать Bootstrap в ваших проектах.

Bootstrap Бутстрап 4 Учебник Справочник на русском примеры

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

Bootstrap 4 абсолютно бесплатно скачать и использовать!

Начните учить Bootstrap 4 сейчас »

Start Bootstrap 4

Попробуйте примеры

Этот учебник Bootstrap 4 содержит сотни примеров Bootstrap 4.

С помощью нашего онлайн-редактора вы можете отредактировать код и нажать на кнопку для просмотра результата.

Пример Bootstrap 4

  Моя первая Bootstrap страница
  Измените размер этой адаптивной страницы, чтобы увидеть эффект!

<div>
  <div>
    <div>
      <h4>Колонка 1</h4>
      <p>Просто текст
..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 2</h4>
      <p>Просто текст
..</p>
      <p>Новый текст..</p>
    </div>
    <div>
      <h4>Колонка 3</h4>
      <p>Просто текст
..</p>
      <p>Новый текст..</p>
    </div>
  </div>
</div>

Нажмите на «Просмотр демо в редакторе» кнопку, чтобы увидеть, как работает.

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицы стилей и большей отзывчивостью.

Bootstrap 4 поддерживает новейшие, стабильные выпуски всех основных браузеров и платформ. Тем не менее Internet Explorer 9 и вниз не поддерживается.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Базовый шаблон Bootstrap 4

Мы создали адаптивный начальный шаблон с Bootstrap 4. Вы можете изменять, сохранять, делиться и использовать его в своих проектах:

Ссылки Bootstrap

Полный список всех классов Bootstrap 4 CSS с описанием и примерами:

Если вы хотите сделать больше с компонентами Bootstrap, смотрите наш полный Bootstrap 4 с JavaScript все примеры:

Bootstrap Бутстрап 4 Class

Bootstrap Бутстрап 4 Navigation Bar

Панели навигации

Панель навигации — это заголовок навигации, расположенный в верхней части страницы:

Logo

Базовая навигационная

С помощью Bootstrap панель навигации может расширяться или сворачиваться в зависимости от размера экрана.

Стандартная панель навигации создается с помощью .navbar класса, за которым следует адаптивный класс свертывания: (стеки навигационной панели .navbar-expand-xl|lg|md|sm по вертикали на очень больших, больших, средних или маленьких экранах).

Чтобы добавить ссылки внутри навигационной области, используйте <ul> элемент с class="navbar-nav".
Затем добавьте <li> элементы с .nav-item классом
за которым следует <a> элемент с .nav-link классом:

Пример

  <!— Links —>
  <ul>
    <li>
      <a href=»#»>Link
1</a>
    </li>
    <li>
      <a href=»#»>Link
2</a>
    </li>
    <li>
      <a href=»#»>Link
3</a>
    </li>
  </ul>

</nav>

Вертикальная навигационная

Удалите .navbar-expand-xl|lg|md|sm класс для создания вертикальной панели навигации:

Пример

  <!— Links —>
  <ul>
    <li>
      <a href=»#»>Link
1</a>
    </li>
    <li>
      <a href=»#»>Link
2</a>
    </li>
    <li>
      <a href=»#»>Link
3</a>
    </li>
  </ul>

</nav>

Центрированная навигационная

Добавьте .justify-content-center класс для центрирования панели навигации.

Следующий пример будет центрировать панель навигации на средних, больших и очень больших экранах. На маленьких экранах она будет отображаться по вертикали и по левому краю (из-за. навигации-развернуть-SM класса):

Пример

<nav>
  <a
class=»navbar-brand» href=»#»>Logo</a>
  …
</nav>

Цветной навигационной

Используйте любой из .bg-color классов для изменения цвета фона навигационной области (,,,,,, .bg-primary
.bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light )

Совет: Добавьте белый цвет текста ко всем ссылкам в навигационной навигации с помощью .navbar-dark класса или используйте .navbar-light класс для добавления черного цвета текста.

Пример

 
   

      Active
   
   
      Link
   

   
     
Link
   
   

      Disabled
   
 

<!— Black with white text —>
<nav>…</nav>

<!— Blue with white text —>
<nav>…</nav>

Активное/отключенное состояние: добавьте .active класс к <a> элементу, чтобы выделить текущую ссылку, или класс, указывающий на то, .disabled что ссылка не является интерактивной.

Марка/логотип

.navbar-brand класс используется для выделения названия бренда/логотипа/проекта вашей страницы:

Logo

Пример

<nav>
  <a
class=»navbar-brand» href=»#»>Logo</a>
  …
</nav>

При использовании .navbar-brand класса на изображениях Bootstrap 4 автоматически применяет стиль изображения для вертикальной навигации.

Пример

<nav>
   <a href=»#»>
    <img src=»bird.jpg»
alt=»Logo»>
  </a>
  …
</nav>

Свертывание панели навигации

Navbar

Очень часто, особенно на небольших экранах, вы хотите, чтобы скрыть навигационные ссылки и заменить их на кнопку, которая должна выявить их при нажатии на.

Чтобы создать складную панель навигации, используйте кнопку с class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget" . Затем оберните содержимое навигационной панели (ссылки и т.д.) внутри элемента div с class="collapse navbar-collapse" , за которым следует идентификатор, соответствующий data-target кнопке: «сетаржет«.

Пример

 
  Navbar

  <!— Toggler/collapsibe Button —>
  <button
class=»navbar-toggler» type=»button»
data-toggle=»collapse» data-target=»#collapsibleNavbar»>
   
<span></span>
  </button>

  <!— Navbar links —>
  <div
id=»collapsibleNavbar»>
    <ul>
     
<li>
        <a
href=»#»>Link</a>
      </li>
     
<li>
        <a
href=»#»>Link</a>
      </li>
     
<li>
        <a
href=»#»>Link</a>
      </li>
   
</ul>
  </div>
</nav>

Совет: Можно также удалить класс. навигации-Expand-MD, чтобы всегда скрывать ссылки панели навигации и отображать кнопку переключателя.

Навигационное меню с раскрывающимся списком

Logo

NavBars также может содержать выпадающие меню:

Пример

 

  Logo

 
<!— Links —>
  <ul>
    <li
class=»nav-item»>
      <a href=»#»>Link
1</a>
    </li>
    <li>
     
<a href=»#»>Link 2</a>
    </li>

   
<!— Dropdown —>
    <li>
     
<a href=»#»
data-toggle=»dropdown»>
        Dropdown
link
      </a>
     
<div>
        <a
class=»dropdown-item» href=»#»>Link 1</a>
       
<a href=»#»>Link 2</a>
       
<a href=»#»>Link 3</a>
     
</div>
    </li>
  </ul>
</nav>

Формы и кнопки панели навигации

Добавьте <form> элемент, class="form-inline" чтобы сгруппировать входы и кнопки рядом друг с другом:

Пример

<nav>
 
<form action=»/action_page.php»>
    <input
type=»text» placeholder=»Search»>
   
<button type=»submit»>Search</button>
 
</form>
</nav>

Можно также использовать другие классы ввода, например .input-group-prepend или .input-group-append для прикрепления значка или текста справки рядом с полем ввода. Подробнее об этих классах вы узнаете в главе Bootstrap Inputs.

Пример

<nav>
  <form action=»/action_page.php»>
    <div>
      <div
class=»input-group-prepend»>
       
<span>@</span>
     
</div>
      <input type=»text»
class=»form-control» placeholder=»Username»>
    </div>
  </form>
</nav>

Текст навигационной навигации

Navbar text

Используйте .navbar-text класс для вертикального выравнивания любых элементов внутри навигационной области, которые не являются ссылками (обеспечивает правильное заполнение и цвет текста).

Пример

<!—
Links —>
  <ul>
    <li
class=»nav-item»>
      <a href=»#»>Link
1</a>
    </li>
    <li>
     
<a href=»#»>Link 2</a>
    </li>
 
</ul>

  <!— Navbar text—>
  <span>
   
Navbar text
  </span>

</nav>

Фиксированная панель навигации

Панель навигации можно также зафиксировать вверху или внизу страницы.

Фиксированная панель навигации остается видимой в фиксированном положении (сверху или снизу) независимо от прокрутки страницы.

.fixed-topкласс делает навигационную панель фиксированной в верхней части:

Пример

<nav>
 
…
</nav>

Используйте .fixed-bottom класс для того, чтобы сделать навигационную страницу в нижней части страницы:

Пример

<nav>
 
…
</nav>

Используйте .sticky-top класс, чтобы сделать навигационную страницу фиксированной/оставаться в верхней части страницы, когда вы прокрутите ее мимо . Примечание:
Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative ).

Пример

<nav>
 
…
</nav>

Bootstrap Бутстрап 4 Colors — цвета

Цвета текста

Bootstrap 4 имеет некоторые контекстные классы, которые могут быть использованы для обеспечения «значение через цвета».

Классы для текстовых цветов: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (цвет тела по умолчанию/часто черный) и .text-light:

Пример

Этот текст отключен.

Этот текст важен.

Этот текст указывает на успех.

Этот текст представляет некоторую информацию.

Этот текст представляет предупреждение.

Этот текст представляет опасность.

Вторичный текст.

Темно-серый текст.

Основного текста.

Светло-серый текст.

Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:

Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:

Пример

Black text with 50% opacity on white background

White text with 50% opacity on black background

Цвета фона

Для цветов фона используются следующие классы: .bg-primary ,,,,,
.bg-success .bg-info .bg-warning .bg-danger .bg-secondary .bg-dark и .bg-light.

Обратите внимание, что цвета фона не задается цвет текста, поэтому в некоторых случаях вы хотите использовать их вместе с .text-* классом.

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Bootstrap Бутстрап 4 Text Typography

Параметры начальной загрузки 4 по умолчанию

Bootstrap 4 использует значение по умолчанию
font-size of 16px, and its
line-height is 1.5.

По умолчанию font-family используется шрифт «Новая», шрифт, Arial, без засечек.

Кроме того, все <p> элементы имеют margin-top: 0 и margin-bottom: 1rem (16px по умолчанию).

<h2> — <h6>

Bootstrap 4 стили HTML заголовки (<h2> —
<h6>)  с более смелым шрифтом и увеличенным размером шрифта:

Пример

h3 Bootstrap heading (2rem = 32px)

h4 Bootstrap heading (1.75rem = 28px)

h5 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)

h6 Bootstrap heading (1rem = 16px)

Отображение заголовков

Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4

<small>

В Bootstrap 4 элемент HTML <small> используется для создания более светлого, вторичного текста в любом заголовке:

Пример

h3 heading

secondary text

h4 heading

secondary text

h5 heading

secondary text

h5 heading

secondary text

h6 heading

secondary text

<mark>

Bootstrap 4 будет стиль HTML <mark> элемент с желтым цветом фона и некоторые отступы:

Пример

Используйте элемент Mark для highlight Текста.

<abbr>

Bootstrap 4 будет стиль HTML <abbr> элемент с пунктирным нижней границы:

Пример

The WHO was founded in 1948.

<blockquote>

Добавьте .blockquote класс к a <blockquote> при цитировании блоков содержимого из другого источника:

Пример

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

<dl>

Bootstrap 4 будет стиль HTML <dl> элемент следующим образом:

Пример

Coffee

— black hot drink

Milk

— white cold drink

<code>

Bootstrap 4 будет стиль HTML <code> элемент следующим образом:

Пример

Следующие элементы HTML: span , section и div определяет раздел в документе.

<kbd>

Bootstrap 4 будет стиль HTML <kbd> элемент следующим образом:

Пример

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrap 4 будет стиль HTML <pre> элемент следующим образом:

Пример

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

Другие классы типографии

Следующие классы Bootstrap 4 можно добавить в HTML-элементы стиля далее:

Полный Bootstrap 4 CSS Ссылка

Для полного справочника всех классов CSS, доступных в Bootstrap 4, посетите наш
Bootstrap 4 все классы ссылка.

Введение. Начало работы · Bootstrap. Версия v4.0.0

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

Быстрый старт

Хотите использовать Bootstrap в своем проекте? Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap? Посетите страницу загрузок.

CSS

Вставьте этот кусок кода в <head>, перед всеми прочими файлами CSS, для загрузки Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery, Popper.js и наши собственные плагины. Для активации плагинов разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery , потом Popper.js, потом наши.

Мы используем мини-сборку jQuery, но и полную можно использовать.

<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-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Любопытно, какие компоненты явно требуют jQuery, наших JS и Popper.js? Нажмите ссылку «Показать компоненты» ниже. Если вы не уверены в том, как правильно написать «коренную» структуру страницы, можете использовать наши шаблоны.

Показать компоненты, требующие JavaScript

• Уведомления отмены
• Кнопки изменения состояний и чекбоксов/»радио»
• Карусель для поведения «слайд», элементы контроля и индикаторы
• Коллапс для изменения видимости содержимого
• Выпадающие элементы для отображения и расположения (также требует Popper.js)
• Модальные окна для отображения, расположения и создания поведения прокрутки
• Навбар для расширения нашего плагина коллапса для придания отзывчивого поведения
• Выплывающие подсказки и окна для отображения и расположения (также требует Popper.js)
• Отслеживание прокрутки и обновления навигации

Начальный шаблон страницы

Удостоверьтесь, что ваши страницы сверстаны по новейшим стандартам. Они должны включать и использовать HTML5 doctype и viewport meta tag для правильного «отзывчивого» поведения страниц. Вот как должен выглядеть «верхний», коренной код страницы:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h2>Hello, world!</h2>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Это все, что вам нужно из общих требований к странице. Посетите Обзорный раздел или наши официальные примеры для создания контента и компонентов вашего сайта.

Важные глобальные атрибуты

Bootstrap включает некоторые глобальные стили и настройки, о которых вам необходимо знать при работе с ним; все эти стили и настройки почти полностью имеют дело с и «заточены» под нормализацию кроссбраузерных стилей.

HTML5 doctype

Bootstrap требует использования doctype «HTML5». Без него у вас возникнут некоторые проблемы со стилями.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

«Отзывчивый» мета-тэг

Bootstrap разрабатывался как mobile first, т.е. его настройки прежде всего оптимизированы под мобильные устройства, а уж потом с помощью медиа-запросов мы подгоняем масштаб компонентов как нам необходимо на прочих устройствах. Вставьте этот кусок кода в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Вы можете посмотреть пример этого в действии на странице starter template.

Размер ширины и высоты элемента

Для большей простоты масштабирования в CSS мы изменяем глобальное значение box-sizing с content-box на border-box. Это гарантирует, что padding не будет влиять на конечную вычисленную ширину элемента; однако может создать проблемы для сторонних приложений, таких как Google Maps или поисковой движок Google.

В том редком случае, когда вам надо преодолеть эти возможные баги, делайте так:

.selector-for-some-widget {
  box-sizing: content-box;
}

С использованием фрагмента кода, приведенного выше, вложенные элементы – включая сгенерированный через :before и :after контент – будут все наследовать заданный box-sizing для класса .selector-for-some-widget.

Узнайте больше о блоковой модели и параметризации размеров на CSS Tricks.

«Ребут» (новая библиотека CSS, не использующая классов, обеспечивающая «модульный подход»)

Для улучшенной кроссбраузерной визуализации мы применили «Ребут», обеспечивающий более продвинутые «сбросы стилей» для элементов HTML для коррекции мелких багов в браузерах и девайсах.

Оставайтесь в курсе последних новостей Bootstrap и вливайтесь в сообщество Bootstrap с помощью этих ресурсов:

• @getbootstrap on Twitter.
• The Official Bootstrap Blog.
• the official Slack room.
• Чат с камрадами по Bootstrap. Канал ##bootstrap на сервере irc.freenode.net.
• Помощь в реализации Bootstrap 4 на Stackoverflow bootstrap-4).
• При разработке через npm или аналогичные депозитарии, разработчикам следует использовать ключевое слово bootstrap в своих пакетах и библиотеках для максимальной видимости.

Вы также можете присоединиться @getbootstrap on Twitter для получения «свежайших» слухов и классных музыкальных клипов.

Bootstrap 4 Учебник

Попробуйте сами Примеры

Это руководство по Bootstrap 4 содержит сотни примеров Bootstrap 4.

С помощью нашего онлайн-редактора вы можете редактировать код и нажимать кнопку, чтобы просмотреть результат.

Bootstrap 4, пример

Мой первый бутстрап
Страница
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Попробуй сам »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации. Однако новые функции НЕ будут добавлены в
Это.

Перейти к Bootstrap 3 »

Базовый шаблон Bootstrap 4

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

Ссылки на Bootstrap

Полный список всех CSS-классов Bootstrap 4 с описанием и примерами:

Если вы хотите сделать больше с компонентами Bootstrap, ознакомьтесь с полным справочником Bootstrap 4 JavaScript / jQuery — все с примерами «Попробуйте сами»:

Bootstrap 4 упражнения

Тест-тест Bootstrap 4

Проверьте свои навыки Bootstrap 4 в W3Schools!

Начать тест на Bootstrap 4!

Знаете ли вы?

W3.CSS — отличная альтернатива Bootstrap 4.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS
Руководство.

Bootstrap 4 Начало работы

Что такое Bootstrap?

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

Что такое адаптивный веб-дизайн?

Адаптивный веб-дизайн — это создание веб-сайтов, которые автоматически настраиваются
сами по себе, чтобы хорошо выглядеть на всех устройствах, от маленьких телефонов до больших настольных компьютеров.

Bootstrap 4, пример

Мой первый бутстрап
Страница
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Попробуй сам »

Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в
Это.

Поддержка удаленных значков : Bootstrap 4 не поддерживает глификоны BS3. Вместо этого используйте Font-Awesome или другие библиотеки значков.

Зачем использовать Bootstrap?

Преимущества бутстрапа:

• Простота использования: Любой, кто имеет базовые знания HTML и CSS, может начать использовать Bootstrap
• Адаптивные функции: Адаптивный CSS Bootstrap подстраивается под телефоны, планшеты и настольные компьютеры
• Подход, ориентированный на мобильные устройства: В Bootstrap стили, ориентированные на мобильные устройства, являются частью базовой структуры
• Совместимость с браузером: Bootstrap 4 совместим со всеми современными браузерами (Chrome, Firefox, Internet Explorer 10+, Edge, Safari и Opera)

Где взять Bootstrap 4?

Есть два способа начать использовать Bootstrap 4 на вашем собственном веб-сайте.

Вы можете:

• Включить Bootstrap 4 из CDN
• Загрузите Bootstrap 4 с сайта getbootstrap.com

Бутстрап 4 CDN

Если вы не хотите загружать и размещать Bootstrap 4 самостоятельно, вы можете включить его из CDN (сети доставки контента).

MaxCDN обеспечивает поддержку CDN для CSS и JavaScript Bootstrap. Вы также должны включить jQuery:

MaxCDN:

Одно из преимуществ использования Bootstrap 4 CDN:
Многие пользователи уже загрузили
Bootstrap 4 от MaxCDN при посещении
другой сайт.В результате он будет загружен из кеша при посещении вашего сайта, что приведет к сокращению времени загрузки.
Кроме того, большинство CDN гарантируют, что после того, как пользователь запросит у него файл, он будет обработан.
с ближайшего к ним сервера, что также сокращает время загрузки.

jQuery и Поппер?
Bootstrap 4 использует jQuery и Popper.js для
Компоненты JavaScript (например, модальные окна, всплывающие подсказки, всплывающие окна и т. Д.). Однако, если вы просто используете
CSS часть Bootstrap, они вам не нужны.

Показать компоненты, требующие jQuery »

• Закрытые оповещения
• Кнопки и флажки / переключатели для переключения состояний
• Карусель для слайдов, элементов управления и индикаторов
• Свернуть для переключения содержимого
• Выпадающие списки (для идеального позиционирования также требуется Popper.js)
• Модальные окна (открыть и закрыть)
• Navbar (для складных меню)
• Всплывающие подсказки и всплывающие окна (для идеального позиционирования также требуется Popper.js)
• Scrollspy для поведения прокрутки и обновлений навигации

Загрузка Bootstrap 4

Если вы хотите загрузить и разместить Bootstrap 4 самостоятельно, перейдите по ссылке
https: // getbootstrap.com /,
и следуйте инструкциям там.

Создание первой веб-страницы с помощью Bootstrap 4

1. Добавьте тип документа HTML5

Bootstrap 4 использует элементы HTML и свойства CSS, требующие
тип документа HTML5.

Всегда включайте тип документа HTML5 в начало
страница вместе с атрибутом lang и правильным набором символов:

2.Bootstrap 4 предназначен для мобильных устройств

Bootstrap 4 разработан для работы с мобильными устройствами. Стили, ориентированные на мобильные устройства:
часть основной структуры.

Чтобы обеспечить правильный рендеринг и сенсорное масштабирование, добавьте следующий тег внутри
элемент:

Часть width = device-width устанавливает ширину страницы, соответствующую ширине экрана.
устройства (который зависит от устройства).

Часть initial-scale = 1 устанавливает начальный уровень масштабирования при первой загрузке страницы
браузером.

3. Контейнеры

Bootstrap 4 также требует наличия содержащего элемента для обертывания содержимого сайта.

Есть два класса контейнеров на выбор:

1. Класс .container предоставляет отзывчивый контейнер фиксированной ширины
2. Класс .container-fluid предоставляет контейнер полной ширины , охватывающий всю ширину окна просмотра

Две базовые страницы начальной загрузки, 4 страницы

В следующем примере показан код для базовой страницы Bootstrap 4 (с адаптивным контейнером фиксированной ширины):

Пример контейнера

Бутстрап
4 Пример

Попробуй сам »

В следующем примере показан код для базовой страницы Bootstrap 4 (с контейнером полной ширины):

Пример жидкости в контейнере

Бутстрап
4 Пример

Попробуй сам »

Bootstrap 4 кнопки

Стили кнопок

Bootstrap 4 предоставляет разные стили кнопок:

Базовый
Начальный
Вторичный
Успех
Информация
Предупреждение
Опасность
Темный
Свет
Ссылка на сайт

Пример

Базовый
Первичный
Вторичный
Успешно
Информация
Предупреждение
Опасно
Темный
Light
Ссылка

Попробуй сам »

Классы кнопок могут использоваться на , или
элементов:

Пример

Кнопка ссылки

Кнопка

< input type = "submit" value = "Кнопка отправки">

Попробуй сам »

Почему мы добавляем # в атрибут href ссылки?

С
у нас нет страницы, на которую можно было бы ссылаться, и мы не хотим получать «404»
сообщение, мы помещаем # как ссылку.В реальной жизни это, конечно, должен быть реальный URL-адрес страницы «Поиск».

Контур кнопки

Bootstrap 4 предоставляет восемь кнопок с контуром / рамкой:

Начальный
Вторичный
Успех
Информация
Предупреждение
Опасность
Темный
Свет

Пример

Первичный
Вторичный
Успешно
Информация
Предупреждение
Опасно
Темный
Свет

Попробуй сам »

Размеры кнопок

Используйте .btn-lg class для больших кнопок или .btn-sm class для маленьких кнопок:

Большой
Дефолт
Небольшой

Пример

Большой
По умолчанию
Маленький

Попробуй сам »

Кнопки уровня блокировки

Добавьте класс .btn-block для создания кнопки уровня блока
который охватывает всю ширину родительского элемента.

Кнопка полной ширины

Пример

Во всю ширину
Кнопка

Попробуй сам »

Активные / отключенные кнопки

Кнопка может быть установлена ​​в активное (кажется нажатым) или отключенное (не кликабельное) состояние:

Активный первичный
Отключено Основное

Класс .active заставляет кнопку появляться
нажата, а атрибут отключен, атрибут
делает кнопку неактивной.Обратите внимание, что элементы не поддерживают отключенные
атрибут и поэтому должен использовать класс .disabled , чтобы он выглядел визуально
отключен.

Активный основной
Disabled Primary
Disabled Link

Попробуй сам »

Поворотные кнопки

Вы также можете добавить «спиннеры» к кнопке, о чем вы узнаете больше в нашем руководстве по BS4 Spinners:

Загрузка..

Загружается ..

Загружается ..

Пример

Загрузка ..

Загрузка ..

<кнопка отключена>

Загрузка ..

Попробуй сам »

Bootstrap 3 Учебник

Попробуйте сами Примеры

Этот учебник Bootstrap содержит сотни примеров Bootstrap.

С помощью нашего онлайн-редактора вы можете редактировать код и нажимать кнопку, чтобы просмотреть результат.

Пример начальной загрузки

My First Bootstrap Page
Измените размер этой адаптивной страницы, чтобы увидеть эффект!

Попробуй сам »

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.

Упражнения начальной загрузки

Тест-тест начальной загрузки

Проверьте свои навыки Bootstrap в W3Schools!

Начать тест по начальной загрузке!

Ссылки на Bootstrap

На W3Schools вы найдете полную справку по Bootstrap для всех классов CSS,
Компоненты и плагины JavaScript — все с примерами «Попробуйте сами»:

Темы / шаблоны начальной загрузки

Мы создали несколько шаблонов начальной загрузки, с которыми вы можете поиграть.Их можно использовать совершенно бесплатно:

Bootstrap 3 и Bootstrap 4

Bootstrap 4 — новейшая версия Bootstrap; с новыми компонентами, более быстрой таблицей стилей и большей отзывчивостью.

Bootstrap 4 поддерживает последние стабильные версии всех основных браузеров и
платформы. Однако Internet Explorer 9 и более ранние версии не поддерживаются.

Если вам требуется поддержка IE8-9, используйте Bootstrap 3. Это самый
стабильная версия Bootstrap, и она по-прежнему поддерживается командой для исправления критических ошибок и изменений документации.Однако в
Это.

Перейти к Bootstrap 4 »

Знаете ли вы?

W3.CSS — отличная альтернатива Bootstrap.

W3.CSS меньше, быстрее и проще в использовании.

Если вы хотите изучить W3.CSS, перейдите на наш W3.CSS
Руководство.

Введение · Bootstrap v5.0

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатную CDN с открытым исходным кодом.Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

CSS

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

СП

Многие из наших компонентов требуют использования JavaScript для работы.В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих

Отдельно

  

  ...

  

 .selector-for-some-widget {
  размер коробки: коробка содержимого;
}
  

  бутстрап /
├── css /
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ └── bootstrap-theme.min.css
├── js /
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── шрифты /
    ├── глификоны-халфлинги-regular.eot
    ├── глификоны-халфлинги-regular.svg
    ├── глификоны-халфлинги-regular.ttf
    ├── глификоны-халфлинги-правильные.woff
    └── глификоны-халфлинги-regular.woff2
  

  

  
    
    
    
    
    <ссылка href = "css / bootstrap.min.css "rel =" таблица стилей ">
  
  
    
 Привет, мир! 
    
    
  

  

  
  ...
  
    
    
  

  

  

  
 Первый столбец 
  
 Второй столбец 


  
 Первый столбец 
  
 Второй столбец 
  
 Третий столбец 
  
 Четвертый столбец 

  

  

  
 Более широкий столбец 
  
 Меньший столбец 

  

  

  
 Центрированный столбец 

  

  

  

    

      Родительский столбец фиксированной ширины
      

        
 Вложенный столбец 
        
 Вложенный столбец 
      
    
  


  

    
 Жидкость.. 
    
 .. и во всю ширину .. 
    
 .. пример 
  

  

  

  
 .col-xs-12 .col-md-3 
  
 .col-xs-12 .col-md-3 
  
.col-xs-12 .col-md-3 
  
 .col-xs-12 .col-md-3