Bootstrap 2.3.2: Руководство по началу работы

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

Структура

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

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Где число 2 представляет размер пролета. В каждом ряду достаточно места для 12 пролетов размера 1 или 2 размера 6, их можно распределить по своему усмотрению. Как только пространство в строке будет превышено, она автоматически перейдет к следующей, что позволит нам использовать пролет размер 12 для создания разрыва строки. Если бы мы хотели пропустить пролет при создании одного, то есть начинать с 4 пролети применив размер 3, мы будем использовать этот код:

<div class="span2 offset4">Contenido</div>

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

Разный дизайн для каждого устройства

Чтобы применить различную конструкцию для каждого типа устройства, мы расскажем каждому логическому подразделению, на какое устройство оно ориентировано, используя следующие классы:

Таким образом, мы можем показать совершенно разный дизайн для каждого устройства с одним и тем же URL.

кнопки

Bootstrap предлагает нам чистый набор цветных кнопок, его использование очень простое:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

где btn btn-success относится к цвету кнопки, чтобы изменить его, нам нужно только заменить его на классы, показанные на предыдущем изображении.

Установка Bootstrap

Для установки этого CSS-фреймворка мы загрузим zip-архив по ссылке, которую я оставлю в конце сообщения, и напишем следующий код в заголовке нашего HTML файла.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

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

Больше информации - Проверка формы

Скачать - Bootstrap: CSS Framework