Bootstrap 2.3.2: Ръководство за начало

Лого на Twitter Bootstrap

Bootstrap е CSS рамка който стана много популярен в мрежата. Техните стилове отзивчив се виждат в социалните мрежи Tuenti y Twitter. Използването на това ни спестява много време при разработването на уеб приложение, тъй като ни спестява цялата работа и усилия, свързани с създаването на изчистен стил на страницата, подходящ за всички устройства. Консултирайки се със стиловете, използвани в тази рамка, ще разберем, че те са ни познати, тъй като днес много уебсайтове са го внедрили.

Структурата

Изображение на структурата на Bootstrap

Структура на течността Bootstrap

За да бъде нашият уебсайт достъпен от мобилни устройства и таблети, ще трябва да използваме флуидната структура, която ни предлага 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>

Това позволява на дивизията да скочи четири педи преди показване на съдържанието. Можем да използваме това по наше желание, пропускайки това, което искаме с нашия код.

Пропускане на обхвата с отместващия клас

Пропускане на обхвата с отместващия клас

Различен дизайн за всяко устройство

Изображение с класове на изключителност за Bootstrap устройства

CSS класове за разграничаване на всяко устройство

За да приложим различен дизайн за всеки тип устройство, ние ще кажем на всяко логическо разделение, за кое устройство е ориентирано, като използваме следните класове:

По този начин можем да покажем напълно различен дизайн за всяко устройство с един и същ URL адрес.

копчета

Цветни бутони

Списък с бутони, предлагани от Bootstrap

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


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

Коментар, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван.

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Алехандра каза той

    Нямате повече уроци по тази рамка ???