Тез баштоо мисалдары

Кээ бир тез шаблондор керекпи? Биз чогулткан бул негизги мисалдарды карап көрүңүз:

Демейки тор

Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең 16 тилкелүү тор болуп саналат. Бул популярдуу 960 тор системасынын даамы, бирок сол жана оң тарабында кошумча маржа/толтуру жок.

Тор белгилөөнүн мисалы

Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 16 фундаменталдык мамычалардын санын камтыйт. Көбүрөөк вариациялар үчүн төмөндөгү мисалдарды караңыз.

<div класс = "сап" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Уюшкан мамычалар

.rowЭгер керек болсо , учурдагы тилкенин ичинде түзүү аркылуу мазмунуңузду уяга салыңыз .

Уюшкан мамычалардын мисалы

<div класс = "сап" > 
  <div class = "span12" > 
    Мамычанын 1-деңгээли
    <div класс = "сап" > 
      <div class = "span6" > 
        2-деңгээл
      </div>
      <div class = "span6" > 
        2-деңгээл
      </div>
    </div>
  </div>
</div>

Өзүңүздүн торуңузду айлантыңыз

Bootstrap ичинде орнотулган демейки 940px тор тутумун ыңгайлаштыруу үчүн бир нече өзгөрмөлөр бар. Бир аз ыңгайлаштыруу менен, сиз мамычалардын өлчөмүн, алардын арыктарын жана алар жашаган контейнерди өзгөртө аласыз.

Тордун ичинде

Тор системасын өзгөртүү үчүн зарыл болгон өзгөрмөлөр учурда бардыгы variables.less.

Эми ыңгайлаштыруу үчүн

Торду өзгөртүү үч @grid-*өзгөрмөлөрдү өзгөртүүнү жана Less файлдарын кайра компиляциялоону билдирет.

Bootstrap 24 мамычасы бар тор тутумун иштетүү үчүн жабдылган; демейки жөн гана 16. Бул жерде сиздин тор өзгөрмөлөрүңүз 24 тилкелүү торго ылайыкташтырылган көрүнөт.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Кайра компиляциялангандан кийин, сиз орнотулат!

Фиксалдуу макет

Демейки жана жөнөкөй 940px кеңдиги, бир гана веб-сайт же барагы үчүн борборлоштурулган макет <div.container>.

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

Суюктуктун жайгашуусу

Минималдуу жана максималдуу туурасы жана сол тараптагы каптал тилкеси бар альтернативалуу, ийкемдүү суюк барак структурасы. Колдонмолор жана документтер үчүн сонун.

<дене>
  <div класс = "контейнер-суюктук" > 
    <div класс = "каптал тилкеси" > 
      ...
    </div>
    <div класс = "мазмун" > 
      ...
    </div>
  </div>
</body>

Аталышы жана көчүрмөсү

Веб баракчаларыңызды структуралаштыруу үчүн стандарттуу типографиялык иерархия.

Бүтүндөй типографиялык тор биздин variables.less файлыбыздагы эки Less өзгөрмөсүнө негизделген: @basefontжана @baseline. Биринчиси - бүтүндөй колдонулган негизги шрифт-өлчөмү, экинчиси - базалык сызыктын бийиктиги.

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

h1. 1-башкы

h2. 2-башкы

h3. 3-башкы

h4. 4-башкы

h5. 5-башкы

h6. 6-башкы

Мисал абзац

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus. 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, pharetra augue.

Эскертүү:<b> HTML5те жана тегдерин колдонуу дагы деле жакшы <i>жана алар калың жана курсив менен стилдештирилбеши керек (бирок семантикалык элементи көбүрөөк болсо, аны колдонуңуз). <b>кошумча маани бербестен сөздөрдү же сөз айкаштарын бөлүп көрсөтүү үчүн арналган, ал эми <i>негизинен үн, техникалык терминдер ж.б.у.с.

Даректер

<address>Элемент анын жакынкы ата-бабасы же бүткүл иш органы үчүн байланыш маалыматы үчүн колдонулат . Бул жерде аны кантип колдонсо болоруна эки мисал келтирилген:

Эскертүү: Мазмунду туура түзүш үчүн ар бир сап <address>сызык тыныгуусу ( <br />) менен аякташы керек же блок деңгээлиндеги тегге (мисалы, <p>) оролгон болушу керек.

Аббревиатуралар

<abbr>Кыскартуулар жана аббревиатуралар үчүн тегди колдонуңуз ( HTML5те <acronym>эскирген ) . Тегдин ичине стенографиялык форманы коюңуз жана толук ат үчүн аталышты коюңуз.

Blockquotes

<blockquote> <p> <small>

Кантип цитата кылуу керек

Блок цитатаны кошуу үчүн, <blockquote>тегерете ороп <p>, <small>тегдер. Булакыңызга шилтеме кылуу үчүн элементти колдонуңуз жана анын алдында <small>сызыкча —аласыз.

Lorem ipsum dolor sit amet, consectetur adipiscing элит. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Доктор Юлиус Хибберт </small>
</blockquote>

Тартипсиз<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• претиум nisl aliquet жылы Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Анеан сит амет эрат нунц
• Eget porttitor lorem

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
• претиум nisl aliquet жылы Facilisis
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Анеан сит амет эрат нунц
• Eget porttitor lorem

Заказ берди<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. претиум nisl aliquet жылы Facilisis
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Анеан сит амет эрат нунц
8. Eget porttitor lorem

Descriptiondl

Сүрөттөмө тизмелери

Сүрөттөмө тизмеси терминдерди аныктоо үчүн идеалдуу.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Code

<code> <pre>

Кодуңузду эки жөнөкөй тег менен стилге келтириңиз. JavaScript аркылуу ого бетер кереметтүү болушу үчүн, Google'дун кооздук китепканасынын кодун таштаңыз жана сиз даярсыз.

Код көрсөтүлүүдө

Код, блоктор же жөн эле үзүндүлөр, жөн гана туура тегге ороп, стили менен көрсөтүлүшү мүмкүн. Бир нече сапты камтыган код блоктору үчүн <pre>элементти колдонуңуз. Сатылган код үчүн <code>элементти колдонуңуз.

<div>
  <h1>Аталышы</h1>
  <p>Бул жерде бир нерсе...</p>
</div>

<div> <h1> рубрика </h1> <p> Бул жерде бир нерсе... </p> </div>
  
  

Inline энбелгилери

<span class="label">

Текстиңиздеги каалаган сөз айкашына көңүл буруңуз же белгилеңиз.

Эч нерсени белгилеңиз

Ошол укмуштуудай Жаңылардын бири керек болчу ! же код жазууда маанилүү желектерби? Эми сенде алар бар. Бул жерде демейки боюнча камтылган нерселер:

Медиа тор

Төмөн HTML изи жана минималдуу стилдери бар барактарда ар кандай өлчөмдөгү эскиздерди көрсөтүңүз.

Мисал эскиздер

Андагы эскиздер .media-gridкаалаган өлчөмдө болушу мүмкүн, бирок алар түздөн-түз орнотулган Bootstrap тор системасына түшүрүлгөндө жакшы иштейт. 90, 210 жана 330 сыяктуу сүрөттүн кеңдиктери .span2, .span4, жана .span6мамычанын өлчөмдөрүнө барабар болуу үчүн бир нече пикселдик толтуруу менен айкалышат.

Чоң

Орто

Small

Аларды коддоо

Медиа торлорду колдонуу оңой жана белгилөө жагында жөнөкөй. Алардын өлчөмдөрү гана камтылган сүрөттөрдүн өлчөмүнө негизделген.

<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-стрипинг IE8 жана андан төмөн сыяктуу эски браузерлер үчүн жеткиликтүү эмес прогрессивдүү өркүндөтүү.

<стол класс = "зебра-сызык" > 
  ...
</таблица>

Мисал: Зебра-сызык w/ TableSorter.js

Мурунку мисалды алып, биз jQuery жана Tablesorter плагини аркылуу сорттоо функциясын камсыз кылуу менен таблицаларыбыздын пайдалуулугун жакшыртабыз . Сортту өзгөртүү үчүн каалаган мамычанын башын чыкылдатыңыз.

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

Демейки стилдер

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

Топтолгон формалар

.form-stackedФормаңыздын HTML'ине кошсоңуз, алардын сол жагында эмес, алардын талаасынын үстүндө энбелгилер болот . Формаларыңыз кыска болсо же оор формалар үчүн эки мамычасы болсо, бул сонун иштейт.

Форма талаасынын өлчөмдөрү

Белгилөөңүзгө бир нече класстарды кошуп , каалаган форманы input, select, же туурасын ыңгайлаштырыңыз.textarea

v1.3.0 боюнча, форма элементтери үчүн торго негизделген өлчөмдөр класстарын коштук. Сураныч, буларды учурдагы .mini, .small, ж.б. класстардын үстүнөн колдонуңуз.

Buttons

Конвенция катары баскычтар иш-аракеттер үчүн колдонулат, ал эми шилтемелер объекттер үчүн колдонулат. Мисалы, "Жүктөө" баскычы жана "акыркы аракет" шилтеме болушу мүмкүн.

Бардык баскычтар демейки ачык боз стилде, бирок ар кандай түс стилдери үчүн бир катар функционалдык класстарды колдонсо болот. Бул класстарга көк .primaryкласс, ачык көк .infoкласс, жашыл .successкласс жана кызыл .dangerкласс кирет.

Мисал баскычтары

Баскычтардын стилдери колдонулган бардык нерсеге .btnколдонулушу мүмкүн. <a>Адатта, сиз буларды , <button>, жана тандалган <input>элементтерге гана колдонгуңуз келет . Бул кандай көрүнөт:

Альтернативдик өлчөмдөр

Чоңураак же кичине баскычтарды жактырасызбы? Бол!

Өчүрүлгөн абал

Активдүү эмес же тигил же бул себептерден улам колдонмо тарабынан өчүрүлгөн баскычтар үчүн өчүрүлгөн абалды колдонуңуз. Бул .disabledшилтемелер жана элементтер :disabledүчүн .<button>

Шилтемелер

Buttons

Бул эмне

Биздин топбар - бул веб-сайттын логотиби же аталышы, негизги навигациясы жана издөө формасы жайгашкан туруктуу тилке.

Ыңгайлаштырылган

Бардык элементтер, ошондой эле үстүнкү панелдин баары милдеттүү эмес. Сиз логотипти/атын, навигацияны, издөөнү жана кошумча навигацияны же алардын каалаган комбинациясын кошууну тандай аласыз.

Ашылма тизмелер камтылган

Негизги навигациянын бир бөлүгү катары, биз сиздин навигацияңызга ылдый түшүүчү тизмелерди кошуу мүмкүнчүлүгүн кошконбуз. Анын кантип жасалганын көрүү үчүн жогорудагы кошумча навигацияны (оңго тегизделген) караңыз. Ашылма liтегдер .activeучурдагы барактын тандоосун көрсөтүүнү да колдойт.

Таблеткалар жана таблеткалар

менен жөнөкөй кошумча навигация түзүңүз <ul>. Тиешелүү классты кошуу менен өтмөктөрдү же таблеткаларды алмаштырыңыз.

Каттоо эсебинин жөндөөлөрүнүн барактары жана окшош мазмундун барактары арасында которулуу үчүн колдонуучунун убакыт тилкелери сыяктуу мазмундун суб-бөлүктөрү үчүн эң сонун. Таблеткалуу же таблетка стилинде жеткиликтүү.

Негизги өтмөктөрдүн мисалы

Өтмөктөрдү кадимки навигация катары (бир эле өтмөктө тышкы барактарды жүктөө) же мазмундун панелдерин алмаштыруу үчүн өтүлүүчү мазмун аймактары катары колдонсо болот. Бизде акыркыны бириктирүү үчүн колдонула турган өтмөк плагини бар.

• Үй
• Профиль
• Кабарлар
• Орнотуулар
• Байланыш
• Ашылма
  • Экинчи шилтеме
  • Бул жерде дагы бир нерсе
  • Башка шилтеме

<ul class = "өтмөктөр" > 
  <li class = "active" ><a href = "#" > Башкы </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 = "#" > Башкы </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 = "breadcrumb" > 
  <li><a href = "#" > Башкы </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Ортоңку бет </a> <span class = "бөлүүчү" > / </span></li>   
  <li><a href = "#" > Дагы бир </a> <span класс = "бөлүүчү" > / </span></li>   
  <li class = "active" > Сиз бул жердесиз </li> 
</ul>

Барактоо

Rdio шыктандырган өтө жөнөкөй жана минималдуу стилдеги баракчалар. Чоң блокту өткөрүп жиберүү кыйын, оңой масштабдалат жана чоң чыкылдатуу аймактарын камсыз кылат.

<div класс = "беттөө" > 
  <ul>
    <li class = "мурдагы өчүрүлгөн" ><a href = "#" > ← Мурунку </a></li>  
    <li класс = "активдүү" ><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 класс = "кийинки" ><a href = "#" > Кийинки → </a></li>  
  </ul>
</div>

Негизги эскертүүлөр

.alert-message

Иштин ийгиликсиздигин, мүмкүн болбой калышын же ийгилигин көрсөтүү үчүн бир саптык билдирүүлөр. Өзгөчө формалар үчүн пайдалуу.

JavaScript алуу »

Мисал код

<div класс = "эскертүүчү кабар эскертүү" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Ыйык гуакамоле! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз. </p>
</div>

Билдирүүлөрдү бөгөттөө

.alert-message.block-message

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

JavaScript алуу »

Мисал код

<div класс = "эскертүү-билдирүү блок-билдирүү эскертүү" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Ыйык гуакамоле! Бул эскертүү! </strong> Өзүңүздү текшериңиз, сиз өтө жакшы көрүнбөйсүз. Nulla vitae elit libero, pharetra augue. Кошумча commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div класс = "эскертүү аракеттери" > 
    <a class = "btn small" href = "#" > Бул аракетти жаса </a> <a class = "btn small" href = "#" > Же муну кыл </a>     
  </div>
</div>

модалдар

Модальдар—диалогдор же лайтбокстор—фондук контекстти сактоо маанилүү болгон жагдайларда контексттик аракеттер үчүн эң сонун.

JavaScript алуу »

Кеңештер

Twipsies башаламан колдонуучуга жардам берүү жана аларды туура багытты көрсөтүү үчүн абдан пайдалуу.

JavaScript алуу »

Popovers

Макетке таасирин тийгизбестен баракка субтексттик маалымат берүү үчүн поповерлерди колдонуңуз.

JavaScript алуу »

Баштоо

JavaScriptти Bootstrap китепканасы менен интеграциялоо өтө оңой. Төмөндө биз негиздерди карап чыгып, сизди баштоо үчүн укмуштуудай плагиндерди сунуштайбыз!

JavaScript документтерин көрүү »

Эмне камтылган

jQuery жана Ender менен иштеген жаңы ыңгайлаштырылган плагиндер менен Bootstrap'тин негизги компоненттеринин айрымдарын жандантыңыз . Биз сизге аларды өнүктүрүүгө өзгөчө муктаждыктарыңызга ылайыкташтырууну сунуштайбыз.

JavaScript керекпи?

Жок! Bootstrap биринчи кезекте CSS китепканасы болуу үчүн иштелип чыккан. Бул JavaScript камтылган стилдердин үстүнө негизги интерактивдүү катмарды камсыз кылат.

Бирок, JavaScript'ке муктаж болгондор үчүн, Bootstrap менен JavaScript кантип интеграциялоону түшүнүүгө жардам берүү үчүн жана сизге дароо эле негизги функциялардын тез, жеңил вариантын берүү үчүн жогорудагы плагиндерди бердик.

Көбүрөөк маалымат алуу жана кээ бир жандуу демонстрацияларды көрүү үчүн, биздин плагиндин документтер барагына кайрылыңыз .