Bootstrap

Негізгі CSS

Негізгі HTML элементтері кеңейтілетін сыныптармен стильдендірілген және жақсартылған.

Типография

Тақырыптар

Барлық HTML тақырыптары <h1>қолжетімді <h6>.

h1. Тақырып 1

h2. Тақырып 2

h3. Тақырып 3

h4. Тақырып 4

h5. Тақырып 5
h6. 6-тақырып

Негізгі көшірме

Bootstrap ғаламдық әдепкі font-sizeмәні 14px , 20pxline-height . Бұл және барлық абзацтарға қолданылады. Сонымен қатар, (параграфтар) жол биіктігінің жартысының төменгі жиегін алады (әдепкі бойынша 10 пиксель).<body><p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Көлік құралын пайдалану мүмкін емес.

Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Doec id elit non mi porta gravida және eget metus. Дүние моллис, est commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

Негізгі корпустың көшірмесі

Қосу арқылы абзацты ерекшелендіріңіз .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p сынып = "лид" > ... </p>

Аз салынған

Типографиялық шкала айнымалылардағы екі LESS айнымалысына негізделген.less : @baseFontSizeжәне @baseLineHeight. Біріншісі - бүкіл қолданылатын негізгі қаріп өлшемі, екіншісі - негізгі жолдың биіктігі. Біз осы айнымалы мәндерді және кейбір қарапайым математиканы барлық түріміздің жиектерін, толтырғыштарын және жол биіктігін және т.б. жасау үшін қолданамыз. Оларды теңшеңіз және Bootstrap бейімделеді.

Акцент

Жеңіл стильдері бар HTML әдепкі екпін тегтерін пайдаланыңыз.

<small>

Кірістірілген немесе мәтін блоктарының екпінін жою үшін шағын тегті пайдаланыңыз.

Мәтіннің бұл жолы жақсы басып шығару ретінде қарастырылады.

<p> <small> Бұл мәтін жолы жақсы басып шығару ретінде қарастырылады. </small> </p>

Қалың

Қаріптің салмағы ауыр мәтін үзіндісін ерекшелеу үшін.

Мәтіннің келесі үзіндісі қалың мәтін түрінде берілген .

<strong> қалың мәтін </strong> түрінде берілген

курсив

Мәтін үзіндісін курсивпен ерекшелеу үшін.

Мәтіннің келесі үзіндісі курсив мәтін ретінде көрсетіледі .

<em> курсивпен жазылған мәтін </em> ретінде көрсетілген

Ескерту!HTML5 <b>- те қолдануға болады. Бұл қосымша маңыздылықсыз сөздерді немесе сөз тіркестерін ерекшелеуге арналған, ал көбінесе дауыс, техникалық терминдер және т.б.<i><b><i>

Теңестіру кластары

Мәтінді туралау сыныптары бар құрамдастарға мәтінді оңай қайта реттеңіз.

Солға реттелген мәтін.

Ортасына тураланған мәтін.

Оңға реттелген мәтін.

  1. <p сынып = "мәтін-солға" > Солға реттелген мәтін. </p> 
  2. <p class = "text-center" > Ортасына тураланған мәтін. </p> 
  3. <p class = "text-right" > Оңға реттелген мәтін. </p>

Акцент сабақтары

Түс арқылы мағынаны бірнеше екпін пайдалы сыныптары арқылы жеткізіңіз.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

  1. <p сынып = "үнсіз" > Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. </p> 
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
  3. <p class = "text-error" > Doec ullamcorper nulla non metus auctor fringilla. </p> 
  4. <p class = "text-info" > Aenean eu leo ​​quam. Pelentesque ornare sem lacinia quam venenatis. </p> 
  5. <p class = "text-sccess" > Дүние жүзілік, бұл қарапайым емес, жақсы порттитор ligula. </p>

Қысқартулар

<abbr>Меңзердегі кеңейтілген нұсқаны көрсету үшін аббревиатуралар мен аббревиатуралар үшін HTML элементінің стильдендірілген орындалуы . Атрибуттары бар аббревиатураларда titleашық нүктелі төменгі жиек және меңзерді жылжытқанда қосымша контекстті қамтамасыз ететін анықтама курсоры болады.

<abbr>

Аббревиатураның ұзақ меңзеріндегі кеңейтілген мәтін үшін titleтөлсипатты қосыңыз.

Атрибут сөзінің аббревиатурасы - attr .

<abbr title = "атрибут" > аттр </abbr>

<abbr class="initialism">

.initialismҚаріп өлшемін сәл кішірек ету үшін аббревиатураға қосыңыз .

HTML тілімделген наннан кейінгі ең жақсы нәрсе.

<abbr title = "Гипермәтінді белгілеу тілі" класс = "инициализм" > HTML </abbr>

Мекенжайлар

Ең жақын ата-баба немесе бүкіл жұмыс тобы үшін байланыс ақпаратын көрсетіңіз.

<address>

Барлық жолдарды -мен аяқтау арқылы пішімдеуді сақтаңыз <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Толық аты
[email protected] 
  1. <адрес>
  2.   <strong> Twitter, Inc. </strong><br>
  3.   Фолсом даңғылы 795, люкс 600 <br>
  4.   Сан-Франциско, CA 94107 <br>
  5.   <abbr title = "Телефон" > P: </abbr> (123) 456-7890 
  6. </address>
  7.  
  8. <адрес>
  9.   <strong> Толық аты-жөні </strong><br>
  10.   <a href = "mailto:#" > [email protected] </a> 
  11. </address>

Тырнақшалар

Құжатта басқа көзден алынған мазмұн блоктарын цитаталау үшін.

Әдепкі блок дәйексөз

<blockquote>Кез келген HTML -ді дәйексөз ретінде орап алыңыз . Тікелей тырнақшалар үшін біз <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз. </p>
  3. </blockquote>

Блоктау опциялары

Стандартты блок тырнақшадағы қарапайым вариациялар үшін мәнер мен мазмұн өзгереді.

Дереккөзді атау

<small>Дереккөзді анықтау үшін тег қосыңыз . Дереккөз жұмысының атын ораңыз <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз. </p>
  3.   <small> Белгілі біреу <cite title = "Дереккөз атауы" > Дереккөздің атауы </cite></small> 
  4. </blockquote>

Баламалы дисплейлер

.pull-rightҚалқымалы, оң жаққа тураланған блок тырнақша үшін пайдаланыңыз .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүтін санды орындаңыз.

Source Title бойынша танымал біреу 
  1. <blockquote класс = "оңға тарту" > 
  2.   ...
  3. </blockquote>

Тізімдер

Ретсіз

Тапсырыс анық маңызды емес элементтер тізімі.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Массадағы бүтін molestie lorem
  • Pretium nisl aliquet ішіндегі жеңілдету
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Іріңді сода
    • Vestibulum laoreet porttitor sem
    • Тіріссіз еркіндікке ие болыңыз
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul>
  2.   <li> ... </li>
  3. </ul>

Тапсырыс берілді

Тапсырыс анық маңызды болатын элементтер тізімі .

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Массадағы бүтін molestie lorem
  4. Pretium nisl aliquet ішіндегі жеңілдету
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  1. <ol>
  2.   <li> ... </li>
  3. </ol>

Стильсіз

Тізім элементтеріндегі әдепкі list-styleжәне сол жақ толтыруды алып тастаңыз (тек тікелей балалар үшін).

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Массадағы бүтін molestie lorem
  • Pretium nisl aliquet ішіндегі жеңілдету
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Іріңді сода
    • Vestibulum laoreet porttitor sem
    • Тіріссіз еркіндікке ие болыңыз
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. <ul class = "стильсіз" > 
  2.   <li> ... </li>
  3. </ul>

Кезекте

Барлық тізім элементтерін inline-blockжеңіл толтырғышпен бір жолға орналастырыңыз.

  • Lorem ipsum
  • Phasellus iaculis
  • Жоқ
  1. <ul class = "inline" > 
  2.   <li> ... </li>
  3. </ul>

Сипаттама

Олармен байланысты сипаттамалары бар терминдер тізімі.

Сипаттама тізімдері
Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Doec id elit non mi porta gravida және eget metus.
Малесуада порта
Etiam porta sem malesuada magna mollis euismod. 
  1. <dl>
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Көлденең сипаттама

Терминдер мен сипаттамаларды <dl>қатарға орналастырыңыз.

Сипаттама тізімдері
Сипаттама тізімі терминдерді анықтау үшін өте қолайлы.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Doec id elit non mi porta gravida және eget metus.
Малесуада порта
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
  1. <dl класс = "dl-көлденең" > 
  2.   <dt> ... </dt>
  3.   <dd> ... </dd>
  4. </dl>

Ескерту!Көлденең сипаттама тізімдері сол жақ баған түзетуіне сыймайтын тым ұзын терминдерді қысқартады text-overflow. Тар көрініс порттарында олар әдепкі жинақталған орналасуға өзгереді.

Код

Кезекте

Кодтың кірістірілген үзінділерін арқылы ораңыз <code>.

Мысалы, <section>кірістірілген ретінде оралу керек. 
  1. Мысалы , <code > & lt ; бөлімі & gt ;</ code > кірістірілген ретінде оралуы керек .

Негізгі блок

<pre>Кодтың бірнеше жолы үшін пайдаланыңыз . Дұрыс көрсету үшін кодтағы кез келген бұрыштық жақшалардан құтылуды ұмытпаңыз.

<p>Үлгі мәтін осында...</p>
  1. <алдын ала>
  2.   <p>Үлгі мәтін осында...</p>
  3. </pre>

Ескерту!<pre>Тегтердегі кодты мүмкіндігінше солға жақын ұстауды ұмытпаңыз ; ол барлық қойындыларды көрсетеді.

.pre-scrollableСіз 350 пиксель максимум биіктігін орнататын және у осінің айналдыру жолағын қамтамасыз ететін сыныпты қосуға болады.

Кестелер

Әдепкі мәнерлер

.tableНегізгі сәндеу үшін — жеңіл төсеу және тек көлденең бөлгіштер — кез келгенге негізгі сыныпты қосыңыз <table>.

# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter 
  1. <кесте класы = "кесте" > 
  2.   …
  3. </кесте>

Қосымша сабақтар

.tableНегізгі сыныпқа келесі сыныптардың кез келгенін қосыңыз .

.table-striped

<tbody>CSS селекторы арқылы кез келген кесте жолына зебра :nth-childжолағын қосады (IE7-8 нұсқасында жоқ).

# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter 
  1. <кесте класы = "кесте жолақты кесте" > 
  2.   …
  3. </кесте>

.table-bordered

Үстелге жиектер мен дөңгелек бұрыштарды қосыңыз.

# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
белгі Отто @getbootstrap
2 Джейкоб Торнтон @май
3 Ларри құс @twitter 
  1. <кесте класы = "кестемен жиектелген" > 
  2.   …
  3. </кесте>

.table-hover

ішінде кесте жолдарында меңзер күйін қосыңыз <tbody>.

# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter 
  1. <кесте класы = "үстел үстелін жылжыту" > 
  2.   …
  3. </кесте>

.table-condensed

Ұяшық төсеніштерін екіге бөлу арқылы кестелерді ықшам етеді.

# Аты Тек Пайдаланушы аты
1 белгі Отто @mdo
2 Джейкоб Торнтон @май
3 Ларри құс @twitter 
  1. <кесте класы = "кесте-конденсацияланған кесте" > 
  2.   …
  3. </кесте>

Қосымша қатар кластары

Кесте жолдарын бояу үшін мәтінмәндік сыныптарды пайдаланыңыз.

Сынып Сипаттама
.success Сәтті немесе оң әрекетті көрсетеді.
.error Қауіпті немесе ықтимал теріс әрекетті көрсетеді.
.warning Назар аударуды қажет ететін ескертуді көрсетеді.
.info Әдепкі стильдерге балама ретінде пайдаланылады.
# Өнім Төлем алынды Күй
1 ТБ - ай сайын 01/04/2012 Бекітілген
2 ТБ - ай сайын 02/04/2012 Қабылданбады
3 ТБ - ай сайын 03/04/2012 Күтуде
4 ТБ - ай сайын 04.04.2012 Растау үшін қоңырау шалыңыз 
  1. ...
  2.   < tr класс = "табыс" >
  3.     <td> 1 < /td>
  4.     <td>ТБ - Ай сайын</ td >
  5.     <td> 01 / 04 / 2012 < /td>
  6.     <td>Бекітілді</ td >
  7.   </ tr >
  8. ...

Қолдау көрсетілетін кестені белгілеу

Қолдау көрсетілетін кесте HTML элементтерінің тізімі және оларды қалай пайдалану керек.

Тег Сипаттама
<table> Деректерді кестелік форматта көрсетуге арналған орау элементі
<thead> <tr>Кесте бағандарын белгілеу үшін кесте тақырыбы жолдарына ( ) арналған контейнер элементі
<tbody> <tr>Кестенің негізгі мәтініндегі кесте жолдарына ( ) арналған контейнер элементі
<tr> Бір жолда пайда болатын кесте ұяшықтарының ( <td>немесе ) жиынына арналған контейнер элементі<th>
<td> Әдепкі кесте ұяшығы
<th> Баған (немесе жол, аумақ пен орналастыруға байланысты) белгілерге арналған арнайы кесте ұяшығы
<caption> Кестенің сипаттамасы немесе қысқаша мазмұны, әсіресе экраннан оқу құралдары үшін пайдалы 
  1. <кесте>
  2.   <caption> ... </caption>
  3.   <thead>
  4.     <tr>
  5.       <th> ... </th>
  6.       <th> ... </th>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td> ... </td>
  12.       <td> ... </td>
  13.     </tr>
  14.   </tbody>
  15. </кесте>

Пішіндер

Әдепкі мәнерлер

Жеке пішінді басқару элементтері мәнерді алады, бірақ ешқандай қажетті негізгі сыныпсыз <form>немесе белгілеудегі үлкен өзгерістерсіз. Пішін басқару элементтерінің жоғарғы жағында жинақталған, солға тураланған белгілердің нәтижелері.

Аңыз Мұнда блок деңгейіндегі анықтама мәтінінің мысалы. 
  1. <форма>
  2.   <өріс жинағы>
  3.     <legend> Аңыз </legend>
  4.     <label> Белгі атауы </label>
  5.     <input type = "text" placeholder = "Бірдеңені теріңіз..." >  
  6.     <span class = "help-block" > Мұнда блок деңгейіндегі анықтама мәтінінің мысалы. </span> 
  7.     <label class = "құсбелгі" > 
  8.       <енгізу түрі = "құсбелгі" > Мені тексеріңіз 
  9.     </label>
  10.     <button type = "submit" class = "btn" > Жіберу </button>  
  11.   </fieldset>
  12. </form>

Қосымша орналасулар

Bootstrap бағдарламасына жалпы пайдалану жағдайлары үшін үш қосымша пішін макеттері кіреді.

Іздеу пішіні

Қосымша дөңгелектенген мәтін енгізу үшін пішінге .form-searchжәне пішінге қосыңыз ..search-query<input>

  1. <форма класы = "пішін-іздеу" > 
  2.   <енгізу түрі = «мәтін» класы = «енгізу-орташа іздеу-сұрау» >  
  3.   <button type = "submit" class = "btn" > Search </button>  
  4. </form>

Кірістірілген пішін

.form-inlineЫқшам орналасу үшін солға тураланған белгілерді және кірістірілген блокты басқару элементтерін қосыңыз .

  1. <пішін класы = "кірістірілген пішін" > 
  2.   <енгізу түрі = «мәтін» класы = «енгізу-кіші» толтырғыш = «Электрондық пошта» >   
  3.   <input type = "password" class = "input-small" толтырғышы = "Пароль" >   
  4.   <label class = "құсбелгі" > 
  5.     <енгізу түрі = "құсбелгі" > Мені есте сақта 
  6.   </label>
  7.   <button type = "submit" class = "btn" > Жүйеге кіру </button>  
  8. </form>

Көлденең пішін

Жапсырмаларды оң жаққа туралаңыз және басқару элементтерімен бір жолда пайда болуы үшін оларды солға жылжытыңыз. Әдепкі пішіннен ең көп түзетулерді талап етеді:

  • .form-horizontalПішінге қосыңыз
  • Жапсырмалар мен басқару элементтерін ораңыз.control-group
  • Белгіге .control-labelқосыңыз
  • Кез келген байланысты басқару элементтерін .controlsдұрыс туралау үшін ораңыз
  1. <форма класы = «форма-көлденең» > 
  2.   <div class = "басқару тобы" > 
  3.     <label class = "control-label" for = "inputEmail" > Электрондық пошта </label>  
  4.     <div class = "басқару элементтері" > 
  5.       <input type = "text" id = "inputEmail" толтырғышы = "Электрондық пошта" >   
  6.     </div>
  7.   </div>
  8.   <div class = "басқару тобы" > 
  9.     <label class = "control-label" for = "inputPassword" > Құпия сөз </label>  
  10.     <div class = "басқару элементтері" > 
  11.       <input type = "password" id = "inputPassword" толтырғышы = "Пароль" >   
  12.     </div>
  13.   </div>
  14.   <div class = "басқару тобы" > 
  15.     <div class = "басқару элементтері" > 
  16.       <label class = "құсбелгі" > 
  17.         <енгізу түрі = "құсбелгі" > Мені есте сақта 
  18.       </label>
  19.       <button type = "submit" class = "btn" > Жүйеге кіру </button>  
  20.     </div>
  21.   </div>
  22. </form>

Қолдау көрсетілетін пішін басқару элементтері

Үлгі пішін орналасуында қолдау көрсетілетін стандартты пішін басқару элементтерінің мысалдары.

Кірістері

Ең кең тараған пішінді басқару, мәтінге негізделген енгізу өрістері. Барлық HTML5 түрлерін қолдауды қамтиды: мәтін, құпия сөз, дата-time, datetime-local, күн, ай, уақыт, апта, нөмір, электрондық пошта, url, іздеу, телефон және түс.

typeӘр уақытта көрсетілген пайдалануды талап етеді .

  1. <енгізу түрі = «мәтін» толтырғышы = «Мәтін енгізу» >

Мәтіндік аумақ

Мәтіннің бірнеше жолын қолдайтын пішінді басқару. rowsҚажет болса, төлсипатты өзгертіңіз .

  1. <textarea rows = "3" ></textarea>

Құсбелгілер мен радиолар

Құсбелгілер тізімдегі бір немесе бірнеше опцияларды таңдауға арналған, ал радиолар көптеген опциялардың біреуін таңдауға арналған.

Әдепкі (стектелген)


  1. <label class = "құсбелгі" > 
  2.   <енгізу түрі = "құсбелгі" мәні = "" >  
  3.   Бірінші нұсқа - бұл және басқа - бұл неге керемет екенін міндетті түрде қосыңыз
  4. </label>
  5.  
  6. <белгі класы = "радио" > 
  7.   <енгізу түрі = "радио" атауы = "optionsRadios" id = "optionsRadios1" мәні = "опция1" белгіленді >     
  8.   Бірінші нұсқа - бұл және басқа - бұл неге керемет екенін міндетті түрде қосыңыз
  9. </label>
  10. <белгі класы = "радио" > 
  11.   <енгізу түрі = "радио" атауы = "optionsRadios" id = "optionsRadios2" мәні = "опция2" >    
  12.   Екінші нұсқа басқа нәрсе болуы мүмкін және оны таңдау бірінші опцияны таңдаудан бас тартады
  13. </label>

Кірістірілген құсбелгілер

.inlineБір жолда пайда болатын басқару элементтері үшін сыныпты құсбелгілер қатарына қосыңыз немесе радиолар.

  1. <label class = "inline құсбелгі ұяшығы" > 
  2.   <енгізу түрі = "құсбелгі" id = "inlineCheckbox1" мәні = "опция1 " > 1   
  3. </label>
  4. <label class = "inline құсбелгі ұяшығы" > 
  5.   <енгізу түрі = "құсбелгі" id = "inlineCheckbox2" мәні = "опция2 " > 2   
  6. </label>
  7. <label class = "inline құсбелгі ұяшығы" > 
  8.   <енгізу түрі = "құсбелгі" id = "inlineCheckbox3" мәні = "опция3" > 3   
  9. </label>

Таңдайды

multiple="multiple"Бір уақытта бірнеше опцияны көрсету үшін әдепкі опцияны пайдаланыңыз немесе a көрсетіңіз .


  1. <таңдау>
  2.   <option> 1 </option>
  3.   <option> 2 </option>
  4.   <option> 3 </option>
  5.   <option> 4 </option>
  6.   <option> 5 </option>
  7. </select>
  8.  
  9. <таңдау бірнеше = "бірнеше" > 
  10.   <option> 1 </option>
  11.   <option> 2 </option>
  12.   <option> 3 </option>
  13.   <option> 4 </option>
  14.   <option> 5 </option>
  15. </select>

Пішін басқару элементтерін кеңейту

Бұрыннан бар шолғышты басқару элементтерінің үстіне қосу, Bootstrap басқа пайдалы пішін құрамдастарын қамтиды.

Алдын ала және қосымша кірістер

Кез келген мәтінге негізделген енгізуден бұрын немесе кейін мәтінді немесе түймелерді қосыңыз. selectМұнда элементтерге қолдау көрсетілмейтінін ескеріңіз .

Әдепкі опциялар

Енгізілген мәтінге мәтінді қосу немесе қосу үшін ан және екі класстың бірімен .add-onораңыз .input

@

.00 
  1. <div class = "input-prepend" > 
  2.   <span class = "add-on" > @ </span> 
  3.   <input class = "span2" id = "prependedInput " type = "text" толтырғышы = "Пайдаланушы аты" >    
  4. </div>
  5. <div class = "input-append" > 
  6.   <input class = "span2" id = "appendedInput " type = "text" >   
  7.   <span class = "add-on" > .00 </span> 
  8. </div>

Біріктірілген

.add-onЕнгізуді алдына қою және қосу үшін екі сыныпты және екі данасын пайдаланыңыз.

$ .00 
  1. <div class = "input-prepend input-append" > 
  2.   <span class = "add-on" > $ </span> 
  3.   <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  4.   <span class = "add-on" > .00 </span> 
  5. </div>

Мәтіннің орнына түймелер

<span>Мәтіні бар орнына .btna түймешігін (немесе екі) енгізуге тіркеңіз.

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apppendedInputButton " type = "text" >   
  3.   <button class = "btn" type = "button" > Барыңыз! </button>  
  4. </div>
  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "apppendedInputButtons " type = "text" >   
  3.   <button class = "btn" type = "button" > Іздеу </button>  
  4.   <button class = "btn" type = "button" > Параметрлер </button>  
  5. </div>

Түймелердің ашылмалы тізімдері

  1. <div class = "input-append" > 
  2.   <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  3.   <div class = "btn-group" > 
  4.     <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
  5.       Әрекет
  6.       <span class = "caret" ></span> 
  7.     </button>
  8.     <ul class = "ашылмалы мәзір" > 
  9.       ...
  10.     </ul>
  11.   </div>
  12. </div>
  1. <div class = "input-prepend" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
  4.       Әрекет
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "ашылмалы мәзір" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "prependedDropdownButton " type = "text" >   
  12. </div>
  1. <div class = "input-prepend input-append" > 
  2.   <div class = "btn-group" > 
  3.     <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
  4.       Әрекет
  5.       <span class = "caret" ></span> 
  6.     </button>
  7.     <ul class = "ашылмалы мәзір" > 
  8.       ...
  9.     </ul>
  10.   </div>
  11.   <input class = "span2" id = "appendedPrependedDropdownButton " түрі = "мәтін" >   
  12.   <div class = "btn-group" > 
  13.     <button class = "btn dropdown-toggle" data-toggle = "ашылатын тізім" >  
  14.       Әрекет
  15.       <span class = "caret" ></span> 
  16.     </button>
  17.     <ul class = "ашылмалы мәзір" > 
  18.       ...
  19.     </ul>
  20.   </div>
  21. </div>

Сегменттелген ашылмалы топтар

  1. <форма>
  2.   <div class = "input-prepend" > 
  3.     <div class = "btn-group" > ... </div> 
  4.     <енгізу түрі = «мәтін» > 
  5.   </div>
  6.   <div class = "input-append" > 
  7.     <енгізу түрі = «мәтін» > 
  8.     <div class = "btn-group" > ... </div> 
  9.   </div>
  10. </form>

Іздеу пішіні

  1. <форма класы = "пішін-іздеу" > 
  2.   <div class = "input-append" > 
  3.     <input type = "text" class = "span2 search-query" >  
  4.     <button type = "submit" class = "btn" > Search </button>  
  5.   </div>
  6.   <div class = "input-prepend" > 
  7.     <button type = "submit" class = "btn" > Search </button>  
  8.     <input type = "text" class = "span2 search-query" >  
  9.   </div>
  10. </form>

Өлшемді бақылау

.input-largeКласстарды пайдалана отырып, кірістерді тор баған өлшемдері сияқты салыстырмалы өлшемдерді пайдаланыңыз немесе сәйкестендіріңіз .span*.

Деңгейдегі кірістерді блоктау

Кез келген <input>немесе <textarea>элементтің блок деңгейінің элементі сияқты әрекет етуін жасаңыз.

  1. <енгізу сыныбы = «енгізу блогының деңгейі» түрі = «мәтін» толтырғышы = «.кіріс блогының деңгейі» >

Салыстырмалы өлшемдер

  1. <енгізу сыныбы = «енгізу-мини» түрі = «мәтін» толтырғышы = «.input-mini» >   
  2. <енгізу класы = «енгізу-кіші» түрі = «мәтін» толтырғышы = «.input-small» >   
  3. <енгізу класы = «енгізу ортасы» түрі = «мәтін» толтырғышы = «.input-medium» >   
  4. <енгізу сыныбы = «кіріс-үлкен» түрі = «мәтін» толтырғышы = «.input-large» >   
  5. <input class = "input-xlarge" type = "text" толтырғышы = ".input-xlarge" >   
  6. <input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Ескерту!Болашақ нұсқаларда біз түйме өлшемдеріне сәйкес келетін осы салыстырмалы енгізу сыныптарын пайдалануды өзгертетін боламыз. Мысалы, .input-largeкірістің толтырылуы мен қаріп өлшемін арттырады.

Тор өлшемі

Тор бағандарының бірдей өлшемдеріне сәйкес келетін енгізулер үшін .span1пайдаланыңыз ..span12

  1. <input class = "span1" type = "text" толтырғышы = ".span1" >   
  2. <input class = "span2" type = "text" толтырғышы = ".span2" >   
  3. <input class = "span3" type = "text" толтырғышы = ".span3" >   
  4. < сыныпты таңдау = "span1" > 
  5.   ...
  6. </select>
  7. < сыныпты таңдау = "2 аралықты" > 
  8.   ...
  9. </select>
  10. < сыныпты таңдау = "span3" > 
  11.   ...
  12. </select>

Әр жолға бірнеше тор кірістері үшін дұрыс интервал үшін модификатор сыныбын пайдаланыңыз.controls-row . Ол бос кеңістікті қысқарту үшін кірістерді жылжытады, тиісті жиектерді орнатады және қалқымалы мәнді тазартады.

  1. <div class = "басқару элементтері" > 
  2.   <input class = "span5" type = "text" толтырғышы = ".span5" >   
  3. </div>
  4. <div class = "басқару элементтері-жолды басқару" > 
  5.   <input class = "span4" type = "text" толтырғышы = ".span4" >   
  6.   <input class = "span1" type = "text" толтырғышы = ".span1" >   
  7. </div>
  8. ...

Өңделмейтін кірістер

Деректерді нақты пішін белгілеуін қолданбай өңдеуге болмайтын пішінде ұсыныңыз.

Мұнда кейбір құндылық 
  1. <span class = "input-xlarge uneditable-input" > Мұнда кейбір мән </span>

Пішін әрекеттері

Пішінді әрекеттер тобымен (түймелерімен) аяқтаңыз. a ішіне орналастырылған кезде .form-actions, түймелер пішін басқару элементтеріне сәйкес келу үшін автоматты түрде шегініс жасайды.

  1. <div class = "форма-әрекеттер" > 
  2.   <button type = "submit" class = "btn btn-primary" > Өзгерістерді сақтау </button>  
  3.   <button type = "button" class = "btn" > Болдырмау </button>  
  4. </div>

Анықтама мәтіні

Пішін басқару элементтерінің айналасында пайда болатын анықтама мәтіні үшін кірістірілген және блок деңгейіндегі қолдау.

Кірістірілген анықтама

Кірістірілген анықтама мәтіні 
  1. <input type = "text" ><span class = "help-inline" > Inline анықтама мәтіні </span>

Анықтаманы блоктау

Жаңа жолға бөлінетін және бір жолдан асып кетуі мүмкін анықтама мәтінінің ұзағырақ блогы. 
  1. <input type = "text" ><span class = "help-block" > Жаңа жолға бөлінетін және бір жолдан асып кетуі мүмкін анықтама мәтінінің ұзағырақ блогы. </span>

Пішінді басқару күйлері

Пішін басқару элементтері мен белгілер бойынша негізгі кері байланыс күйлері бар пайдаланушыларға немесе келушілерге кері байланыс беріңіз.

Фокусты енгізу

outlineКейбір пішін басқару элементтеріндегі әдепкі мәнерлерді алып тастаймыз және box-shadowоның орнына a қолданамыз :focus.

  1. <input class = "input-xlarge" id = "focusedInput" type = "text" value = "Бұл бағытталған..." >

Жарамсыз енгізулер

Стильді әдепкі браузер функциясы арқылы енгізеді :invalid. a көрсетіңіз , өріс міндетті емес болса төлсипатты typeқосыңыз requiredжәне (бар болса) көрсетіңіз pattern.

Бұл CSS псевдоселекторларына қолдау көрсетілмегендіктен Internet Explorer 7-9 нұсқаларында қол жетімді емес.

  1. <input class = "span3" type = "электрондық пошта" қажет >

Өшірілген кірістер

disabledПайдаланушы енгізуіне жол бермеу және сәл басқаша көріністі іске қосу үшін кіріске төлсипатты қосыңыз .

  1. <input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "Мына жерде енгізу өшірілген..." өшірілген >

Валидация күйлері

Bootstrap қате, ескерту, ақпарат және сәттілік туралы хабарларды тексеру мәнерлерін қамтиды. Қолдану үшін қоршаған ортаға сәйкес сыныпты қосыңыз .control-group.

Бірдеңе дұрыс болмады
Қатені түзетіңіз
Пайдаланушы аты алынады
Уау! 
  1. <div class = "басқару тобының ескертуі" > 
  2.   <label class = "control-label" for = "inputWarning" > Ескертумен енгізу </label>  
  3.   <div class = "басқару элементтері" > 
  4.     <input type = "text" id = "inputWarning" >  
  5.     <span class = "help-inline" > Бірдеңе дұрыс емес болуы мүмкін </span> 
  6.   </div>
  7. </div>
  8.  
  9. <div class = "басқару тобының қатесі" > 
  10.   <label class = "control-label" for = "inputError" > Қате бар енгізу </label>  
  11.   <div class = "басқару элементтері" > 
  12.     <енгізу түрі = "мәтін" id = "inputError" >  
  13.     <span class = "help-inline" > Қатені түзетіңіз </span> 
  14.   </div>
  15. </div>
  16.  
  17. <div класс = "басқару тобының ақпараты" > 
  18.   <label class = "control-label" for = "inputInfo" > Ақпаратпен енгізу </label>  
  19.   <div class = "басқару элементтері" > 
  20.     <енгізу түрі = "мәтін" id = "inputInfo" >  
  21.     <span class = "help-inline" > Пайдаланушы аты әлдеқашан алынған </span> 
  22.   </div>
  23. </div>
  24.  
  25. <div class = "басқару тобының табысы" > 
  26.   <label class = "control-label" for = "inputSuccess" > Сәтті енгізу </label>  
  27.   <div class = "басқару элементтері" > 
  28.     <енгізу түрі = "мәтін" id = "inputSuccess" >  
  29.     <span class = "inline анықтамасы" > Woohoo! </span> 
  30.   </div>
  31. </div>

Түймелер

Әдепкі түймелер

.btnТүйме мәнерлерін класс қолданылған кез келген нәрсеге қолдануға болады. Дегенмен, әдетте ең жақсы көрсету үшін оларды тек <a>және элементтерге қолданғыңыз келеді .<button>

Түйме class="" Сипаттама
btn Градиентті стандартты сұр түйме
btn btn-primary Қосымша көрнекі салмақты қамтамасыз етеді және түймелер жинағындағы негізгі әрекетті анықтайды
btn btn-info Әдепкі стильдерге балама ретінде пайдаланылады
btn btn-success Сәтті немесе оң әрекетті көрсетеді
btn btn-warning Бұл әрекетке абай болу керектігін көрсетеді
btn btn-danger Қауіпті немесе ықтимал теріс әрекетті көрсетеді
btn btn-inverse Семантикалық әрекетке немесе қолдануға байланысты емес балама қою сұр түйме
btn btn-link Түйменің әрекетін сақтай отырып, оны сілтеме сияқты етіп көрсету арқылы оның екпінін азайтыңыз

Кросс браузер үйлесімділігі

IE9 дөңгеленген бұрыштардағы фон градиенттерін қимайды, сондықтан біз оны алып тастаймыз. Қатысты, IE9 өшірілген buttonэлементтерді жаңартып, мәтінді сұр етіп, біз түзете алмайтын жағымсыз мәтіндік көлеңкемен көрсетеді.

Түймелердің өлшемдері

Үлкенірек немесе кішірек түймелерді ұнатасыз ба? Қосымша өлшемдер үшін .btn-large, .btn-small, немесе қосыңыз ..btn-mini

  1. <p>
  2.   <button class = "btn btn-large btn-primary" type = "button" > Үлкен түйме </button>  
  3.   <button class = "btn btn-large" type = "button" > Үлкен түйме </button>  
  4. </p>
  5. <p>
  6.   <button class = "btn btn-primary" type = "button" > Әдепкі түйме </button>  
  7.   <button class = "btn" type = "button" > Әдепкі түйме </button>  
  8. </p>
  9. <p>
  10.   <button class = "btn btn-small btn-primary" type = "button" > Шағын түйме </button>  
  11.   <button class = "btn btn-small" type = "button" > Кіші түйме </button>  
  12. </p>
  13. <p>
  14.   <button class = "btn btn-mini btn-primary" type = "button" > Шағын түйме </button>  
  15.   <button class = "btn btn-mini" type = "button" > Шағын түйме </button>  
  16. </p>

Қосу арқылы блок деңгейінің түймелерін жасаңыз - ата-ананың толық енін қамтитын түймелер .btn-block.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Блок деңгейі түймесі </button>  
  2. <button class = "btn btn-large btn-block" type = "button" > Блок деңгейі түймесі </button>

Өшірілген күй

Түймелерді 50% артқа түсіру арқылы оларды басылмайтын етіп көрсетіңіз.

Анкерлік элемент

Түймешіктерге .disabledсыныпты қосыңыз .<a>

Негізгі сілтеме Сілтеме 

  1. <a href = "#" class = "btn btn-large btn-primary disabled" > Негізгі сілтеме </a>  
  2. <a href = "#" class = "btn btn-large disabled" > Сілтеме </a>

Ескерту!Біз .disabledмұнда кәдімгі сыныпқа ұқсас қызметтік сынып ретінде қолданамыз .active, сондықтан ешқандай префикс қажет емес. Сондай-ақ, бұл сынып тек эстетикалық; мұнда сілтемелерді өшіру үшін пайдаланушы JavaScript пайдалану керек.

Түйме элементі

Түймешіктерге disabledатрибут қосыңыз .<button>

  1. <button type = "button" class = "btn btn-large btn-primary disabled" disabled = "disabled" > Негізгі түйме </button>   
  2. <button type = "button" class = "btn btn-large" өшірілген > Түйме </button>

Бір класс, бірнеше тегтер

.btnСыныпты <a>, <button>, немесе <input>элементте пайдаланыңыз .

Сілтеме 
  1. <a class = "btn" href = "" > Сілтеме </a>  
  2. <button class = "btn" type = "жіберу" > Түйме </button>  
  3. <енгізу класы = "btn" түрі = "түйме" мәні = "Кіріс" >   
  4. <енгізу сыныбы = "btn" түрі = "жіберу" мәні = "Жіберу" >

Ең жақсы тәжірибе ретінде, браузерлер арасындағы сәйкестікті қамтамасыз ету үшін мәтінмәнге арналған элементті сәйкестендіруге тырысыңыз. Егер сізде болса input, <input type="submit">түймені пайдаланыңыз.

Суреттер

<img>Кез келген жобадағы кескіндерді оңай стильдеу үшін элементке сыныптарды қосыңыз .

140x140 140x140 140x140 
  1. <img src = "..." class = "img-дөңгелектелген" >  
  2. <img src = "..." class = "img-circle" >  
  3. <img src = "..." класс = "img-polaroid" >

Ескерту! .img-roundedжәне қолдаудың .img-circleболмауына байланысты IE7-8-де жұмыс істемейді border-radius.

Глифондар бойынша белгішелер

Белгіше глифтері

Спрайт түріндегі 140 белгіше, қара сұр (әдепкі) және ақ түсте қолжетімді, Glyphicons қамтамасыз етеді .

  • белгіше-әйнек
  • белгіше-музыка
  • белгіше-іздеу
  • белгіше-конверт
  • белгіше-жүрек
  • белгіше-жұлдыз
  • белгіше-жұлдыз-бос
  • белгішесі-пайдаланушы
  • белгіше-фильм
  • үлкен белгіше
  • белгішесі-th
  • белгіше-тізім
  • белгішесі-жарайды
  • белгішесі-жою
  • белгішесін үлкейту
  • белгішесін кішірейту
  • белгішесі өшірулі
  • белгіше-сигнал
  • белгіше-тісті
  • белгішесі-қоқыс
  • белгішесі-үй
  • белгіше-файл
  • белгіше уақыты
  • белгіше-жол
  • icon-download-alt
  • белгішесі-жүктеу
  • белгішесі-жүктеп салу
  • белгішесі-кіріс жәшігі
  • белгіше-ойнату-шеңбері
  • белгішесі-қайталау
  • белгішесін жаңарту
  • icon-list-alt
  • белгіше-құлыптау
  • белгіше-жалау
  • иконка-құлаққаптар
  • белгіше-дыбыс өшіру
  • белгішесі-дыбысты азайту
  • белгішенің дыбыс деңгейін арттыру
  • белгішесі-qrcode
  • белгішесі-штрих-код
  • белгіше-тег
  • белгіше-тегтер
  • икон-кітап
  • белгіше-бетбелгі
  • белгішесін басып шығару
  • белгіше-камера
  • белгіше-қаріп
  • белгішесі қалың
  • белгіше-курсив
  • белгіше-мәтін-биіктігі
  • белгіше-мәтін-ені
  • белгішесін-туралау-солға
  • белгішені туралау орталығы
  • белгішесін-туралау-оңға
  • белгіше-туралау-негіздеу
  • белгішелер тізімі
  • белгіше-шегініс-солға
  • белгіше-шегініс-оңға
  • белгішесі-facetime-бейне
  • белгіше-сурет
  • белгіше-қарындаш
  • белгіше-карта-маркер
  • белгішесін реттеу
  • белгіше реңі
  • белгішесін өңдеу
  • белгішені бөлісу
  • белгіше-тексеру
  • белгішесін жылжыту
  • белгішесі-қадам-артқа
  • белгішесі-жылдам-артқа
  • белгішесі-артқа
  • белгішесін ойнату
  • белгішесі-үзіліс
  • белгішесі-тоқтату
  • белгішесін алға жылжыту
  • белгішесі-жылдам алға
  • белгішесі-алға
  • белгішесін шығару
  • белгішесі-шеврон-солға
  • белгішесі-шеврон-оң жақ
  • белгішесі-плюс-белгісі
  • белгіше-минус-белгісі
  • белгішесі-жою-белгісі
  • белгішесі-ок-белгісі
  • белгіше-сұрақ белгісі
  • белгіше-ақпарат-белгісі
  • белгіше-скриншот
  • белгішесін-жою-шеңберін
  • белгішесі-ок-шеңбер
  • белгішеге тыйым салу шеңбері
  • белгіше-көрсеткі-солға
  • белгіше-көрсеткі-оңға
  • белгішесі-жоғары
  • белгішесі-төмен көрсеткі
  • белгіше-бөліс-алт
  • белгіше өлшемін өзгерту-толық
  • белгіше-өлшемін-кіші
  • белгішесі-плюс
  • белгішесі-минус
  • белгіше-жұлдызша
  • белгіше-леп белгісі
  • белгіше-сыйлық
  • белгіше-жапырақ
  • белгіше-от
  • белгішесі-көз-ашық
  • белгішесі-көз-жабу
  • белгіше-ескерту белгісі
  • белгіше-жазықтық
  • белгіше-күнтізбе
  • белгішесі-кездейсоқ
  • белгіше-түсініктеме
  • белгіше-магнит
  • белгішесі-шеврон-жоғары
  • белгішесі-шеврон-төмен
  • белгішесі-ретвит
  • белгіше-сатып алу-себет
  • белгіше-қалта-жабу
  • белгіше-қалта-ашық
  • белгіше-өлшемін өзгерту-тік
  • белгіше-өлшемін өзгерту-көлденең
  • белгішесі-hdd
  • белгіше-бука
  • белгіше-қоңырау
  • белгіше-сертификат
  • белгішесі-бас бармақ
  • белгішесі-бас бармақ-төмен
  • белгішесі-қол-оң
  • белгішесі-сол жақ
  • белгішесін көтеру
  • белгішесі-төмен
  • белгіше-шеңбер-көрсеткі-оңға
  • белгіше-шеңбер-көрсеткі-солға
  • белгіше-шеңбер-жоғары көрсеткі
  • белгіше-шеңбер-төмен көрсеткі
  • белгіше-глобус
  • белгіше кілті
  • белгіше-тапсырмалар
  • белгіше-сүзгі
  • белгіше-портфель
  • белгішесі-толық экран

Глифондардың атрибуты

Glyphicons Halflings әдетте тегін қол жетімді емес, бірақ Bootstrap және Glyphicons жасаушылары арасындағы келісім оны әзірлеушілер ретінде сізге ақысыз мүмкіндік берді. Рахмет ретінде сізден қажет болған жағдайда Glyphicons қолданбасына қосымша сілтеме қосуыңызды сұраймыз .

Қалай пайдалануға болады

Барлық белгішелер <i>префиксі бар бірегей класы бар тегті қажет етеді icon-. Пайдалану үшін келесі кодты кез келген жерге орналастырыңыз:

  1. <i class = "icon-search" ></i>

Сондай-ақ, бір қосымша сыныппен дайын инверттелген (ақ) белгішелер үшін қол жетімді стильдер бар. Біз бұл сыныпты шарлау және ашылмалы сілтемелер үшін меңзерді жылжыту және белсенді күйлерге арнайы енгіземіз.

  1. <i class = "icon-search icon-white" ></i>

Ескерту!<i>Түймешіктердегі немесе шарлау сілтемелеріндегідей мәтін жолдарының жанында пайдаланған кезде, дұрыс аралық үшін тегтен кейін бос орын қалдыруды ұмытпаңыз .

Белгіше мысалдары

Оларды түймелерде, құралдар тақтасы үшін түймелер топтарында, шарлау немесе алдын ала берілген пішін енгізулерінде пайдаланыңыз.

Түймелер

Түймелердің құралдар тақтасындағы түймелер тобы
  1. <div класс = "btn-құралдар тақтасы" > 
  2.   <div class = "btn-group" > 
  3.     <a class = "btn" href = "#" ><i class = "icon-align-left" ></i></a>   
  4.     <a class = "btn" href = "#" ><i class = "icon-align-center" ></i></a>   
  5.     <a class = "btn" href = "#" ><i class = "icon-align-right" ></i></a>   
  6.     <a class = "btn" href = "#" ><i class = "icon-align-justify" ></i></a>   
  7.   </div>
  8. </div>
Түйме тобындағы ашылмалы тізім
Пайдаланушы 
  1. <div class = "btn-group" > 
  2.   <a class = "btn btn-primary" href = "#" ><i class = "icon-user icon-white" ></i> Пайдаланушы </a>   
  3.   <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#" ><span class = "caret" ></span></a>    
  4.   <ul class = "ашылмалы мәзір" > 
  5.     <li><a href = "#" ><i class = "icon-pencil" ></i> Өңдеу </a></li>  
  6.     <li><a href = "#" ><i class = "icon-trash" ></i> Жою </a></li>  
  7.     <li><a href = "#" ><i class = "icon-ban-circle" ></i> Тыйым салу </a></li>  
  8.     <li класс = "бөлгіш" ></li> 
  9.     <li><a href = "#" ><i class = "i" ></i> Әкімші жасау </a></li>  
  10.   </ul>
  11. </div>
Түймелердің өлшемдері
Жұлдыз Жұлдыз Жұлдыз 
  1. <a class = "btn btn-large" href = "#" ><i class = "icon-star" ></i> Жұлдызша </a>   
  2. <a class = "btn btn-small" href = "#" ><i class = "icon-star" ></i> Жұлдызша </a>   
  3. <a class = "btn btn-mini" href = "#" ><i class = "icon-star" ></i> Жұлдызша </a>

Навигация

  1. <ul class = "nav nav-list" > 
  2.   <li class = "active" ><a href = "#" ><i class = "icon-home icon-white" >></i> Негізгі </a></li>   
  3.   <li><a href = "#" ><i class = "icon-book" ></i> Кітапхана </a></li>  
  4.   <li><a href = "#" ><i class = "icon-pencil" ></i> Қолданбалар </a></li>  
  5.   <li><a href = "#" ><i class = "i" >> </i> Басқа </a></li>  
  6. </ul>

Пішін өрістері

  1. <div class = "басқару тобы" > 
  2.   <label class = "control-label" for = "inputIcon" > Электрондық пошта мекенжайы </label>  
  3.   <div class = "басқару элементтері" > 
  4.     <div class = "input-prepend" > 
  5.       <span class = "add-on" ><i class = "icon-convelope" ></i></span>  
  6.       <input class = "span2" id = "inputIcon" type = "text" >   
  7.     </div>
  8.   </div>
  9. </div>