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

Twitter Bootstrap логотиби

Bootstrap бул а CSS алкагы бул тармак боюнча абдан популярдуу болуп калды. Алардын стилдери сезгич социалдык тармактарда көрүнүп турат Туенти y Twitter. Муну колдонуу веб-тиркемени иштеп чыгууда көп убакытты үнөмдөйт, анткени бардык түзмөктөргө ылайыктуу таза баракча стилин түзүүдө көп эмгекти жана күчтү сарптайт. Ушул алкакта колдонулган стилдерге кайрылып, алардын бизге тааныш экендигин түшүнөбүз, анткени бүгүнкү күндө көптөгөн веб-сайттар аны колдонуп жатышат.

Түзүлүшү

Жүктөө страпынын сүрөтү

Bootstrap Fluid Structures

Вебсайтыбызга уюлдук телефондордон жана планшеттерден кирүү үчүн, 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>

Бул бөлүнүү төрт секирүүгө мүмкүнчүлүк берет жуп өгүзү мазмунун көрсөтүү алдында. Биз муну өз каалообуз боюнча колдонуп, кодубуз менен каалаган нерсебизди өткөрүп жибере алабыз.

Офсеттик класс менен аралыктагы секирик

Офсеттик класс менен аралыктагы секирик

Ар бир шайман үчүн ар кандай дизайн

Bootstrap түзмөктөрү үчүн эксклюзивдүүлүк класстары бар сүрөт

Ар бир шайманды айырмалоо үчүн CSS класстары

Түзмөктүн ар бир түрү боюнча ар кандай дизайнды колдонуу үчүн, ал кайсы шайманга багытталгандыгын, ар бир логикалык бөлүнүштү төмөнкү класстарды колдонуп айтып беребиз:

Ушундайча, биз бир эле URL менен ар бир шайман үчүн таптакыр башка дизайнды көрсөтө алабыз.

баскычтар

Color Buttons

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.   Alejandra ал мындай деди:

    Сизде ушул алкакта дагы окуу куралдары жокпу ???