Bootstrap 2.3.2: Посібник із початку роботи

Bootstrap - це Фреймворк CSS що стало дуже популярним у всій мережі. Їх стилі реагувати можна побачити в соціальних мережах Туенті y Twitter. Застосування цього заощаджує нам багато часу при розробці веб-додатків, оскільки це економить усю працю та зусилля, спрямовані на створення чистого стилю сторінки, придатного для всіх пристроїв. Звернувшись до стилів, що використовуються в цій структурі, ми зрозуміємо, що вони нам знайомі, оскільки сьогодні багато веб-сайтів це впровадили.

Структура

Щоб наш веб-сайт був доступний з мобільних телефонів і планшетів, нам доведеться використовувати структуру рідини, яку пропонує нам Bootstrap. Використання цієї структури дуже просте, все базується на елементах span що нам допоможе макет наш веб-дизайн. Пізніше, коли ми отримаємо доступ до цього дизайну з смартфон o таблетка, це автоматично адаптується до зазначеного пристрою, значно покращуючи якість навігації. Ми будемо використовувати span з класами в логічних поділах у структурі рідини, тобто:

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

Де число 2 являє собою розмір прольоту. Кожен рядок містить достатньо місця для 12 прольотів розміру 1 або 2 розміру 6, його можна розподілити як завгодно. Як тільки простір рядка буде перевищено, він автоматично опуститься до наступного, що дозволить нам використовувати span розмір 12 для створення розриву рядка. Якби ми хотіли пропустити деякі span при його створенні, тобто починайте з 4 span, і застосуємо розмір 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