Опубликовано от — Оставить комментарий

Установка Bootstrap

Установка Bootstrap - фундамента для работы
Установка Bootstrap — фундамента для работы

Bootstrap — фреймворк для разработки страниц, учитывающих мобильные устройства. Когда HTML-страницы разрабатываются начинающими разработчиками, со временем всплывает проблема создания мобильной версии сайта. С установкой Bootstrap и его использованием в проектах, проблема мобильной версии снимается — разработчик изначально указывает CSS-классы, предусматривающие различное отображение сайта на разных устройствах — десктопах, планшетах, смартфонах. Загрузить архив можно со страницы загрузки Bootstrap. Подключение производиться обычным способ — прописываются ссылки на CSS (<link … >) и JavaScript (<script …>). Подключить Bootstrap можно и размещением ссылок на CDN или ниже в этой заметке. Структура базового документа для работы достаточна проста.

Установка Bootstrap


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!— Optional theme —>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css» integrity=»sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r» crossorigin=»anonymous»>

<!— Latest compiled and minified JavaScript —>
<script src=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js» integrity=»sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS» crossorigin=»anonymous»></script>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt 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>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Обратите внимание на описание типа документа, оно должно всегда быть <!doctype html>

Блоку, вмещающему всё содержимое страницы присваивается класс .container или .container-fluid, если нужно содержимое Bootstrap-страницы отобразить на всю ширину.

Для корректного кросс-браузерного отображения используется проект Normalize.css. Он помогает отображать HTML-элементы в соответствии с современными стандартами.

Добавить комментарий