Bootstrap 2.3.2: Баштоо боюнча колдонмо

Bootstrap бул а CSS алкагы бул тармак боюнча абдан популярдуу болуп калды. Алардын стилдери сезгич социалдык тармактарда көрүнүп турат Туенти 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