Scaffolding · Bootstrap қазақ тілінде

HTML5 құжат түрін қажет етеді

Bootstrap белгілі бір HTML элементтерін және HTML5 құжат түрін пайдалануды қажет ететін CSS сипаттарын пайдаланады. Оны барлық жобаларыңыздың басына қосыңыз.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

Типография және сілтемелер

Bootstrap негізгі жаһандық дисплейді, типографияны және сілтеме мәнерлерін орнатады. Атап айтқанда, біз:

marginДенеге алып тастаңыз
background-color: white;параметріне орнатыңызbody
@baseFontFamily, @baseFontSize, және @baseLineHeightатрибуттарын типографиялық негіз ретінде пайдаланыңыз
Жаһандық сілтеме түсін арқылы орнатыңыз @linkColorжәне сілтеменің астын сызуды тек параметріне қолданыңыз:hover

Бұл стильдерді scaffolding.less ішінде табуға болады .

Қалпына келтіру арқылы Қалпына келтіру

Bootstrap 2 көмегімен ескі қалпына келтіру блогы Normalize.css пайдасына алынып тасталды, Николас Галлахер мен Джонатан Нилдің жобасы , сонымен қатар HTML5 Boilerplate . Біз reset.less ішінде Normalize функциясының көп бөлігін пайдаланғанымызбен , Bootstrap үшін кейбір элементтерді алып тастадық.

Тікелей тордың мысалы

Әдепкі Bootstrap тор жүйесі 12 бағанды пайдаланады, жауап беру мүмкіндіктері қосылмаған ені 940 пиксель болатын контейнерге арналған . Жауапты CSS файлы қосылғанда, тор көру аймағына байланысты ені 724 пиксель және 1170 пиксельге бейімделеді. 767px көру порттарынан төмен бағандар сұйық болады және тігінен жинақталады.

Негізгі тор HTML

Қарапайым екі баған орналасуы үшін a жасап, бағандардың .rowсәйкес санын қосыңыз . .span*Бұл 12 бағанды тор болғандықтан, әрқайсысы .span*сол 12 бағанның санын қамтиды және әр жол үшін (немесе негізгі бағандар саны) әрқашан 12-ге дейін қосылуы керек.

<div класс = "жол" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Осы мысалды ескере отырып, бізде .span4және бар .span8, жалпы 12 баған мен толық жолды құрайды.

Есеп айырысу бағандары

Класстарды пайдаланып бағандарды оңға жылжытыңыз .offset*. Әрбір сынып бағанның сол жақ жиегін тұтас бағанға үлкейтеді. Мысалы, төрт бағанның үстінен .offset4жылжытады ..span4

3 офсет 2

3 офсет 1

3 офсет 2

6 офсет 3

<div класс = "жол" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

Кірістірілген бағандар

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

1-деңгей бағаны

2-деңгей

<div класс = "жол" > 
  <div class = "span9" > 
    1-деңгей бағаны
    <div класс = "жол" > 
      <div class = "span6" > 2-деңгей </div> 
      <div class = "span3" > 2-деңгей </div> 
    </div>
  </div>
</div>

Тірі сұйықтық торының мысалы

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

Негізгі сұйық тор HTML

.row-ге өзгерту арқылы кез келген жолды «сұйықтық» етіңіз .row-fluid. Баған сыныптары бірдей болып қалады, бұл бекітілген және сұйық торлар арасында ауысуды жеңілдетеді.

<div class = "қатар сұйықтығы" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

Бекітілген тор жүйесінің ығысуымен бірдей жұмыс істейді: осыншама .offset*бағандармен ығыстыру үшін кез келген бағанға қосыңыз.

4 офсет 4

3 офсет 3

6 офсет 6

<div class = "қатар сұйықтығы" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset2" > ... </div> 
</div>

Сұйықтықтың ұя салуы

Сұйық торлар ұя салуды басқаша пайдаланады: бағандардың әрбір кірістірілген деңгейі 12 бағанға дейін қосылуы керек. Себебі сұйықтық торы ендерді орнату үшін пикселдерді емес, пайыздарды пайдаланады.

Сұйықтық 12

Сұйықтық 6

<div class = "қатар сұйықтығы" > 
  <div class = "span12" > 
    Сұйықтық 12
    <div class = "қатар сұйықтығы" > 
      <div class = "span6" > 
        Сұйықтық 6
        <div class = "қатар сұйықтығы" > 
          <div class = "span6" > Сұйықтық 6 </div> 
          <div class = "span6" > Сұйықтық 6 </div> 
        </div>
      </div>
      <div class = "span6" > Сұйықтық 6 </div> 
    </div>
  </div>
</div>

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

Жалпы бекітілген ені (және міндетті түрде жауап беретін) орналасуды тек <div class="container">талап етілетінімен қамтамасыз етеді.

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

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

<div class="container-fluid">Қолданбалар мен құжаттар үшін өте ыңғайлы екі бағанды бетті жасаңыз .

<div class = "контейнер-флюид" > 
  <div class = "қатар сұйықтығы" > 
    <div class = "span2" > 
      <!--Бүйірлік тақта мазмұны-->
    </div>
    <div class = "span10" > 
      <!--Дене мазмұны-->
    </div>
  </div>
</div>

Жауап беретін мүмкіндіктерді қосу

Құжатқа тиісті мета тег пен қосымша стиль кестесін қосу арқылы жобаңызда жауап беретін CSS-ті қосыңыз <head>. Теңшеу бетінен Bootstrap құрастырған болсаңыз, сізге тек мета тегті қосу керек.

<мета атауы = "көру алаңы" мазмұны = "ені = құрылғының ені, бастапқы масштаб = 1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "стиль кестесі" >

Ескерту!Bootstrap қазір әдепкі бойынша жауап беру мүмкіндіктерін қамтымайды, себебі барлығы жауап беруді қажет етпейді. Әзірлеушілерді бұл мүмкіндікті жоюға шақырудың орнына, қажет болған жағдайда оны қосқан дұрыс деп есептейміз.

Жауапты Bootstrap туралы

Мультимедиалық сұраулар бірқатар шарттарға – арақатынастарға, ендерге, дисплей түріне және т.б. негізделген реттелетін CSS-ге мүмкіндік береді, бірақ әдетте min-widthжәне айналасына назар аударады max-width.

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

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

Қолдау көрсетілетін құрылғылар

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

Заттаңба	Орналасу ені	Баған ені	Арық ені
Үлкен дисплей	1200px және одан жоғары	70px	30px
Әдепкі	980px және одан жоғары	60px	20px
Портреттік планшеттер	768px және одан жоғары	42px	20px
Телефондардан планшеттерге	767px және одан төмен	Сұйық бағандар, бекітілген ені жоқ
Телефондар	480px және одан төмен	Сұйық бағандар, бекітілген ені жоқ

/* Үлкен жұмыс үстелі */
@media ( мин - ені : 1200px ) { ... }     
 
/* пейзажға және жұмыс үстеліне портреттік планшет */
@media ( мин - ені : 768px ) және ( макс . ені : 979px ) { ... }        
 
/* пейзаждық телефоннан портреттік планшетке */
@media ( макс . ені : 767px ) { ... }     
 
/* пейзаждық телефондар және төмен */
@media ( макс . ені : 480px ) { ... }

Жауапты утилита кластары

Ұялы телефонға ыңғайлырақ әзірлеу үшін осы утилита сыныптарын құрылғы арқылы мазмұнды көрсету және жасыру үшін пайдаланыңыз. Төменде қол жетімді сыныптардың кестесі және олардың берілген медиа сұрауының орналасуына әсері (құрылғы бойынша белгіленген). Оларды табуға болады responsive.less.

Сынып	Телефондар767px және одан төмен	Планшеттер979 пиксельден 768 пиксельге дейін	Жұмыс үстелдеріӘдепкі
`.visible-phone`	Көрінетін	Жасырын	Жасырын
`.visible-tablet`	Жасырын	Көрінетін	Жасырын
`.visible-desktop`	Жасырын	Жасырын	Көрінетін
`.hidden-phone`	Жасырын	Көрінетін	Көрінетін
`.hidden-tablet`	Көрінетін	Жасырын	Көрінетін
`.hidden-desktop`	Көрінетін	Көрінетін	Жасырын

Қашан пайдалану керек

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

Жауап беретін утилиталардың сынақ жағдайы

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

Мына жерде көрінеді...

Жасыл құсбелгілер сыныптың ағымдағы қарау терезесінде көрінетінін көрсетеді.

Телефон✔ Телефон
Планшет✔ Планшет
Жұмыс үстелі✔ Жұмыс үстелі

Жасырылған...

Мұнда жасыл құсбелгілер сыныптың ағымдағы қарау терезесінде жасырылғанын көрсетеді.

Телефон✔ Телефон
Планшет✔ Планшет
Жұмыс үстелі✔ Жұмыс үстелі

Сақтау

Ғаламдық параметрлер