Жылдам басталатын мысалдар

Жылдам үлгілер керек пе? Біз жинаған негізгі мысалдарды қараңыз:

Әдепкі тор

Bootstrap бөлігі ретінде берілген әдепкі тор жүйесі ені 940 пиксель болатын 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 ;   

Қайта құрастырылғаннан кейін сіз реттелесіз!

Бекітілген орналасу

Әдепкі және қарапайым ені 940 пиксель, бір ұсынатын кез келген веб-сайт немесе бет үшін орталықтандырылған орналасу <div.container>.

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

Сұйықтықтың орналасуы

Минималды және максималды ені және сол жақтағы бүйірлік тақтасы бар балама, икемді сұйық бет құрылымы. Қолданбалар мен құжаттар үшін тамаша.

<дене>
  <div class = "контейнер-флюид" > 
    <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 disparturient Montes, nascetur ridiculus mus. Идентификатордың идентификаторы жоқ.

Мысал тақырыбының қосалқы тақырыбы бар…

Әртүрлі. элементтері

Екпінді, мекенжайларды және аббревиатураларды пайдалану

<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> -те ескірген ). Стенографиялық пішінді тегтің ішіне қойып, толық атқа тақырып қойыңыз.

Тырнақшалар

<blockquote> <p> <small>

Дәйексөзді қалай келтіруге болады

Блоктауды қосу үшін айналаны орап <blockquote>, <p>тегтер <small>қойыңыз. Дереккөзге сілтеме жасау үшін элементті пайдаланыңыз <small>және оның алдында сызықша —аласыз.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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
• Массадағы бүтін 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

Стильсіз<ul.unstyled>

• 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

Тапсырыс берілді<ol>

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

Сипаттама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.

Код

<code> <pre>

Кодыңызды екі қарапайым тегпен стильге келтіріңіз. JavaScript арқылы одан да керемет болу үшін Google компаниясының әсемдік кітапханасын енгізіңіз және сіз дайынсыз.

Код ұсынылуда

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

<div>
  <h1>Тақырып</h1>
  <p>Дәл осы жерде бірдеңе...</p>
</div>

<div> <h1> Тақырып </h1> <p> Дәл осы жерде бір нәрсе... </p> </div>
  
  

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

<span class="label">

Негізгі мәтіндегі кез келген сөз тіркесіне назар аударыңыз немесе белгілеңіз.

Кез келген нәрсені белгілеңіз

Осындай керемет жаңалардың бірі қажет болды ! немесе кодты жазу кезінде маңызды жалаушалар ма? Енді сізде олар бар. Әдепкі бойынша мыналар кіреді:

Медиа тор

Төмен HTML ізі және минималды стильдері бар беттерде әртүрлі өлшемдегі нобайларды көрсетіңіз.

Мысал нобайлар

Нобайлар .media-gridкез келген өлшемде болуы мүмкін, бірақ олар тікелей кірістірілген Bootstrap тор жүйесімен салыстырылғанда жақсы жұмыс істейді. .span290, 210 және 330 сияқты кескін ені , .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 және одан төменірек ескі браузерлер үшін қол жетімді емес прогрессивті жақсарту.

<үстел класы = «зебра-жолақты» > 
  ...
</кесте>

Мысал: TableSorter.js бар зебра жолақты

Алдыңғы мысалды ала отырып, біз jQuery және Tablesorter плагині арқылы сұрыптау функционалдығын қамтамасыз ету арқылы кестелеріміздің пайдалылығын жақсартамыз. Сұрыптауды өзгерту үшін кез келген бағанның тақырыбын басыңыз.

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

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

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

Біріктірілген пішіндер

Пішініңіздің .form-stackedHTML-ге қосыңыз, сонда олардың өрістерінің сол жағында емес, жоғарғы жағында белгілер болады. Бұл пішіндер қысқа болса немесе ауыр пішіндерге арналған екі кіріс бағандары болса тамаша жұмыс істейді.

Пішін өрісінің өлшемдері

Белгілеуге бірнеше сыныпты қосу арқылы кез келген пішінді input, select, немесе енді теңшеңіз.textarea

v1.3.0 нұсқасы бойынша біз пішін элементтері үшін торға негізделген өлшем сыныптарын қостық. Бұларды бар .mini, .small, және т.б. сыныптарда пайдаланыңыз.

Түймелер

Конвенция ретінде түймелер әрекеттер үшін пайдаланылады, ал сілтемелер нысандар үшін пайдаланылады. Мысалы, «Жүктеу» түймесі және «соңғы әрекет» сілтеме болуы мүмкін.

Барлық түймелер әдепкі бойынша ашық сұр стильге сәйкес келеді, бірақ әртүрлі түс мәнерлері үшін бірқатар функционалдық сыныптарды қолдануға болады. Бұл сыныптарға көк .primaryсынып, ашық-көк .infoсынып, жасыл .successсынып және қызыл .dangerсынып кіреді.

Мысал түймелер

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

Баламалы өлшемдер

Үлкенірек немесе кішірек түймелерді ұнатасыз ба? Қолда бар!

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

Белсенді емес немесе қандай да бір себептермен қолданба өшірген түймелер үшін өшірілген күйді пайдаланыңыз. Бұл .disabledсілтемелер мен элементтерге :disabledарналған .<button>

Сілтемелер

Түймелер

Бұл не

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

Реттелетін

Ішіндегі барлық элементтер, сонымен қатар бүкіл үстіңгі тақта міндетті емес. Сіз логотипті/атауды, шарлауды, іздеуді және қосымша шарлауды немесе олардың кез келген комбинациясын қосуды таңдай аласыз.

Ашылмалы тізімдер енгізілген

Негізгі шарлаудың бөлігі ретінде біз навигацияға ашылмалы тізімдерді қосу мүмкіндігін қостық. Оның қалай жасалғанын көру үшін жоғарыдағы (оңға реттелген) қосымша шарлауды тексеріңіз. Ашылмалы тізімдер 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 = "нан үгіндісі" > 
  <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 класс = "белсенді" ><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 = "келесі" ><a href = "#" > Келесі → </a></li>  
  </ul>
</div>

Негізгі ескертулер

.alert-message

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

JavaScript алыңыз »

Мысал код

<div class = "alert-хабарлама ескертуі" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Қасиетті гуакамоле! </strong> Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз. </p>
</div>

Хабарларды блоктау

.alert-message.block-message

Аздап түсіндіруді қажет ететін хабарлар үшін бізде абзац стилі ескертулері бар. Бұл ұзағырақ қате туралы хабарларды шығаруға, пайдаланушыны күтудегі әрекет туралы ескертуге немесе жай ғана бетке көбірек назар аудару үшін ақпаратты ұсынуға өте ыңғайлы.

JavaScript алыңыз »

Мысал код

<div class = "alert-хабарлама блок-хабарлама ескертуі" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Қасиетті гуакамоле! Бұл ескерту! </strong> Өзіңізді тексеріңіз, сіз тым жақсы көрінбейсіз. Nulla vitae elit libero, pharetra augue. Commodo cursus magna, немесе scelerisque nisl consectetur et. </p>
  <div class = "alert-әрекеттер" > 
    <a class = "btn small" href = "#" > Осы әрекетті орындаңыз </a> <a class = "btn small" href = "#" > Немесе мұны жасаңыз </a>     
  </div>
</div>

Модаль

Модальдер — диалогтар немесе жарық жәшіктері — фондық мәтінмәнді сақтау маңызды жағдайларда контекстік әрекеттер үшін тамаша.

JavaScript алыңыз »

Кеңестер

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

JavaScript алыңыз »

Поповерлер

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

JavaScript алыңыз »

Басталу

JavaScript-ті Bootstrap кітапханасымен біріктіру өте оңай. Төменде біз негізгі мәліметтерді қарастырамыз және сізге бастау үшін керемет плагиндерді ұсынамыз!

JavaScript құжаттарын көру »

Не кіреді

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

JavaScript қажет пе?

Жоқ! Bootstrap ең алдымен CSS кітапханасы болу үшін жасалған. Бұл JavaScript енгізілген стильдердің үстіне негізгі интерактивті қабатты қамтамасыз етеді.

Дегенмен, JavaScript-ті қажет ететіндер үшін Bootstrap-ті javascript-пен қалай біріктіру керектігін түсінуге көмектесу және негізгі функционалдылық үшін бірден жеңіл опцияны ұсыну үшін жоғарыдағы плагиндерді ұсындық.

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