өстә
сулда
уң
аста
Ботстрап

Ботстрап, Твиттердан

Bootstrap - веб-сайтлар һәм сайтларның үсешен башлап җибәрү өчен эшләнгән Твиттердан кораллар җыелмасы.
Бу типография, формалар, төймәләр, таблицалар, челтәрләр, навигация һ.б. өчен төп CSS һәм HTMLны үз эченә ала.

Нерд уяулыгы: Bootstrap Less белән төзелгән һәм заманча браузерларны истә тотып капкадан чыгару өчен эшләнгән.

CSS кайнар линк

Иң тиз һәм җиңел башлау өчен, бу фрагментны веб-битегезгә күчерегез.

Аны азрак кулланыгыз

Азрак куллану фанаты? Проблема юк, репоны клонлагыз һәм бу юлларны өстәгез:

GitHub

Github'тагы рәсми Bootstrap репо белән йөкләү, тарату, тарту, файл чыгару һәм башкалар.

GitHub'та Bootstrap »

Хәзерге вакытта v1.3.0

Bootstrap турында кыскача тарих, браузер ярдәме һәм башкалар турында

Тарих

Твиттердагы инженерлар тарихи яктан таныш булган китапханәләрне диярлек кулландылар. Ботстрап тәкъдим ителгән проблемаларга җавап буларак башланды. Күпчелек искиткеч кешеләр ярдәмендә Bootstrap сизелерлек үсә.

Dev.twitter.com сайтында тулырак укыгыз ›

Браузер ярдәме

Bootstrap Chrome, Safari, Internet Explorer һәм Firefox кебек эре заманча браузерларда сынала һәм ярдәм итә.

Chrome, Safari, Internet Explorer һәм Firefox'та сынап карадылар
  • Соңгы Сафари
  • Соңгы Google Chrome
  • Firefox 4+
  • Internet Explorer 7+
  • Опера 11

Нәрсә кертелгән

Bootstrap тупланган CSS, компиляцияләнмәгән һәм үрнәк шаблоннар белән тулы.

Тиз башлангыч мисаллар

Тиз шаблоннар кирәкме? Без бергә туплаган бу төп мисалларны карагыз:

  • Герой берәмлеге белән гади өч баганалы макет
  • Статик ян ягы белән сыеклык урнашуы
  • Кушымталар өчен гади асылынган контейнер

Челтәр системасы 940px стандартны селкетегез яки үзегезнекен әйләндерегез

Килешү челтәре

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

Челтәр билгесе

Монда күрсәтелгәнчә, төп макет ике "багана" белән ясалырга мөмкин, аларның һәрберсе безнең челтәр системасы өлеше итеп билгеләгән 16 нигез баганасын үз эченә ала. Күбрәк вариацияләр өчен түбәндәге мисалларны карагыз.

  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
8
8
5
11
16

Колонналарны офсетлау

4
8 офсет 4
1/3 офсет 2 / 3с
4 офсет 4
4 офсет 4
5 офсет 3
5 офсет 3
10 офсет 6

Оя баганалары

.rowӘгәр дә булган багананы булдырып, эчтәлекне оялагыз.

Ояланган баганалар үрнәге

1 нче багана
2 нче дәрәҗә
2 нче дәрәҗә 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     1 нче багана
  4.     <div class = "row" > 
  5.       <div class = "span6" > 
  6.         2 нче дәрәҗә
  7.       </div>
  8.       <div class = "span6" > 
  9.         2 нче дәрәҗә
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

Grз челтәрегезне әйләндерегез

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

Челтәр эчендә

Челтәр системасын үзгәртү өчен кирәк булган үзгәрешләр хәзерге вакытта яши preboot.less.

Үзгәрүчән Килешенгән кыйммәт Тасвирлау
@gridColumns 16 Челтәр эчендә баганалар саны
@gridColumnWidth 40px Челтәр эчендәге һәр багананың киңлеге
@gridGutterWidth 20px Eachәр багана арасында тискәре урын
@siteWidth Барлык баганаларның һәм чокырларның исәпләнгән суммасы Колонналар һәм чокырлар санын санап, .fixed-container()миксинның киңлеген билгеләү өчен без төп матчны кулланабыз.

Хәзер көйләү

Челтәрне үзгәртү өч @grid-*үзгәрүчене үзгәртү һәм Кечкенә файлларны кабатлау дигән сүз.

Bootstrap 24 баганага кадәр челтәр системасын эшкәртү өчен җиһазландырылган; Килешү бары тик 16.

  1. @gridColumns : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

Компиляцияләнгәч, сез урнаштырылырсыз!

Веб -битләр ясау өчен төп шаблоннар

Тикшерелгән макет

Килешү һәм гади 940px киңлектә, бер сайт белән тәэмин ителгән теләсә нинди вебсайт яки бит өчен үзәкләштерелгән макет <div.container>.

  1. <body>
  2.   <div class = "контейнер" > 
  3.     ...
  4.   </div>
  5. </body>

Сыеклык урнашуы

Мин һәм максималь киңлекләр һәм сул як ягы белән альтернатив, сыгылмалы сыеклык структурасы. Кушымталар һәм документлар өчен бик яхшы.

  1. <body>
  2.   <div class = "контейнер-сыеклык" > 
  3.     <div class = "sidebar" > 
  4.       ...
  5.     </div>
  6.     <div class = "эчтәлек" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

Типография рубрикалары, абзацлар, исемлекләр һәм бүтән тип элементлары

Башлыклар һәм күчермә

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

Бөтен типографик челтәр безнең preboot.less файлындагы ике азрак үзгәрүчәнлеккә нигезләнгән: @basefontһәм @baseline. Беренчесе - төп шрифт зурлыгы, икенчесе - төп сызык биеклеге.

Без бу үзгәрүчәннәрне, һәм кайбер математиканы кулланабыз, кырлар, паддинглар, һәм безнең төрле типтагы биеклекләр һәм башкалар.

h1. 1 нче баш

h2. 2 нче баш

h3. 3 нче баш

h4. 4 нче баш

h5. 5 нче баш
h6. 6 нчы баш

Мисал абзац

Nullam quis risus ena urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Nullam id dolor id nibh ultricies транспорт чарасы.

Мисал рубрикасының суб-рубрикасы бар…

Төрле. элементлары

Басым, адреслар, кыскартулар куллану

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

Кайчан кулланырга

Басым тэглары ( <strong>һәм <em>) сүзнең яки ​​сүзтезмәнең тирә-як күчермәсенә караганда өстәмә әһәмиятен яки басымын күрсәтү өчен кулланылырга тиеш. <strong>Мөһимлек һәм стресска<em> басым ясау өчен кулланыгыз .

Абзацта басым

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

Искәрмә:<b> HTML5'та куллану һәм тегларны куллану әле дә яхшы, <i>һәм алар тиешенчә калын һәм италик булырга тиеш түгел (семантик элемент булса да, кулланыгыз). <b>өстәмә әһәмият бирмичә сүзләрне яки сүзтезмәләрне яктырту <i>өчен, шул ук вакытта тавыш, техник терминнар һ.б.

Адреслар

Элемент контакт мәгълүматы өчен иң <address>якын бабасы яки бөтен эш органы өчен кулланыла. Менә аны ничек куллануның ике мисалы:

Твиттер , Inc.
_
_
Тулы исем
[email protected]

Искәрмә: һәрбер сызык <address>сызык-тәнәфес () белән тәмамланырга тиеш, яки эчтәлекне дөрес төзү <br />өчен блок дәрәҗәсендәге тег белән төрелергә тиеш (мәсәлән ).<p>

Кыскартулар

Кыскартулар һәм кыскартулар өчен <abbr>тегны кулланыгыз ( HTML5<acronym> искергән ). Теног эчендә стенограмма формасын куегыз һәм тулы исем өчен исем куегыз.

Блоккотлар

<blockquote> <p> <small>

Ничек китерергә

Блоккотны кертү өчен, әйләндереп <blockquote>алыгыз . Чыганагыгызны китерү өчен элементны кулланыгыз, һәм сез моңа кадәр эм сызыгын алырсыз .<p><small><small>&mdash;

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere erat anten venenatis dapibus posuere velit aliquet.

Доктор uliлий Хибберт 
  1. <blockquote>
  2.   <p> Лорем ипсум долор амет утыра, консексетур элитасы. Integer posuere ante venenatis dapibus posuere velit aliquet. </p>
  3.   <small> доктор uliлий Хибберт </small>
  4. </blockquote>

Исемлекләр

Тәртипсез<ul>

  • Лорем ипсум долор амет утыра
  • Consectetur adipiscing elit
  • Массадагы тулы молести лорем
  • Претиум нисл аликетында фасилис
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Пурус содалес ультрикасы
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан утыра
  • Порттор лоремасын алыгыз

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

  • Лорем ипсум долор амет утыра
  • Consectetur adipiscing elit
  • Массадагы тулы молести лорем
  • Претиум нисл аликетында фасилис
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Пурус содалес ультрикасы
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Энеан утыра
  • Порттор лоремасын алыгыз

Заказлы<ol>

  1. Лорем ипсум долор амет утыра
  2. Consectetur adipiscing elit
  3. Массадагы тулы молести лорем
  4. Претиум нисл аликетында фасилис
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Энеан утыра
  8. Порттор лоремасын алыгыз

Тасвирлауdl

Тасвирлау исемлекләре
Тасвирлау исемлеге терминнарны билгеләү өчен бик яхшы.
Эвизмод
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida eget metus.
Малесуада портасы
Etiam porta sem maleuada magna mollis euismod.

Код

<code> <pre>

Кодны ике гади тэг белән стильдә куегыз. Javascript аша тагын да искиткеч күренеш өчен, Google кодын матур итеп китапханәгә ташлагыз һәм сез урнаштырылган.

Код тәкъдим итү

Код, блоклар яки сниппетлар гына, стиль белән дөрес тег белән урап кына күрсәтелергә мөмкин. Берничә сызыктан торган код блоклары өчен <pre>элементны кулланыгыз. Эчтәлек коды өчен <code>элементны кулланыгыз.

Элемент Нәтиҗә
<code> Мондый текст рәтендә сезнең төрелгән кодыгыз бу >html<элементка охшар.
<pre> 
<div>
  <h1> Башлам </h1>
  <p> Монда нәрсәдер ... </p>
</div>

Искәрмә: кодны preтэглар эчендә мөмкин кадәр сул якка саклагыз. ул барлык кыстыргычларны күрсәтәчәк.
<pre class="prettyprint">

Google-code-prettify китапханәсен кулланып, сез код блоклары бераз башка визуаль стиль һәм автоматик синтаксис яктырту аласыз.

<div> <h1> Башлам </h1> <p> Монда нәрсәдер ... </p> </div>

Google-code-prettify-ны йөкләү һәм куллану өчен укуны карау.

Эчке этикеткалар

<span class="label">

Тән текстындагы теләсә нинди фразага игътибар итегез яки флаг ясагыз.

Теләсә нинди әйберне билгеләргә

Беркайчан да шундый матур Яңа кирәк иде! яки код язганда мөһим флаглар? Хәер, хәзер сездә алар бар. Килешү буенча нәрсә кертелгән:

Ярлык Нәтиҗә
<span class="label">Default</span> Килешү
<span class="label success">New</span> Яңа
<span class="label warning">Warning</span> Кисәтү
<span class="label important">Important</span> Мөһим
<span class="label notice">Notice</span> Игътибар итегез

Медиа Рәсемнәр һәм видеолар күрсәтү

Медиа челтәре

Түбән HTML эзе һәм минималь стильле битләрдә төрле зурлыктагы эскизларны күрсәтегез.

Мисал эскизлары

Эскизлар .media-gridтеләсә нинди зурлыкта булырга мөмкин, ләкин алар урнаштырылган Bootstrap челтәр системасына турыдан-туры ясалганда иң яхшы эшли. 90, 210, 330 кебек рәсем киңлекләре берничә пиксель паддер белән берләшәләр .span2, .span4һәм .span6багана зурлыкларына тигез.

Зур

Урта

Кечкенә

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

Медиа челтәрләрен куллану җиңел, билгеле ягында гади. Аларның үлчәмнәре бары тик кертелгән рәсемнәрнең зурлыгына нигезләнгән.

  1. <ul class = "media-grid" > 
  2.   <li>
  3.     <a href = "#"> _ 
  4.       <img class = "эскиз" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#"> _ 
  9.       <img class = "эскиз" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

Таблицалар , сез аны чамаладыгыз, таблицалар

Таблицалар төзү

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

Таблицалар бик яхшы - күп нәрсә өчен. Зур таблицалар, файдалы, масштаблы һәм укылырлык булырга (код дәрәҗәсендә) бераз билгеләргә ярату кирәк. Менә берничә киңәш.

Columnәрвакыт багана башларын иерархия <thead>белән <thead>каплагыз .<tr><th>

Колонка башларына охшаган, сезнең өстәлнең бөтен эчтәлеге <tbody>сезнең иерархиягез белән уралган булырга тиеш <tbody>>> .<tr><td>

Мисал: Килешү өстәл стиле

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

# Исем Фамилия Тел
1 Кайберләре Бер Инглиз
2 Джо Алты пакет Инглиз
3 Стю Теш Код 
  1. <таблица>
  2.   ...
  3. </table>

Мисал: Зебра-сызыклы

Зебра-стрипинг өстәп, өстәлләрегез белән бераз хыялланыгыз - .zebra-stripedклассны өстәгез.

# Исем Фамилия Тел
1 Кайберләре Бер Инглиз
2 Джо Алты пакет Инглиз
3 Стю Теш Код

Искәрмә: Zebra-striping - прогрессив көчәйтү, IE8 һәм аннан түбәнрәк браузерлар өчен мөмкин түгел.

  1. <өстәл класы = "зебра-сызыклы" > 
  2. ...
  3. </table>

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

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

# Исем Фамилия Тел
2 Джо Алты пакет Инглиз
3 Стю Теш Код
1 Сезнең Бер Инглиз 
  1. <script src = "js / jquery / jquery.tablesorter.min.js" > </script> 
  2. <скрипт > 
  3.   $ ( функция () { 
  4.     $ ( "таблица # sortTableExample" ). таблицалар ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <өстәл класы = "зебра-сызыклы" > 
  8.   ...
  9. </table>

Формалар

Килешү стильләре

Барлык формаларга да укырлык һәм масштаблы итеп күрсәтү өчен демократик стильләр бирелә. Стильләр текст кертү, исемлекләр, текстлар, радио төймәләре һәм пунктлар, төймәләр өчен тәкъдим ителә.

Мисал легендасы
Кайбер кыйммәтләр монда
Ярдәм текстының кечкенә фрагменты
Мисал легендасы
@
Мисал легендасы
Искәрмә: этикеткалар зуррак басу өлкәләре һәм кулланырлык форма өчен барлык вариантларны чолгап ала.
to Барлык вакытлар Тын океан стандарт вакыты итеп күрсәтелә (GMT -08: 00).
Кирәк булса, өстә кырны сурәтләү өчен ярдәм тексты блокы.
 

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

Формагызның HTML-ны өстәгез .form-stacked, һәм аларның сул ягына түгел, ә кырлары өстендә ярлыклар булыр. Сезнең формалар кыска булса яки авыррак формалар өчен ике багана булса, бу бик яхшы эшли.

Мисал легендасы
Мисал легендасы
Ярдәм текстының кечкенә фрагменты
Искәрмә: этикеткалар зуррак басу өлкәләре һәм кулланырлык форма өчен барлык вариантларны чолгап ала.
 

Кыр зурлыклары

Сезнең билгеләргә берничә класс өстәп теләсә нинди форманы input, selectяки киңлекне көйләгез .textarea

V1.3.0 булганга, без форма элементлары өчен челтәргә нигезләнгән зурлык классларын өстәдек. Зинһар , боларны булган һ.б. классларда кулланыгыз..mini.small

Кнопкалар

Конвенция буларак, төймәләр эш өчен кулланыла, ә сылтамалар объектлар өчен кулланыла. Мәсәлән, "Йөкләү" төймә, "соңгы эшчәнлек" сылтама булырга мөмкин.

Барлык төймәләр дә ачык соры стильгә туры килә, ләкин төрле төсле стильләр өчен берничә функциональ класс кулланылырга мөмкин. Бу классларга зәңгәр .primaryкласс, ачык-зәңгәр .infoкласс, яшел .successкласс һәм кызыл .dangerкласс керә.

Мисал төймәләре

Кнопка стильләре кулланылган теләсә нинди әйбердә .btnкулланылырга мөмкин. <a>Гадәттә сез аларны гына кулланырга , элементларны <button>сайларга теләрсез . <input>Менә ул ничек:

       

Альтернатив зурлыклар

Зуррак яки кечерәк төймәләр? Бул!

Беренчел чара Эш
Беренчел чара Эш

Инвалид хәл

Актив булмаган яки кушымта тарафыннан теге яки бу сәбәп аркасында инвалид булган төймәләр өчен инвалид халәтне кулланыгыз. Бу .disabledсылтамалар һәм элементлар :disabledөчен .<button>

Сылтамалар

Беренчел чара Эш

Кнопкалар

 

Уңыш, кисәтү, хаталар яки хәбәрләр өчен хәбәрләр һәм хаталар

Төп хәбәрләр

.alert-message

Уңышсызлыкны, мөмкин булган уңышсызлыкны яки эшнең уңышын күрсәтү өчен бер юллы хәбәрләр. Бигрәк тә формалар өчен файдалы.

Javascript алыгыз »

×

Изге гуакамол! Иң яхшы тикшерү, сез бик яхшы күренмисез.

×

Әй! Бу һәм теге үзгәртегез һәм кабатлап карагыз.

×

Афәрин! Сез бу уяу хәбәрне уңышлы укыйсыз.

×

Идарә итә! Бу сезнең игътибарыгызга мохтаҗ, ләкин бу әле зур өстенлек түгел.

Мисал коды

  1. <div class = "кисәтүче хәбәр" > 
  2.   <a class = "close" href = "#"> × </a> _  
  3.   <p> <strong> Изге гуакамол! </strong> Иң яхшы тикшерү, сез бик яхшы күренмисез. </p>
  4. </div>

Хәбәрләрне блоклау

.alert-message.block-message

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

Javascript алыгыз »

×

Изге гуакамол! Бу кисәтү! Иң яхшы тикшерү, сез бик яхшы күренмисез. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur һ.б.

Бу чара күрегез Яки моны эшлә
×

Әй! Сез хата таптыгыз! Бу һәм теге үзгәртегез һәм кабатлап карагыз.

  • Duis mollis est commodo luctus
  • Nisi erat porttitor ligula
  • Lacinia odio sem nec elit
Бу чара күрегез Яки моны эшлә
×

Афәрин! Сез бу уяу хәбәрне уңышлы укыйсыз. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur көлке мус. Maecenas faucibus mollis interdum.

Бу чара күрегез Яки моны эшлә
×

Идарә итә! Бу сезнең игътибарыгызга мохтаҗ, ләкин бу әле зур өстенлек түгел.

Бу чара күрегез Яки моны эшлә

Мисал коды

  1. <div class = "alert-message block-message кисәтү" > 
  2.   <a class = "close" href = "#"> × </a> _  
  3.   <p> <strong> Изге гуакамол! Бу кисәтү! </strong> Иң яхшы тикшерү, сез бик яхшы күренмисез. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur һ.б. </p>
  4.   <div class = "уяу-гамәлләр" > 
  5.     <a class = "btn small" href = "#"> Бу эшне эшләгез </a> <a class = "btn small" href = "#"> Яисә моны эшләгез </a>     
  6.   </div>
  7. </div>

Поповерлар Модальләрдә, инструментлар, поповерларда эчтәлек күрсәтү өчен компонентлар

Модальләр

Модальләр - диалоглар яки яктырткычлар - фон контекстын саклау мөһим булган контекстуаль чаралар өчен бик яхшы.

Javascript алыгыз »

×

Модаль башлам

Бер яхшы тән…

Башлангыч Икенче

Кораллар

Twipsies буталчык кулланучыга булышу һәм аларны дөрес юнәлештә күрсәтү өчен бик файдалы.

Javascript алыгыз »

Лорем ипсум доллары утыра амет илло хата ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus resultunturur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam архитектура эксплуатациясе кваси фугит, тотам долоремке унде сунт сед дикта ква аккусантиум фугит волупт вему волуптас вему волутам

Поповерлар

Биткә субтекстуаль мәгълүмат бирү өчен поповерларны кулланыгыз, макетка тәэсир итмичә.

Javascript алыгыз »

Поповер исеме

Etiam porta sem maleuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, эроста вестибулум.

Bootstrap белән javascript куллану Сезне башлау өчен плагиннар индексы

Эш башы

Javascript-ны Bootstrap китапханәсе белән берләштерү бик җиңел. Түбәндә без нигезләрне карап чыгабыз һәм сезне башлар өчен искиткеч плагиннар белән тәэмин итәбез!

Javascript документларын карау »

Нәрсә кертелгән

Bootstrap-ның кайбер төп компонентларын jQuery һәм Ender белән эшләүче яңа махсус плагиннар белән тормышка китерегез . Сезнең конкрет үсеш ихтыяҗларыгызга туры китереп аларны киңәйтергә һәм үзгәртергә тәкъдим итәбез.

Файл Тасвирлау
bootstrap-modal.js Безнең Модаль плагин - традицион модаль js плагинын супер нечкә алу! Без твиттерда таләп иткән ялан функцияне кертү өчен аеруча игътибар иттек.
bootstrap-alerts.js Сигнализация плагины - сигнализацияләргә якын функция өстәү өчен супер кечкенә класс.
bootstrap-dropdown.js Бу плагин ботстрапның төп тактасына яисә өстәлгән навигациягә төшү үзара бәйләнешен өстәү өчен.
bootstrap-scrollspy.js ScrollSpy плагины - bootstrap өстәмәсенә әйләндерү позициясенә нигезләнеп автоматик яңарту навы өстәү өчен.
bootstrap-tabs.js Бу плагин велосипедта җирле эчтәлек аша тиз, динамик кыстыргыч һәм таблетка функциясен өсти.
bootstrap-twipsy.js Джейсон Фрэм язган искиткеч jQuery.tipsy плагинына нигезләнеп; twipsy - яңартылган версия, ул рәсемнәргә таянмый, анимация өчен css3 куллана, һәм җирле исем саклау өчен мәгълүмат-атрибутлар!
bootstrap-popover.js Поповер плагины сезнең кушымтагызга поповерлар өстәү өчен гади интерфейс тәкъдим итә. Бу boostrap-twipsy.js плагинын киңәйтә, шуңа күрә сезнең проектка поповерлар керткәндә шул файлны кулга алыгыз!

Javascript кирәкме?

Opeк! Bootstrap иң беренче чиратта CSS китапханәсе итеп эшләнгән. Бу javascript кертелгән стильләр өстендә төп интерактив катлам тәкъдим итә.

Ләкин, javascript кирәк булган кешеләр өчен, без Bootstrap-ны javascript белән ничек интеграцияләргә икәнен аңларга ярдәм итәр өчен һәм шунда ук төп функция өчен тиз, җиңел вариант бирер өчен, өстә плагиннар бирдек.

Күбрәк мәгълүмат алу һәм кайбер тере демо карау өчен зинһар, безнең плагин документация битенә мөрәҗәгать итегез .

Bootstrap-ны азрак суперчар белән куллану CSS-ны үзгәрүләр, миксиннар һәм функцияләр белән кулланыгыз

Bootstrap Preboot белән төзелгән , ачык чыганаклы миксиннар һәм үзгәрешләр пакеты, тизрәк һәм җиңелрәк веб үсеше өчен CSS эшкәртүчесе Less белән берлектә кулланылачак.

Bootstrap'та Preboot'ны ничек кулланганыбызны һәм киләсе проектта азрак эшләсәгез, сез аны ничек куллана алуыгызны тикшерегез.

Аны ничек кулланырга

Bootstrap-ның аз үзгәрүчәннәрен, миксиннарын һәм CSS-та оя коруны браузерыгыздагы javascript аша тулысынча куллану өчен бу параметрны кулланыгыз.

  1. <сылтама rel = "стиль таблицасы / азрак" href = "аз / bootstrap.less" медиа = "барысы" />    
  2. <script src = "js / less-1.1.3.min.js" > </script>

.Js чишелешен сизми? Кечкенә Mac кушымтасын кулланып карагыз яки Node.js кулланыгыз , кодыгызны урнаштырганда.

Нәрсә кертелгән

Bootstrap кысаларында Twitter Bootstrap'ка кертелгәннәрнең кайбер моментлары. Күбрәк йөкләү һәм өйрәнү өчен Bootstrap сайтына яки Github проект битенә керегез.

Variзгәрешләр

Кечкенә үзгәрүләр сезнең CSS баш авыртуыгызны саклап калу һәм яңарту өчен бик яхшы. Төс кыйммәтен яки еш кулланыла торган кыйммәтне үзгәртергә теләгәндә, аны бер урында яңартып торыгыз.

  1. // Сылтамалар
  2. @linkColor : # 8b59c2;         
  3. @linkColorHover :     караңгылану ( @linkColor , 10 ); 
  4.  
  5. // Соры
  6. @black : # 000;             
  7. @grayDark :           җиңеләйтегез ( @black , 25 %); 
  8. @gray :               җиңеләйтегез ( @black , 50 %); 
  9. @grayLight :          җиңеләйтегез ( @black , 70 %); 
  10. @grayLighter :        җиңеләйтегез ( @black , 90 %); 
  11. @ ак : #fff;             
  12.  
  13. // Акцент төсләре
  14. @blue : # 08b5fb;              
  15. @green : # 46a546;             
  16. @red : # 9d261d;               
  17. @yellow : # ffc40d;            
  18. @orange : # f89406;            
  19. @pink : # c3325f;              
  20. @purple : # 7a43b6;            
  21.  
  22. // Төп челтәр
  23. @basefont : 13px ;          
  24. @baseline : 18px ;

Аңлатма

CSS нормаль /* ... */синтаксисына өстәп, аңлатма бирүнең тагын бер стиле тәкъдим ителә.

  1. // Бу аңлатма
  2. / * Бу шулай ук ​​аңлатма * /

Вазу катнашмасы

Миксиннар, нигездә, CSS өчен өлешләр яки өлешләр, сезгә код блогын берләштерергә мөмкинлек бирә. Алар сатучы префиксланган үзлекләр өчен бик яхшы box-shadow, кросс-браузер градиентлары, шрифт стеклары һәм башкалар. Түбәндә Bootstrap белән кертелгән миксиннар үрнәге.

Шрифт сенажлары

  1. # шрифт {
  2.   . стенограмма ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {     
  3.     шрифт - зурлык : @size ; 
  4.     шрифт - авырлык : @ авырлык ; 
  5.     сызык - биеклек : @lineHeight ; 
  6.   }
  7.   . санс - сериф ( @ авырлык : нормаль , @ зурлык : 14px , @lineHeight : 20px ) {     
  8.     шрифт - гаилә : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
  9.     шрифт - зурлык : @size ; 
  10.     шрифт - авырлык : @ авырлык ; 
  11.     сызык - биеклек : @lineHeight ; 
  12.   }
  13.   ...
  14. }

Градиентлар

  1. # градиент {
  2.   ...
  3.   . вертикаль ( @startColor : # 555, @endColor: # 333) { 
  4.     фон - төс : @endColor ; 
  5.     фон - кабатлау : кабатлау - х ;
  6.     фон - рәсем : - khtml - градиент ( сызыклы , сул өске , сул асты , ( @startColor ) дан ( @endColor ) ); // Конкорор   
  7.     фон - рәсем : - моз - сызыклы - градиент ( @startColor , @endColor ); // FF 3.6+   
  8.     фон - рәсем : - мс - сызыклы - градиент ( @startColor , @endColor ); // IE10   
  9.     фон - рәсем : - вебкит - градиент ( сызыклы , сул өске , сул асты , төс - тукталыш ( 0 %, @startColor ), төс - тукталыш ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  10.     фон - рәсем : - вебкит - сызыклы - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  11.     фон - рәсем : - о - сызыклы - градиент ( @startColor , @endColor ); // Опера 11.10   
  12.     фон - рәсем : сызыклы - градиент ( @startColor , @endColor ); // Стандарт  
  13.   }
  14.   ...
  15. }

Операцияләр

Түбәндәге кебек сыгылучан һәм көчле катнашмалар тудыру өчен матур итеп математика эшләгез.

  1. // Челтәр
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @ сайт киңлеге : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // Берничә багана ясагыз
  8. . баганалар ( @columnSpan : 1 ) {  
  9.   киңлеге : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

Азрак туплау

/ Lib / файлларын үзгәрткәннән соң .less, сезгә bootstrap - *. *. *. Css һәм bootstrap - *. *. *. Min.css файлларын яңарту өчен аларны яңадан тупларга кирәк. Әгәр дә сез GitHub'ка тарту соравын җибәрәсез икән, сез һәрвакыт компиляцияләнергә тиеш.

Compыю юллары

Метод Адымнар
Макфил белән төен

Түбәндәге боерыкны эшләп npm белән азрак командование компилярын урнаштырыгыз:

$ npm азрак урнаштырыгыз

Урнаштырылганнан соң make, сезнең bootstrap каталогының тамырыннан эшләгез һәм сез барыгыз да әзер.

Өстәвенә, сездә сәгать урнаштырылган булса make watch, bootstrap lib-та файлны редакцияләгән саен bootstrap автоматик рәвештә яңадан торгызылырга мөмкин (бу кирәк түгел, уңайлык ысулы гына).
Javascript

Соңгы Less.js -ны йөкләгез һәм аңа юлны (һәм Bootstrap) кертегез head.

  1. <сылтама rel = "стиль таблицасы / азрак" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" > </script>

.Лайсыз файлларны кабатлау өчен, аларны саклагыз һәм битегезне яңадан йөкләгез. Less.js аларны туплый һәм җирле саклагычта саклый.
Команда сызыгы

Әгәр дә сездә азрак командование коралы урнаштырылган булса, түбәндәге боерыкны эшләгез:

$ lessc ./lib/bootstrap.less> bootstrap.css

Әгәр дә сез кайбер байтларны --compressсакларга тырышсагыз, бу боерыкка кертегез!
Mac кушымтасы азрак

Рәсми булмаган Mac кушымтасы .less файлларның каталогларын карый һәм караган .less файлның сакланганнан соң кодны җирле файлларга туплый.

Әгәр теләсәгез, сез кушымтадагы өстенлекләрне автоматик минимальләштерү өчен һәм тупланган файлларның нинди каталог белән тәмамлануы турында алыштыра аласыз.