Намунаҳои оғози зуд

Ба баъзе қолабҳои зуд ниёз доред? Ин мисолҳои асосиро, ки мо ҷамъ овардаем, санҷед:

Шабакаи пешфарз

Системаи пешфарз шабакаи пешфарз, ки ҳамчун як қисми Bootstrap пешниҳод шудааст, шабакаи 16-сутуни васеъаш 940px мебошад. Ин мазза аз системаи маъмули шабакаи 960 аст, аммо бидуни маржа/паҳнкунии иловагӣ дар паҳлӯҳои чап ва рост.

Намунаи аломатгузории шабака

Тавре ки дар ин ҷо нишон дода шудааст, тарҳбандии асосиро бо ду "сутун" сохтан мумкин аст, ки ҳар кадоми онҳо як қатор 16 сутуни бунёдиро дар бар мегиранд, ки мо ҳамчун як қисми системаи шабакаи мо муайян кардем. Барои вариантҳои бештар ба мисолҳои зер нигаред.

<div class = "сатр" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Сутунҳои лона

.rowДар дохили сутуни мавҷуда мундариҷаи худро ҷойгир кунед, агар лозим бошад .

Намунаи сутунҳои лона гузошташуда

<div class = "сатр" > 
  <div class = "span12" > 
    Сатҳи 1 сутун
    <div class = "сатр" > 
      <div class = "span6" > 
        Сатҳи 2
      </div>
      <div class = "span6" > 
        Сатҳи 2
      </div>
    </div>
  </div>
</div>

Шабакаи шахсии худро ғелонед

Дар Bootstrap як қатор тағирёбандаҳо барои танзими системаи пешфарзии шабакаи 940px сохта шудаанд. Бо каме мутобиқсозӣ, шумо метавонед андозаи сутунҳо, ҷӯйборҳои онҳо ва контейнере, ки дар онҳо зиндагӣ мекунанд, тағир диҳед.

Дар дохили шабака

Тағйирёбандаҳое, ки барои тағир додани системаи шабака заруранд, дар айни замон ҳама дар preboot.less.

Акнун барои танзим

Тағир додани шабака маънои тағир додани се @grid-*тағирёбанда ва дубора тартиб додани файлҳои Less мебошад.

Bootstrap барои идора кардани системаи шабакавӣ бо то 24 сутун муҷаҳҳаз шудааст; пешфарз ҳамагӣ 16 аст. Ин аст, ки чӣ тавр тағирёбандаҳои шабакаи шумо ба шабакаи 24-сутунӣ мутобиқ карда мешаванд.

@gridСутунҳо : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Пас аз дубора тартиб додан, шумо муқаррар карда мешавед!

Тарҳбандии собит

Тарҳбандии пешфарз ва соддаи 940px-и васеъ, мутамарказ барои ҳама гуна вебсайт ё саҳифае, ки аз ҷониби як <div.container>.

<бадан>
  <div class = "контейнер" > 
    ...
  </div>
</body>

Тарҳбандии моеъ

Сохтори саҳифаи моеъи алтернативӣ бо паҳнои ҳадди ақал ва максимум ва панели паҳлӯи чап. Беҳтарин барои барномаҳо ва ҳуҷҷатҳо.

<бадан>
  <div class = "контейнер-моеъ" > 
    <div class = "панели паҳлӯ" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Сарлавҳаҳо ва нусхабардорӣ

Як иерархияи типографии стандартӣ барои сохтори вебсайтҳои шумо.

Тамоми шабакаи типографӣ ба ду тағирёбандаи Less дар файли preboot.less мо асос ёфтааст: @basefontва @baseline. Якум андозаи шрифти асосист, ки дар саросари ҷаҳон истифода мешавад ва дуввум баландии сатри асосӣ мебошад.

Мо ин тағирёбандаҳо ва баъзе аз математикаро барои эҷод кардани ҳошияҳо, пӯшишҳо ва баландии сатрҳои ҳама намуди мо ва ғайра истифода мебарем.

h1. Сарлавҳаи 1

h2. Сарлавҳаи 2

h3. Сарлавҳаи 3

h4. Сарлавҳаи 4

h5. Сарлавҳаи 5

h6. Сарлавҳаи 6

Мисол параграф

Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. Nullam id dolor id nibh ultricies vehicula ut id elit.

Сарлавҳаи мисол Зерсарлавҳа дорад…

Дигар. унсурҳо

Истифодаи таъкид, суроғаҳо ва ихтисорот

<strong> <em> <address> <abbr>

Кай истифода бурдан

Тегҳои таъкид ( <strong>ва <em>) бояд барои нишон додани аҳамияти иловагӣ ё таъкиди калима ё ибораи нисбат ба нусхаи гирду атрофаш истифода шаванд. Барои <strong>аҳамият ва таъкиди стресс истифода баред .<em>

Таваҷҷӯҳ дар параграф

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a augue pharetra.

Эзоҳ: Истифода <b>ва <i>тегҳо дар HTML5 ҳоло ҳам хуб аст ва онҳо набояд мутаносибан ғафс ва курсив тарҳрезӣ шаванд (гарчанде ки агар унсури семантикии бештар вуҷуд дошта бошад, онро истифода баред). <b>Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.

Суроғаҳо

Элемент <address>барои маълумоти тамос барои аҷдодони наздиктарин ё тамоми кори кор истифода мешавад. Дар ин ҷо ду мисоле ҳастанд, ки чӣ тавр онро истифода бурдан мумкин аст:

Эзоҳ: Ҳар як сатр <address>бояд бо танаффуси сатр ( <br />) анҷом ёбад ё дар теги сатҳи блок печонида шавад (масалан, <p>) барои сохтори дурусти мундариҷа.

Ихтисорот

Барои ихтисорот ва ихтисоротҳо тегро истифода баред <abbr>( <acronym>дар HTML5 бекор карда шудааст ). Шакли стенографияро дар дохили тег ҷойгир кунед ва барои номи пурра унвон таъин кунед.

Нохунакҳо

<blockquote> <p> <small>

Чӣ тавр иқтибос овардан

<blockquote>Барои дохил кардани иқтибос, печонед <p>ва <small>барчаспҳо. <small>Барои истинод ба манбаи худ элементро истифода баред ва шумо —пеш аз он тире мегиред.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо як қисми пешқадамро нишон медиҳанд.

Доктор Юлиус Ҳибберт

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо як қисми пешқадамро нишон медиҳанд. </p>
  <хурд> Доктор Юлиус Ҳибберт </small>
</blockquote>

Бетартиб<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Молести бутуни дар масса
• Facilisis дар aliquet nisl pretium
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ба таври ройгон озодона возеҳ кунед
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor loem

Бесабз<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Молести бутуни дар масса
• Facilisis дар aliquet nisl pretium
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ба таври ройгон озодона возеҳ кунед
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor loem

Фармоиш дод<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Молести бутуни дар масса
4. Facilisis дар aliquet nisl pretium
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor loem

Тавсифиdl

Рӯйхати тавсиф

Рӯйхати тавсиф барои муайян кардани истилоҳот комил аст.

Эусмод

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida ва дар вақти дилхоҳ.

Порта Малесуада

Этиам порта семина любовь любвие.

Кодекс

<code> <pre>

Рамзи худро бо услуб бо ду барчаспҳои оддӣ пимп кунед. Барои боз ҳам олиҷанобтар тавассути JavaScript, ба китобхонаи зебои коди Google афтед ва шумо омодаед.

Пешниҳоди код

Рамзҳо, блокҳо ё танҳо пораҳои дарунсохтро метавон бо услуб танҳо тавассути печонидани теги рост нишон дод. Барои блокҳои код, ки сатрҳои гуногун доранд, <pre>элементро истифода баред. Барои рамзи inline, <code>элементро истифода баред.

<div>
  <h1>Сарлавҳа</h1>
  <p>Чизе дар ин ҷо...</p>
</div>

<div> <h1> Сарлавҳа </h1> <p> Чизе дар ин ҷо... </p> </div>
  
  

Тамғакоғазҳои дохилӣ

<span class="label">

Ба ягон ибораи матни баданатон диққат диҳед ё онро қайд кунед.

Ҳама чизро нишон диҳед

Ҳамеша ба яке аз он навҳои зебо лозим буд ! ё Парчамҳои муҳим ҳангоми навиштани код? Хуб, ҳоло шумо онҳоро доред. Ин аст он чизе ки бо нобаёнӣ дохил карда шудааст:

Шабакаи медиа

Намоиши эскизҳои андозаҳои гуногун дар саҳифаҳои дорои изи ками HTML ва услубҳои минималӣ.

Намунаҳои эскизҳо

Анқараҳо дар .media-gridҳама гуна андоза буда метавонанд, аммо онҳо ҳангоми харитасозии мустақим ба системаи дарунсохт Bootstrap кор мекунанд. Паҳноии тасвирҳо ба монанди 90, 210 ва 330 бо чанд пиксели пуркунӣ якҷоя шуда, ба андозаи .span2, .span4, ва .span6сутун баробар мешаванд.

Калон

Миёна

Хурд

Рамзгузории онҳо

Шабакаҳои медиавӣ истифода бурдан осон ва дар паҳлӯи аломатгузорӣ хеле соддаанд. Андозаи онҳо танҳо ба андозаи тасвирҳои дохилшуда асос ёфтааст.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img синфи = "анғаз" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img синфи = "анғаз" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Ҷадвалҳои сохтмонӣ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Ҷадвалҳо бузурганд - барои бисёр чизҳо. Бо вуҷуди ин, ҷадвалҳои олӣ барои муфид, миқёспазир ва хонданшаванда (дар сатҳи код) каме муҳаббати аломатгузорӣ лозиманд. Инҳоянд чанд маслиҳат барои кӯмак.

Ҳамеша сарлавҳаҳои сутуни худро тавре печонед <thead>, ки иерархия <thead>> <tr>> <th>бошад.

Монанди сарлавҳаҳои сутун, тамоми мундариҷаи бадани ҷадвали шумо бояд дар як печонида шаванд, <tbody>то иерархияи шумо <tbody>> <tr>> <td>бошад.

Мисол: Услубҳои ҷадвали пешфарз

Ҳама ҷадвалҳо ба таври худкор танҳо бо сарҳадҳои муҳим тарҳрезӣ мешаванд, то хондан ва нигоҳ доштани сохторро таъмин кунанд. Илова кардани синфҳо ё атрибутҳои иловагӣ лозим нест.

<ҷадвал>
  ...
</ҷадвал>

Мисол: Зебра-рах

Бо илова кардани зебра-стрипинг бо ҷадвалҳои худ каме зебо шавед - танҳо .zebra-stripedсинфро илова кунед.

Эзоҳ: Zebra-striping як такмилдиҳии прогрессивӣ аст, ки барои браузерҳои кӯҳна ба монанди IE8 ва поёнтар дастрас нест.

< синфи ҷадвал = "зебра-рах" > 
...
</ҷадвал>

Мисол: Zebra-striped w/ TableSorter.js

Бо назардошти мисоли қаблӣ, мо фоиданокии ҷадвалҳои худро тавассути фароҳам овардани функсияҳои ҷудокунӣ тавассути jQuery ва плагини Tablesorter беҳтар мегардонем . Барои тағир додани навъ сарлавҳаи ягон сутунро клик кунед.

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<скрипт > 
  $ ( функсия () { 
    $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< синфи ҷадвал = "зебра-рах" > 
  ...
</ҷадвал>

Услубҳои пешфарз

Ба ҳама шаклҳо услубҳои пешфарз дода мешаванд, то онҳоро ба таври қобили хондан ва миқёспазир пешниҳод кунанд. Сабкҳо барои вуруди матн, рӯйхатҳои интихоб, майдонҳои матн, тугмаҳои радио ва қуттиҳои қайд ва тугмаҳо таъмин карда мешаванд.

Форматҳои ҷамъшуда

Ба .form-stackedHTML-и формаи худ илова кунед ва шумо дар болои майдонҳои онҳо тамғакоғазҳо хоҳед дошт, на дар тарафи чапи онҳо. Ин хуб кор мекунад, агар шаклҳои шумо кӯтоҳ бошанд ё шумо ду сутуни вурудот барои шаклҳои вазнинтар дошта бошед.

Андозаи майдонҳои форма

Ҳама гуна шакл input, select, ё textareaпаҳниро бо илова кардани чанд синф ба аломатгузории худ фармоиш диҳед.

Аз v1.3.0, мо синфҳои андозагирии шабакаро барои унсурҳои форма илова кардем. Лутфан инҳоро дар синфҳои мавҷудаи .mini, .small, ва ғайра истифода баред.

Тугмаҳо

Чун қоида, тугмаҳо барои амалҳо истифода мешаванд, дар ҳоле ки истинодҳо барои объектҳо истифода мешаванд. Масалан, "Зеркашӣ" метавонад тугма бошад ва "фаъолияти охирин" пайванде бошад.

Ҳама тугмаҳо ба таври пешфарз сабки хокистарии сабук доранд, аммо як қатор синфҳои функсионалӣ метавонанд барои сабкҳои рангҳои гуногун татбиқ карда шаванд. Ба ин синфҳо синфҳои кабуд .primary, синфи кабуди сабук .info, синфи сабз .successва синфи сурх .dangerдохил мешаванд.

Тугмаҳои намунавӣ

Сабкҳои тугмаҳо метавонанд ба ҳама чиз бо .btnистифодашаванда татбиқ карда шаванд. Одатан шумо мехоҳед, ки онҳоро танҳо ба <a>, <button>, ва <input>унсурҳои интихобшуда татбиқ кунед. Ин аст, ки чӣ тавр ба назар мерасад:

Андозаҳои алтернативӣ

Тугмаҳои калонтар ё хурдтарро мехоҳед? Бигиред!

Ҳолати ғайрифаъол

Барои тугмаҳое, ки фаъол нестанд ё бо ин ё он сабаб аз ҷониби барнома ғайрифаъол шудаанд, ҳолати ғайрифаъолро истифода баред. Ин барои .disabledистинодҳо ва элементҳост.:disabled<button>

Пайвандҳо

Тугмаҳо

Ин чист

Панели болоии мо як сатри собит аст, ки дар он логотип ё номи вебсайт, паймоиши ибтидоӣ ва шакли ҷустуҷӯ ҷойгир аст.

Мутобиқшаванда

Ҳама унсурҳои дохили ва тамоми панели боло низ ихтиёрӣ мебошанд. Шумо метавонед интихоб кунед, ки логотип/ном, навсозӣ, ҷустуҷӯ ва навгонии дуюмдараҷа ё ҳар як комбинатсияи онро дохил кунед.

Равзанаҳои афтанда дохил карда шудаанд

Ҳамчун як қисми паймоиши асосӣ, мо қобилияти илова кардани афтандаҳоро ба navi худ дохил кардем. Навъи дуюмдараҷаи болоро санҷед (ба рост ҳамзамон) то бубинед, ки он чӣ гуна иҷро шудааст. Тегҳои афтанда liинчунин .activeбарои нишон додани интихоби ҷории саҳифа дастгирӣ мекунанд.

Таблетҳо ва доруҳо

Бо новбари оддии дуюмдараҷа эҷод кунед <ul>. Бо илова кардани синфи мувофиқ байни ҷадвалҳо ё доруҳо иваз кунед.

Барои зербахшҳои мундариҷа, ба монанди саҳифаҳои танзимоти ҳисоби мо ва ҷадвалҳои корбар барои гузаштан байни саҳифаҳои мундариҷаи монанд хеле хуб аст. Дар сабкҳои ҷадвал ё ҳаб дастрас аст.

• Хона
• Профил
• Паёмҳо
• Танзимотҳо
• Тамос
• Поёнафтода
  • Пайванди дуюмдараҷа
  • Дар ин ҷо чизи дигар
  • Пайванди дигар

<ul class = "таббачаҳо" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Профил </a></li> 
  <li><a href = "#" > Паёмҳо </a></li> 
  <li><a href = "#" > Танзимот </a></li> 
  <li><a href = "#" > Тамос </a></li> 
</ul>

• Хона
• Профил
• Паёмҳо
• Танзимотҳо
• Тамос

<ul class = "ҳабҳо" > 
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Профил </a></li> 
  <li><a href = "#" > Паёмҳо </a></li> 
  <li><a href = "#" > Танзимот </a></li> 
  <li><a href = "#" > Тамос </a></li> 
</ul>

Нонпораҳо

Навигатсияи Breadcrumb ҳамчун роҳи нишон додани корбарон дар куҷо будани онҳо дар дохили барнома ё сайт истифода мешавад, аммо на барои паймоиши ибтидоӣ.

• Хона

• хона /
• Саҳифаи миёна

• хона /
• Саҳифаи миёна /
• Дигараш

• хона /
• Саҳифаи миёна /
• Дигаре /
• Шумо инҷоед

<ul class = "нонреза" > 
  <li><a href = "#" > Хона </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Саҳифаи миёна </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Дигар </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Шумо дар ин ҷо ҳастед </li> 
</ul>

Саҳифабандӣ

Саҳифабандии ултра содда ва ҳадди аққал услубӣ, ки аз ҷониби Rdio илҳом гирифта шудааст. Блоки калонро аз даст додан душвор аст, ба осонӣ миқёспазир аст ва минтақаҳои калони кликро таъмин мекунад.

<div class = "саҳифагузорӣ" > 
  <ul>
    <li class = "каблан ғайрифаъол" ><a href = "#" > ← Пешина </a></li>  
    <li class = "фаъол" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Оянда → </a></li>  
  </ul>
</div>

Огоҳиҳои асосӣ

.alert-message

Паёмҳои як сатр барои таъкид кардани нокомӣ, нокомии эҳтимолӣ ё муваффақияти амал. Махсусан барои шакл муфид аст.

JavaScript-ро гиред »

Рамзи мисол

<div class = "огоҳӣ-паём" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Гуакамоли муқаддас! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед. </p>
</div>

Паёмҳоро блок кунед

.alert-message.block-message

Барои паёмҳое, ки каме тавзеҳот талаб мекунанд, мо огоҳиҳои услуби параграф дорем. Инҳо барои пур кардани паёмҳои хатогии тӯлонӣ, огоҳ кардани корбар аз амали интизорӣ ё танҳо пешниҳод кардани маълумот барои таваҷҷӯҳи бештар дар саҳифа комиланд.

JavaScript-ро гиред »

Рамзи мисол

<div class = "огоҳии блок-паёми alert-message" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Гуакамоли муқаддас! Ин огоҳӣ аст! </strong> Беҳтараш худатонро санҷед, шумо он қадар хуб намебинед. Nulla vitae elit libero, a augue pharetra. Тамошо кунед, ки шумо метавонед ба таври васеъ истифода баред. </p>
  <div class = "alert-actions" > 
    <a class = "btn small" href = "#" > Ин амалро иҷро кунед </a> <a class = "btn small" href = "#" > Ё ин корро кунед </a>     
  </div>
</div>

Модалҳо

Модалҳо - муколамаҳо ё қуттиҳои равшанӣ - барои амалҳои контекстӣ дар ҳолатҳое, ки нигоҳ доштани контексти замина муҳим аст, хубанд.

JavaScript-ро гиред »

Маслиҳатҳо

Twipsies барои кӯмак ба корбари ошуфташуда ва нишон додани онҳо ба самти дуруст хеле муфид аст.

JavaScript-ро гиред »

Поповерҳо

Поповҳоро истифода баред, то маълумоти зерматнро ба саҳифа бидуни таъсир ба тарҳ таъмин кунед.

JavaScript-ро гиред »

Сар кардани кор

Интегратсияи JavaScript бо китобхонаи Bootstrap хеле осон аст. Дар зер мо асосҳоро меомӯзем ва ба шумо якчанд плагинҳои олиро пешкаш мекунем, то шуморо оғоз кунанд!

Дидани ҳуҷҷатҳои javascript »

Чӣ дохил карда шудааст

Баъзе ҷузъҳои асосии Bootstrap-ро бо плагинҳои нави фармоишӣ, ки бо jQuery ва Ender кор мекунанд, зинда кунед. Мо шуморо ташвиқ мекунем, ки онҳоро васеъ ва тағир диҳед, то эҳтиёҷоти мушаххаси рушди худро мувофиқ созед.

Оё javascript лозим аст?

Не! Bootstrap пеш аз ҳама барои китобхонаи CSS тарҳрезӣ шудааст. Ин JavaScript қабати асосии интерактивиро дар болои услубҳои дохилшуда таъмин мекунад.

Бо вуҷуди ин, барои онҳое, ки ба JavaScript ниёз доранд, мо плагинҳои дар боло зикршударо пешниҳод кардем, то ба шумо дар фаҳмед, ки чӣ гуна Bootstrap-ро бо JavaScript ҳамҷоя кунед ва ба шумо имкони зуд ва сабукро барои функсияҳои асосӣ пешниҳод кунем.

Барои маълумоти бештар ва дидани баъзе намоишҳои зинда, лутфан ба саҳифаи ҳуҷҷатҳои плагини мо муроҷиат кунед .