Что такое Bootstrap?

557

17 июля 2017, 14:17

Объясните понятным языком, что это такое?

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

Что делать с макетом? Заново всё переписывать, что ли?
И где лучше всего изучать Bootstrap?

Answer 1

Рекомендую учебный раздел на Webreference.ru. Там изложены базовые понятия Бутстрапа, а рядом — справочники по CSS и HTML.

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

Зато можно подключать Бутстрап, но использовать его только там, где нужно.

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

Посмотрите как устроены базовые примеры. HTML-коды для слайдера и других модулей приведены в документации по ним.

Сделайте себе заготовку HTML-страницы, которая подключает Джиквери и Бутстрап с CDN, чтобы было легче тренероваться и проверять чужие решения. Например:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <!--[if lte IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <header></header>
  <footer></footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Практиковаться удобно на https://codepen.io/ Там стили и скрипты Бутстрапа можно подключать из выпадающего меню.

Попробовав каждый модуль, разберетесь, что Бутстрап умеет сам, а что нет. Тогда смотрите на русском и английском SO, как решают подобные вопросы. Для некоторых ситуаций есть стандартные доработки, а для других лучше использовать не Бутстрап.

Answer 2

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

Bootstrap использует современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.

Вот Вам как вариант документация на русском языке http://bootstrap-3.ru/index.php

Answer 3

Настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки. Начать его изучать вы можете по урокам здесь.

Answer 4

В bootstrap используется как я называю классовая верстка т.е. .class.

С помощью этого фреймворка можно создавать адаптивные сайты.

Скачать четвертую версию можно с этого сайта а третью здесь.

А насчет макета скорее всего заново. Вот несколько документаций http://bootstrap-3.ru/ http://bootstrap-ru.com/ http://mybootstrap.ru/