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, това може да бъде разпределено както искате. След като пространството на ред бъде надвишено, той автоматично ще се понижи до следващия, което ни позволява да използваме a педя размер 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