Историја

У ранијим данима Твитера, инжењери су користили скоро сваку библиотеку са којом су били упознати да би испунили захтеве фронт-енда. Боотстрап је почео као одговор на изазове који су се представили и развој се брзо убрзао током Твиттер-овог првог Хацквеек-а.

Уз помоћ и повратне информације многих инжењера на Твиттеру, Боотстрап је значајно порастао да обухвати не само основне стилове, већ и елегантније и издржљивије обрасце дизајна предњег дела.

Прочитајте више на дев.твиттер.цом ›

Подршка за претраживач

Боотстрап је тестиран и подржан у главним модерним претраживачима као што су Цхроме, Сафари, Интернет Екплорер и Фирефок.

• Латест Сафари
• Најновији Гоогле Цхроме
• Фирефок 4+
• Интернет Екплорер 7+

Шта је укључено

Боотстрап долази у комплету са преведеним ЦСС, некомпајлираним и примерима шаблона.

• Све оригиналне .лесс датотеке
• Потпуно компајлиран и минимизован ЦСС
• Комплетна документација водича за стил
• Пример шаблона странице (ускоро више)

Подразумевана мрежа

Подразумевани систем мреже обезбеђен као део Боотстрап-а је мрежа са 16 колона ширине 940 пиксела. То је укус популарног система мреже 960, али без додатних маргина/подстава на левој и десној страни.

Пример ознаке мреже

Као што је овде приказано, основни распоред се може креирати са две „колоне“, од којих свака обухвата низ од 16 основних колона које смо дефинисали као део нашег система мреже. Погледајте примере у наставку за више варијација.

<див цласс="ров"> цласс = "ред" >
  <див цласс = "спан6 цолумнс" > 
    ...
  </див>
  <див цласс = "спан10 цолумнс" > 
    ...
  </див>
</див>

Фиксни распоред

Основни распоред контејнера ширине 940 пиксела и центриран за скоро сваку локацију или страницу.

<боди>
  <див цласс = "цонтаинер" > 
    ...
  </див>
</боди>

Флуид лаиоут

Флексибилна флуидна или течна структура странице са минималном и максималном ширином и левом бочном траком. Одлично за апликације.

<боди>
  <див цласс = "цонтаинер-флуид" > 
    <див цласс = "сидебар" > 
      ...
    </див>
    <див цласс = "цонтент" > 
      ...
    </див>
  </див>
</боди>

Наслови и копија

Стандардна типографска хијерархија за структурирање ваших веб страница.

х1. Наслов 1

х2. Наслов 2

х3. Наслов 3

х4. Наслов 4

х5. Наслов 5

х6. Наслов 6

Пример параграфа

Нуллам куис рисус егет урна моллис орнаре вел еу лео. Цум социис натокуе пенатибус ет магнис дис партуриент монтес, насцетур ридицулус мус. Нуллам ид долор ид нибх ултрициес вехицула ут ид елит.

Пример наслова Има поднаслов…

Мисц. елемената

Коришћење нагласка, адреса и скраћеница

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

Када користити

Ознаке за нагласак ( <strong>и <em>) треба да се користе да укажу на додатну важност или нагласак речи или фразе у односу на њену околну копију. Користите <strong>за важност и <em>за наглашавање стреса .

Нагласак у пасусу

Фусце дапибус , теллус ац цурсус цоммодо , тортор маурис цондиментум нибх , ут ферментум масса јусто сит амет рисус. Маеценас фауцибус моллис интердум. Нулла витае елит либеро, а пхаретра аугуе.

Напомена: И даље је у реду да користите <b>и <i>ознаке у ХТМЛ5, али оне више не долазе са инхерентним стиловима. <b>има за циљ да истакне речи или фразе без преношења додатне важности, док <i>је углавном за глас, техничке термине итд.

Аддрессес

Елемент <address>се користи за контакт информације за свог најближег претка или за целокупан рад. Ево како то изгледа:

Твиттер, Инц.
795 Фолсом Аве, Суите 600
Сан Францисцо, ЦА 94107
П: (123) 456-7890

Напомена: Сваки ред у ан <address>мора да се завршава преломом реда ( <br />) или да буде умотан у ознаку на нивоу блока (нпр. <p>) да би правилно структурирао садржај.

Скраћенице

За скраћенице и акрониме, користите <abbr>ознаку ( <acronym>је застарела у ХТМЛ5 ). Ставите скраћени образац у ознаку и поставите наслов за комплетно име.

Блоцккуотес

<blockquote> <p> <small>

Како цитирати

Да бисте укључили блок цитат, умотајте га и <blockquote>ознаке . Користите елемент да наведете свој извор и добићете ем цртицу испред њега.<p><small><small>&mdash;

Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит. Интегер посуере ерат а анте вененатис дапибус посуере велит аликует.

др Јулиус Хибберт

Унордеред<ul>

• Лорем ипсум долор сит амет
• Цонсецтетур адиписцинг елит
• Интегер молестие лорем ат масса
• Фацилисис ин претиум нисл аликует
• Нулла волутпат аликуам велит
  • Пхаселлус иацулис некуе
  • Пурус содалес ултрициес
  • Вестибулум лаореет порттитор сем
  • Ац тристикуе либеро волутпат ат
• Фауцибус порта лацус фрингилла вел
• Аенеан сит амет ерат нунц
• Егет порттитор лорем

Унстилед<ul.unstyled>

• Лорем ипсум долор сит амет
• Цонсецтетур адиписцинг елит
• Интегер молестие лорем ат масса
• Фацилисис ин претиум нисл аликует
• Нулла волутпат аликуам велит
  • Пхаселлус иацулис некуе
  • Пурус содалес ултрициес
  • Вестибулум лаореет порттитор сем
  • Ац тристикуе либеро волутпат ат
• Фауцибус порта лацус фрингилла вел
• Аенеан сит амет ерат нунц
• Егет порттитор лорем

Наручено<ol>

1. Лорем ипсум долор сит амет
2. Цонсецтетур адиписцинг елит
3. Интегер молестие лорем ат масса
4. Фацилисис ин претиум нисл аликует
5. Нулла волутпат аликуам велит
6. Фауцибус порта лацус фрингилла вел
7. Аенеан сит амет ерат нунц
8. Егет порттитор лорем

Описdl

Листе описа

Листа описа је савршена за дефинисање појмова.

Еуисмод

Вестибулум ид лигула порта фелис ​​еуисмод семпер егет лациниа одио сем нец елит.

Донец ид елит нон ми порта гравида ат егет метус.

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

Етиам порта сем малесуада магна моллис еуисмод.

Грађевински столови

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

Столови су одлични - за много ствари. Међутим, за сјајне табеле је потребно мало маркупирања да би биле корисне, скалабилне и читљиве (на нивоу кода). Ево неколико савета који ће вам помоћи.

Увек умотајте заглавља колона у <thead>тако да је хијерархија <thead>> <tr>> <th>.

Слично заглављима колона, сав садржај тела ваше табеле треба да буде умотан у а <tbody>тако да је ваша хијерархија <tbody>> <tr>> <td>.

Пример: подразумевани стилови табеле

Све табеле ће бити аутоматски стилизоване само са основним ивицама да би се обезбедила читљивост и одржала структура. Нема потребе за додавањем додатних класа или атрибута.

#	Име	Презиме	Језик
1	Неки	Једно	енглески језик
2	Јое	Сикпацк	енглески језик
3	Сту	Дент	Код

<табле цласс="цоммон-табле"> цласс = "цоммон-табле" >
  ...
</табле>

Пример: пругаста зебра

Будите мало маштовити са својим столовима додавањем зебрастих пруга—само додајте .zebra-stripedкласу.

#	Име	Презиме	Језик
1	Неки	Једно	енглески језик
2	Јое	Сикпацк	енглески језик
3	Сту	Дент	Код

Напомена: Зебра-трака је прогресивно побољшање које није доступно за старије прегледаче као што је ИЕ8 и старији.

<табле цласс="цоммон-табле зебра-стрипед"> цласс = "заједничка зебраста пругаста" >
...
</табле>

Пример: пругаста зебра са ТаблеСортер.јс

Узимајући претходни пример, побољшавамо корисност наших табела пружањем функционалности сортирања преко јКуери -ја и додатка Таблесортер . Кликните на заглавље било које колоне да бисте променили сортирање.

#	Име	Презиме	Језик
1	Твоје	Једно	енглески језик
2	Јое	Сикпацк	енглески језик
3	Сту	Дент	Код

<сцрипт срц="јс/јкуери/јкуери.таблесортер.мин.јс"></сцрипт> срц = "јс/јкуери/јкуери.таблесортер.мин.јс" ></сцрипт>
<сцрипт > 
  $ ( функција () { 
    $ ( "табле#сортТаблеЕкампле" ). таблесортер ({ сортЛист : [[ 1 , 0 ]] });  
  });
</сцрипт>
<табле цласс = "цоммон-табле зебра-стрипед" > 
  ...
</табле>

Подразумевани стилови

Свим обрасцима су дати подразумевани стилови да би се представили на читљив и скалабилан начин. Стилови су обезбеђени за унос текста, изборне листе, текстуалне области, радио дугмад и поља за потврду и дугмад.

Пример легенде форме

Кс-Ларге Инпут

Изаберите

1 2 3 4 5

Изаберите

1 2 3 4 5

Унос који се не може мењати

Нека вредност овде

Онемогућен унос

Кс-Ларге Инпут

Мали исечак текста помоћи

Пример легенде форме

Препендед Тект

@

Поље за потврду

Додато поље за потврду

Филе Инпут

Пример легенде форме

Листа опција

• Прва опција је ово и оно - обавезно наведите зашто је то одлично
• Друга опција се такође може проверити и укључити у резултате обрасца
• Опција три може — да, погодили сте — такође бити проверена и укључена у резултате обрасца
• Опција четири се не може проверити јер је онемогућена.

Напомена: Ознаке окружују све опције за много веће површине кликова и употребљивију форму.

Опсег датума

до Сва времена су приказана као пацифичко стандардно време (ГМТ -08:00).

Тектареа

Блок текста помоћи који описује поље изнад ако је потребно.

Листа опција

• Прва опција је ово и оно - обавезно наведите зашто је то одлично
• Друга опција се такође може проверити и укључити у резултате обрасца

Сачувај измене  Поништити, отказати

Наслагане форме

Додајте .form-stackedу ХТМЛ свог обрасца и имаћете ознаке на врху њихових поља уместо са леве стране. Ово одлично функционише ако су ваши обрасци кратки или имате две колоне уноса за теже формуларе.

Пример легенде форме

Кс-Ларге Инпут

Изаберите

1 2 3 4 5

Пример легенде форме

Кс-Ларге Инпут

Мали исечак текста помоћи

Листа опција

• Прва опција је ово и оно - обавезно наведите зашто је то одлично
• Друга опција се такође може проверити и укључити у резултате обрасца

Напомена: Ознаке окружују све опције за много веће површине кликова и употребљивију форму.

Сачувај измене  Поништити, отказати

Дугмад

Као конвенција, дугмад се користе за радње, док се везе користе за објекте. На пример, „Преузми“ може бити дугме, а „недавна активност“ може бити веза.

Сви тастери су подразумевано светло сиви, али .primaryје доступна плава класа. Осим тога, лако је користити сопствене стилове.

Пример дугмади

Стилови дугмади се могу применити на било шта са .btnпримењеним. Обично ћете желети да их примените само на елементе <a>, <button>, и селецт . <input>Ево како то изгледа:

Алтернативне величине

Желите већа или мања дугмад? Имајте то!

Дисаблед стате

За дугмад која нису активна или их је апликација онемогућила из једног или другог разлога, користите стање онемогућено. То је .disabledза везе и :disabledза <button>елементе.

Линкови

Дугмад

Шта је то

Наша горња трака је фиксна трака у којој се налази логотип или назив веб локације, примарна навигација и формулар за претрагу.

Прилагодљиво

Сви елементи унутар, као и цела горња трака такође су опциони. Можете одабрати да укључите логотип/име, навигацију, претрагу и секундарну навигацију—или било коју комбинацију тога.

Падајући мени укључени

Као део главне навигације, укључили смо могућност да додате падајуће меније у своју навигацију. Погледајте секундарну навигацију изнад (десно поравнато) да видите како се то ради.

Таблете и пилуле

Направите једноставну секундарну навигацију помоћу <ul>. Пребацивање између табова или таблета додавањем одговарајуће класе.

Одлично за подсекције садржаја као што су странице са подешавањима налога и временски оквири корисника за пребацивање између страница са сличним садржајем. Доступан у облику таблета или таблета.

• Кућа
• Профил
• Поруке
• Подешавања
• Контакт

<ул цласс="табс"> цласс = "табс" >
  <ли цласс = "ацтиве" >< а хреф = " # " > Почетна </а ></ли>  
  <ли>< а хреф = "#" > Профил </а ></ли> 
  <ли>< а хреф = "#" > Поруке </а ></ли> 
  <ли>< а хреф = "#" > Подешавања </а ></ли> 
  <ли>< а хреф = "#" > Контакт </а ></ли> 
</ул>

• Кућа
• Профил
• Поруке
• Подешавања
• Контакт

<ул цласс="пилуле"> цласс = "пилуле" >
  <ли цласс = "ацтиве" >< а хреф = " # " > Почетна </а ></ли>  
  <ли>< а хреф = "#" > Профил </а ></ли> 
  <ли>< а хреф = "#" > Поруке </а ></ли> 
  <ли>< а хреф = "#" > Подешавања </а ></ли> 
  <ли>< а хреф = "#" > Контакт </а ></ли> 
</ул>

Пагинација

Ултра поједностављена и минимално стилизована пагинација инспирисана Рдио-ом. Велики блок је тешко промашити, лако је скалабилан и пружа велике површине кликова.

<див цласс="пагинатион"> цласс = "пагинација" >
  <ул>
    <ли цласс = "прев дисаблед" >< а хреф = "#" > & ларр ; Претходно </а></ли>  
    <ли цласс = "ацтиве" >< а хреф = " # " > 1 </а ></ли>  
    <ли>< а хреф = "#" > 2 </а ></ли> 
    <ли>< а хреф = "#" > 3 </а ></ли> 
    <ли>< а хреф = "#" > 4 ​​</а ></ли> 
    <ли>< а хреф = "#" > 5 </а ></ли> 
    <ли цласс = "нект" > < а хреф = "#" > Нект &рарр; </а></ли>  
  </ул>
</див>

Основна упозорења

Поруке у једном реду за истицање неуспеха, могућег неуспеха или успеха акције. Посебно корисно за форме.

Блокирајте поруке

За поруке које захтевају мало објашњења, имамо упозорења о стилу пасуса. Они су савршени за појављивање дужих порука о грешци, упозорење корисника на радњу на чекању или само представљање информација ради већег нагласка на страници.

Модалс

Модали — дијалози или оквири за преглед — су одлични за контекстуалне радње у ситуацијама када је важно да се позадински контекст одржава.

Описи алатки

Твипсиес су веома корисни за помоћ збуњеном кориснику и усмеравање их у правом смеру.

Поповерс

Користите искачуће елементе да бисте страници пружили подтекстуалне информације без утицаја на изглед.

Боотстрап је направљен са Пребоот -ом, пакетом мешавина и променљивих отвореног кода који ће се користити у комбинацији са Лесс -ом , ЦСС предпроцесором за бржи и лакши развој веба.

Проверите како смо користили Пребоот у Боотстрап-у и како можете да га искористите ако одлучите да покренете Лесс на свом следећем пројекту.

Како се користи

Користите ову опцију да бисте у потпуности искористили Боотстрапове Лесс променљиве, миксине и угнежђење у ЦСС-у преко јавасцрипт-а у вашем претраживачу.

<линк рел="стилесхеет/лесс" хреф="лесс/боотстрап.лесс" медиа="алл" /> рел = "стилесхеет/лесс" хреф = "лесс/боотстрап.лесс" медиа = "алл" />   
<сцрипт срц = "јс/лесс-1.0.41.мин.јс" ></сцрипт> 

Не осећате решење за .јс? Испробајте апликацију Лесс Мац или користите Ноде.јс за компајлирање када примените свој код.

Шта је укључено

Ево неких од најважнијих делова онога што је укључено у Твиттер Боотстрап као део Боотстрап-а. Пређите на веб локацију Боотстрап или страницу пројекта Гитхуб да бисте преузели и сазнали више.

Променљиве боје

Променљиве у Лесс су савршене за одржавање и ажурирање ваше ЦСС главобоље без проблема. Када желите да промените вредност боје или често коришћену вредност, ажурирајте је на једном месту и спремни сте.

// Линкови
@линкЦолор : #8б59ц2;         
@линкЦолорХовер :     потамнити ( @линкЦолор , 10 ); 
// Греис
@блацк : #000;             
@граиДарк :           осветлити ( @блацк , 25 %); 
@сива :               осветљава ( @црна , 50 %); 
@граиЛигхт :          осветлити ( @блацк , 70 %); 
@граиЛигхтер :        осветлити ( @блацк , 90 %); 
@вхите : #ффф ;             
// Аццент Цолорс
@блуе : # 08б5фб ;              
@греен : # 46а546 ;             
@ред : # 9д261д ;               
@иеллов : #ффц40д;            
@оранге : #ф89406;            
@пинк : # ц3325ф ;              
@љубичаста : #7а43б6;            
// Баселине
@баселине : 20пк ;          

Коментаришући

Лесс такође пружа још један стил коментарисања поред ЦСС-ове нормалне /* ... */синтаксе.

// Ово је коментар
/* Ово је такође коментар */

Микинс до вазоо

Миксини су у основи укључени или делимични за ЦСС, што вам омогућава да комбинујете блок кода у један. Одлични су за својства са префиксом добављача као што су box-shadow, градијенти унакрсних претраживача, скупови фонтова и још много тога. Испод је пример миксина који су укључени у Боотстрап.

Групе фонтова

#фонт {
  . стенограм ( @веигхт : нормал , @сизе : 14пк , @ линеХеигхт : 20пк ) {     
    фонт - сизе : @сизе ; 
    фонт - веигхт : @веигхт ; 
висина     линије : @ линеХеигхт ; 
  }
  . санс - сериф ( @веигхт : нормал , @сизе : 14пк , @ линеХеигхт : 20пк ) {     
породица     фонтова : " Хелветица Неуе" , Хелветица , Ариал , санс - сериф ;   
    фонт - сизе : @сизе ; 
    фонт - веигхт : @веигхт ; 
висина     линије : @ линеХеигхт ; 
  }
  . сериф ( @веигхт : нормал , @сизе : 14пк , @ линеХеигхт : 20пк ) {     
    фонт - фамили : "Георгиа" , Тимес Нев Роман , Тимес , санс - сериф ;     
    фонт - сизе : @сизе ; 
    фонт - веигхт : @веигхт ; 
висина     линије : @ линеХеигхт ; 
  }
  . моноспаце ( @веигхт : нормал , @сизе : 12пк , @ линеХеигхт : 20пк ) {     
    фонт - фамилија : "Монацо" , Цоуриер Нев , моноспаце ;   
    фонт - сизе : @сизе ; 
    фонт - веигхт : @веигхт ; 
висина     линије : @ линеХеигхт ; 
  }
}

Градијента

#градиент {
  . хоризонтално ( @стартЦолор : #555, @ендЦолор: #333) { 
    бацкгроунд - цолор : @ендЦолор ; 
    позадина - понављање : понављање - к ;
    бацкгроунд - имаге : - кхтмл - градијент ( линеарно , лево горе , десно горе , од ( @стартЦолор ), до ( @ендЦолор )); // Конкуерор   
    бацкгроунд - имаге : - моз - линеар - градиент ( лево , @стартЦолор , @ендЦолор ); // ФФ 3.6+    
    бацкгроунд - имаге : - мс - линеар - градиент ( лево , @стартЦолор , @ендЦолор ); // ИЕ10    
    бацкгроунд - имаге : - вебкит - градијент ( линеарно , лево горе , десно горе , боја - стоп ( 0 %, @стартЦолор ), боја - стоп ( 100 %, @ендЦолор )); // Сафари 4+, Цхроме 2+    
    бацкгроунд - имаге : - вебкит - линеар - градиент ( лево , @стартЦолор , @ендЦолор ); // Сафари 5.1+, Цхроме 10+    
    бацкгроунд - имаге : - о - линеар - градиент ( лево , @стартЦолор , @ендЦолор ); // Опера 11.10    
    - мс - филтер : %( "прогид:ДКСИмагеТрансформ.Мицрософт.градиент(стартЦолорстр='%д', ендЦолорстр='%д', ГрадиентТипе=1)" , @стартЦолор , @ендЦолор ); // ИЕ8+  
    филтер : е (%( "прогид:ДКСИмагеТрансформ.Мицрософт.градиент(стартЦолорстр='%д', ендЦолорстр='%д', ГрадиентТипе=1)" , @стартЦолор , @ендЦолор )); // ИЕ6 и ИЕ7 
    бацкгроунд - имаге : линеарни - градијент ( лево , @стартЦолор , @ендЦолор ); // Ле стандард   
  }
  . вертикално ( @стартЦолор : #555, @ендЦолор: #333) { 
    бацкгроунд - цолор : @ендЦолор ; 
    позадина - понављање : понављање - к ;
    бацкгроунд - имаге : - кхтмл - градијент ( линеарно , лево горе , лево доле , од ( @стартЦолор ), до ( @ендЦолор )); // Конкуерор   
    бацкгроунд - имаге : - моз - линеар - градиент ( @стартЦолор , @ендЦолор ); // ФФ 3.6+   
    бацкгроу��д - имаге : - мс - линеар - градиент ( @стартЦолор , @ендЦолор ); // ИЕ10   
    бацкгроунд - имаге : - вебкит - градијент ( линеарно , лево горе , лево доле , боја - стоп ( 0 %, @стартЦолор ), боја - стоп ( 100 %, @ендЦолор )); // Сафари 4+, Цхроме 2+    
    бацкгроунд - имаге : - вебкит - линеар - градиент ( @стартЦолор , @ендЦолор ); // Сафари 5.1+, Цхроме 10+   
    бацкгроунд - имаге : - о - линеар - градиент ( @стартЦолор , @ендЦолор ); // Опера 11.10   
    - мс - филтер : %( "прогид:ДКСИмагеТрансформ.Мицрософт.градиент(стартЦолорстр='%д', ендЦолорстр='%д', ГрадиентТипе=0)" , @стартЦолор , @ендЦолор ); // ИЕ8+  
    филтер : е (%( "прогид:ДКСИмагеТрансформ.Мицрософт.градиент(стартЦолорстр='%д', ендЦолорстр='%д', ГрадиентТипе=0)" , @стартЦолор , @ендЦолор )); // ИЕ6 и ИЕ7 
    бацкгроунд - имаге : линеарни - градијент ( @стартЦолор , @ендЦолор ); // Стандард  
  }
  . усмерено ( @стартЦолор : #555, @ендЦолор: #333, @дег: 45 степени) { 
    ...
  }
  . вертикално - три - боје ( @стартЦолор : #00б3ее, @мидЦолор: #7а43б6, @цолорСтоп: 0.5, @ендЦолор: #ц3325ф) { 
    ...
  }
}

Операције и мрежни систем

Замислите се и извршите математику да бисте генерисали флексибилне и моћне мешавине попут оног испод.

// Гридитуде
@гридЦолумнс : 16 ;       
@гридЦолумнВидтх : 40пк ;   
@гридГуттерВидтх : 20пк ;   
// Систем мреже
. контејнер {
  ширина : @ситеВидтх ; 
  маргина : 0 ауто ;  
  . цлеарфик ();
}
. колоне ( @цолумнСпан : 1 ) {  
  дисплаи : инлине ; 
  флоат : лево ;
  ширина : ( @гридЦолумнВидтх * @цолумнСпан ) + ( @гридГуттерВидтх * ( @цолумнСпан - 1 ));         
  маргин - лефт : @гридГуттерВидтх ; 
  &: прво - дете {
    маргин - лефт : 0 ; 
  }
}
. помак ( @цолумнОффсет : 1 ) {  
  маргин - лефт : ( @гридЦолумнВидтх * @цолумнОффсет ) + ( @гридГуттерВидтх * ( @цолумнОффсет - 1 )) ! важно ;          
}