Bootstrap е CSS рамка , която стана изключително популярна в мрежата. Нейните адаптивни стилове са често срещана функция в социални мрежи като Tuenti и Twitter . Използването ѝ спестява значително време при разработването на уеб приложение, тъй като елиминира работата и усилията, необходими за създаването на изчистен стил на страницата, подходящ за всички устройства. Разглеждайки стиловете, използвани в тази рамка, ще ги намерите познати, тъй като много уебсайтове са я внедрили.
Структурата
Структура на течността Bootstrap
За да направим уебсайта си достъпен от мобилни телефони и таблети, ще трябва да използваме флуидната структура, предлагана от Bootstrap. Използването на тази структура е много просто; всичко е базирано на span елементи , които ни помагат да оформим уеб дизайна си. След това, когато достъпваме този дизайн от смартфон или таблет , той автоматично ще се адаптира към това устройство, значително подобрявайки сърфирането. Ще използваме spans с класове в логически разделения в рамките на флуидната структура, а именно:
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
Където числото 2 представлява размера на диапазона. Всеки ред съдържа достатъчно място за 12 диапазона с размер 1 или 2 диапазона с размер 6; можете да ги разпределите както желаете. След като пространството за даден ред бъде превишено, той автоматично ще се премести надолу към следващия ред, което ни позволява да използваме диапазон с размер 12, за да създадем прекъсване на реда. Ако искаме да пропуснем диапазон при създаването му, тоест да започнем от 4-ия диапазон и да приложим размер 3, ще използваме следния код:
<div class="span2 offset4">Contenido</div>
Това позволява на делението да пропусне четири интервала, преди да покаже съдържанието. Можем да използваме това свободно, като пропускаме каквото искаме с нашия код.
Пропускане на обхвата с отместващия клас
Различен дизайн за всяко устройство
CSS класове за разграничаване на всяко устройство
За да приложим различен дизайн за всеки тип устройство, ние ще кажем на всяко логическо разделение, за кое устройство е ориентирано, като използваме следните класове:
По този начин можем да покажем напълно различен дизайн за всяко устройство с един и същ URL адрес.
копчета
Списък с бутони, предлагани от Bootstrap
Bootstrap ни предлага изчистен репертоар от цветни бутони, използването му е много просто:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
където btn btn-success се отнася до цвета на бутона, за да го променим, ще трябва само да го заменим с класовете, показани на предишното изображение.
Инсталиране на Bootstrap
За да инсталираме тази CSS рамка, ще изтеглим zip файла от линка, който ще оставя в края на публикацията, и ще напишем следния код в секцията head на нашия 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 рамка