Этиам порта семина любовь любвие. Maecenas faucibus mollis interdum. Морби leo risus, porta ac consectetur ac, vestibulum ва эрос.
Bootstrap як абзорест аз Twitter барои оғози рушди веббарномаҳо ва сайтҳо пешбинӣ шудааст.
Он асоси CSS ва HTML-ро барои типография, шаклҳо, тугмаҳо, ҷадвалҳо, шабакаҳо, паймоиш ва ғайра дар бар мегирад.
Огоҳии Nerd: Bootstrap бо Less сохта шудааст ва барои кор кардан аз дарвоза бо назардошти браузерҳои муосир тарҳрезӣ шудааст.
Барои зудтар ва осонтарин оғоз кардан, танҳо ин порчаро ба вебсайти худ нусхабардорӣ кунед.
Як мухлиси истифодаи Less? Мушкил нест, танҳо репо клон кунед ва ин сатрҳоро илова кунед:
Бо репои расмии Bootstrap дар Github зеркашӣ кунед, кашед, кашед, файлҳо ва ғайра.
Дар рӯзҳои қаблии Twitter, муҳандисон қариб ҳама китобхонаеро, ки бо онҳо шинос буданд, барои қонеъ кардани талаботи пештара истифода мекарданд. Bootstrap ҳамчун ҷавоб ба мушкилоте оғоз ёфт, ки дар давоми аввалин Hackweek Twitter зуд суръат гирифт.
Бо кӯмак ва фикру мулоҳизаҳои бисёре аз муҳандисон дар Twitter, Bootstrap ба таври назаррас афзоиш ёфт, то на танҳо услубҳои асосӣ, балки намунаҳои тарроҳии пешрафта ва пойдорро дар бар гирад.
Муфассалтар дар dev.twitter.com ›
Bootstrap дар браузерҳои асосии муосир ба монанди Chrome, Safari, Internet Explorer ва Firefox санҷида ва дастгирӣ карда мешавад.
Bootstrap бо қолибҳои CSS-и тартибдодашуда, тартибнашуда ва намунавӣ пурра меояд.
Системаи пешфарз шабакаи пешфарз, ки ҳамчун як қисми Bootstrap пешниҳод шудааст, шабакаи 16-сутуни васеъаш 940px мебошад. Ин мазза аз системаи маъмули шабакаи 960 аст, аммо бидуни маржа/паҳнкунии иловагӣ дар паҳлӯҳои чап ва рост.
Тавре ки дар ин ҷо нишон дода шудааст, тарҳбандии асосиро бо ду "сутун" сохтан мумкин аст, ки ҳар кадоми онҳо як қатор 16 сутуни бунёдиро дар бар мегиранд, ки мо ҳамчун як қисми системаи шабакаи мо муайян кардем. Барои вариантҳои бештар ба мисолҳои зер нигаред.
- <div class="сатр"> синф = "сатр" >
- <div class = "span6 сутунҳо" >
- ...
- </div>
- <div class = "span10 сутун" >
- ...
- </div>
- </div>
Тарҳбандии асосии 940px васеъ ва мутамаркази контейнер барои ҳама гуна сайт ё саҳифа.
- <бадан>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Сохтори саҳифаи моеъ ё моеъ бо паҳнои ҳадди ақал ва максимум ва панели паҳлӯи чап. Беҳтарин барои барномаҳо.
- <бадан>
- <div class = "контейнер-моеъ" >
- <div class = "панели паҳлӯ" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Як иерархияи типографии стандартӣ барои сохтори вебсайтҳои шумо.
Нуллам quis risus eget urna mollis ornare vel eu leo. Ҷамъияти дорои ҷамоатҳои натоиҷӣ ва бузургии ҳомиладорӣ, масхарабозӣ мебошад. 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, a augue pharetra.
Эзоҳ: Истифода <b>
ва <i>
тегҳо дар HTML5 ҳоло ҳам хуб аст, аммо онҳо дигар бо сабкҳои хос намеоянд. <b>
Барои таъкид кардани калимаҳо ё ибораҳо бе аҳамияти иловагӣ пешбинӣ шудааст, дар ҳоле <i>
ки асосан барои овоз, истилоҳҳои техникӣ ва ғайра.
Элемент <address>
барои маълумоти тамос барои аҷдодони наздиктарин ё тамоми кори кор истифода мешавад. Ин аст, ки чӣ тавр ба назар мерасад:
Эзоҳ: Ҳар як сатр <address>
бояд бо танаффуси сатр ( <br />
) анҷом ёбад ё дар теги сатҳи блок печонида шавад (масалан, <p>
) барои сохтори дурусти мундариҷа.
Барои ихтисорот ва ихтисоротҳо тегро истифода баред <abbr>
( <acronym>
дар HTML5 бекор карда шудааст ). Шакли стенографияро дар дохили тег ҷойгир кунед ва барои номи пурра унвон таъин кунед.
<blockquote>
<p>
<small>
<blockquote>
Барои дохил кардани иқтибос, печонед <p>
ва <small>
барчаспҳо. <small>
Барои истинод ба манбаи худ элементро истифода баред ва шумо —
пеш аз он тире мегиред.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бутуни рақамҳо як қисми пешқадамро нишон медиҳанд.
Доктор Юлиус Ҳибберт
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Ҷадвалҳо бузурганд - барои бисёр чизҳо. Бо вуҷуди ин, ҷадвалҳои олӣ барои муфид, миқёспазир ва хонданшаванда (дар сатҳи код) каме муҳаббати аломатгузорӣ лозиманд. Инҳоянд чанд маслиҳат барои кӯмак.
Ҳамеша сарлавҳаҳои сутуни худро тавре печонед <thead>
, ки иерархия <thead>
> <tr>
> <th>
бошад.
Монанди сарлавҳаҳои сутун, тамоми мундариҷаи бадани ҷадвали шумо бояд дар як печонида шаванд, <tbody>
то иерархияи шумо <tbody>
> <tr>
> <td>
бошад.
Ҳама ҷадвалҳо ба таври худкор танҳо бо сарҳадҳои муҳим тарҳрезӣ мешаванд, то хондан ва нигоҳ доштани сохторро таъмин кунанд. Илова кардани синфҳо ё атрибутҳои иловагӣ лозим нест.
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Баъзехо | Як | англисӣ |
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
- <ҷадвал синфи = "ҷадвали умумӣ"> синф = "мизи умумӣ" >
- ...
- </ҷадвал>
Бо илова кардани зебра-стрипинг бо ҷадвалҳои худ каме зебо шавед - танҳо .zebra-striped
синфро илова кунед.
# | Ном | Насаб | Забон |
---|---|---|---|
1 | Баъзехо | Як | англисӣ |
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
Эзоҳ: Zebra-striping як такмилдиҳии прогрессивӣ аст, ки барои браузерҳои кӯҳна ба монанди IE8 ва поёнтар дастрас нест.
- <table class="common-table zebra-striped"> синф = "мизи умумӣ зебра-рах" >
- ...
- </ҷадвал>
Бо назардошти мисоли қаблӣ, мо фоиданокии ҷадвалҳои худро тавассути фароҳам овардани функсияҳои ҷудокунӣ тавассути jQuery ва плагини Tablesorter беҳтар мегардонем . Барои тағир додани навъ сарлавҳаи ягон сутунро клик кунед.
# | Ном | Насаб | Забон |
---|---|---|---|
1 | шумо | Як | англисӣ |
2 | Ҷо | Sixpack | англисӣ |
3 | Stu | Дент | Кодекс |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <скрипт >
- $ ( функсия () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < синфи ҷадвал = "мизи умумӣ-зебра-рах" >
- ...
- </ҷадвал>
Ба ҳама шаклҳо услубҳои пешфарз дода мешаванд, то онҳоро ба таври қобили хондан ва миқёспазир пешниҳод кунанд. Сабкҳо барои вуруди матн, рӯйхатҳои интихоб, майдонҳои матн, тугмаҳои радио ва қуттиҳои қайд ва тугмаҳо таъмин карда мешаванд.
Ба .form-stacked
HTML-и формаи худ илова кунед ва шумо дар болои майдонҳои онҳо тамғакоғазҳо хоҳед дошт, на дар тарафи чапи онҳо. Ин хуб кор мекунад, агар шаклҳои шумо кӯтоҳ бошанд ё шумо ду сутуни вурудот барои шаклҳои вазнинтар дошта бошед.
Чун қоида, тугмаҳо барои амалҳо истифода мешаванд, дар ҳоле ки истинодҳо барои объектҳо истифода мешаванд. Масалан, "Зеркашӣ" метавонад тугма бошад ва "фаъолияти охирин" пайванде бошад.
Ҳама тугмаҳо ба услуби хокистарии сабук, аммо .primary
синфи кабуд дастрас аст. Илова бар ин, печонидани услубҳои шахсии худ осон аст.
Сабкҳои тугмаҳо метавонанд ба ҳама чиз бо .btn
истифодашаванда татбиқ карда шаванд. Одатан шумо мехоҳед, ки онҳоро танҳо ба <a>
, <button>
, ва <input>
унсурҳои интихобшуда татбиқ кунед. Ин аст, ки чӣ тавр ба назар мерасад:
Тугмаҳои калонтар ё хурдтарро мехоҳед? Бигиред!
Барои тугмаҳое, ки фаъол нестанд ё бо ин ё он сабаб аз ҷониби барнома ғайрифаъол шудаанд, ҳолати ғайрифаъолро истифода баред. Ин барои .disabled
истинодҳо ва элементҳост.:disabled
<button>
Паёмҳои як сатр барои таъкид кардани нокомӣ, нокомии эҳтимолӣ ё муваффақияти амал. Махсусан барои шакл муфид аст.
Барои паёмҳое, ки каме тавзеҳот талаб мекунанд, мо огоҳиҳои услуби параграф дорем. Инҳо барои пур кардани паёмҳои хатогии тӯлонӣ, огоҳ кардани корбар аз амали интизорӣ ё танҳо пешниҳод кардани маълумот барои таваҷҷӯҳи бештар дар саҳифа комиланд.
Модалҳо - муколамаҳо ё қуттиҳои равшанӣ - барои амалҳои контекстӣ дар ҳолатҳое, ки нигоҳ доштани контексти замина муҳим аст, хубанд.
Як тани хуб…
Twipsies барои кӯмак ба корбари ошуфташуда ва нишон додани онҳо ба самти дуруст хеле муфид аст.
Lorem ipsum dolar sit amet illo error ipsum veritatis autist perspicatitis iste voluptas natus illo quasi odit or natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Вобаста ба он, ки шумо меъмори меъмориро ошкор месозед, ба таври ошкоро ошкор карда мешавад.
Поповҳоро истифода баред, то маълумоти зерматнро ба саҳифа бидуни таъсир ба тарҳ таъмин кунед.
Этиам порта семина любовь любвие. Maecenas faucibus mollis interdum. Морби leo risus, porta ac consectetur ac, vestibulum ва эрос.
Bootstrap бо Preboot сохта шудааст , як бастаи кушодаи омехтаҳо ва тағирёбандаҳо, ки дар якҷоягӣ бо Less , протсессори CSS барои рушди тезтар ва осонтари веб истифода мешавад.
Санҷед, ки чӣ тавр мо Preboot-ро дар Bootstrap истифода мебарем ва чӣ гуна шумо метавонед онро истифода баред, агар шумо дар лоиҳаи навбатии худ Less-ро иҷро кунед.
Ин хосиятро барои истифодаи пурраи тағирёбандаҳои Less Bootstrap, миксинҳо ва лона дар CSS тавассути javascript дар браузери худ истифода баред.
- <link rel="stylesheet/less" href="less/bootstrap.less" media="ҳама" /> rel = "stylesheet/less" href = "less/bootstrap.less" media = "ҳама" />
- <script src = "js/less-1.0.41.min.js" ></script>
Ҳалли .js-ро эҳсос намекунед? Замимаи Less Mac-ро санҷед ё ҳангоми ҷойгиркунии коди худ Node.js -ро истифода баред.
Инҳоянд баъзе нуктаҳои муҳими он чизе, ки ба Twitter Bootstrap ҳамчун як қисми Bootstrap дохил карда шудаанд. Барои зеркашӣ ва маълумоти бештар ба вебсайти Bootstrap ё саҳифаи лоиҳаи Github гузаред.
Тағйирёбандаҳо дар Less барои нигоҳдорӣ ва навсозии дарди сари CSS-и шумо комиланд. Вақте ки шумо хоҳед, ки арзиши ранг ё арзиши зуд-зуд истифодашавандаро тағир диҳед, онро дар як ҷой навсозӣ кунед ва шумо муқаррар кардаед.
- // Пайвандҳо
- @linkColor : #8b59c2;
- @linkColorHover : торик кардан ( @linkColor , 10 );
- // Грейс
- @сиёҳ : #000;
- @grayDark : равшан кардан ( @black , 25 %);
- @грей : равшан кардан ( @сиёҳ , 50 %);
- @grayLight : равшан кардан ( @сиёҳ , 70 %);
- @grayLighter : равшан кардан ( @сиёҳ , 90 %);
- @сафед : #fff ;
- // Рангҳои аксент
- @кабуд : #08b5fb ;
- @сабз : #46a546 ;
- @red : # 9d261d;
- @зард : #ffc40d ;
- @orange : #f89406;
- @pink : #c3325f;
- @арғувон : #7a43b6 ;
- // Асосӣ
- @baseline : 20px ;
/* ... */
Илова ба синтаксиси муқаррарии CSS, Less инчунин услуби дигари шарҳро пешниҳод мекунад .
- // Ин шарҳ аст
- /* Ин ҳам шарҳ аст */
Миксинҳо асосан барои CSS-ро дар бар мегиранд ё қисман доранд, ки ба шумо имкон медиҳанд, ки блоки кодро дар як блок муттаҳид кунед. Онҳо барои хосиятҳои пешоянди фурӯшанда box-shadow
, ба монанди градиентҳои кросс-браузер, стекҳои шрифт ва ғайра бузурганд. Дар зер намунаи омехтаҳое оварда шудааст, ки ба Bootstrap дохил карда шудаанд.
- #шрифт {
- . стенография ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - андоза : @size ;
- шрифт - вазн : @weight ;
- сатр - баландӣ : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - оила : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- шрифт - андоза : @size ;
- шрифт - вазн : @weight ;
- сатр - баландӣ : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - оила : "Georgia" , Times New Roman , Times , sans - serif ;
- шрифт - андоза : @size ;
- шрифт - вазн : @weight ;
- сатр - баландӣ : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- шрифт - оила : "Монако" , Courier New , monospace ;
- шрифт - андоза : @size ;
- шрифт - вазн : @weight ;
- сатр - баландӣ : @lineHeight ;
- }
- }
- #градиент {
- . уфуқӣ ( @startColor : #555, @endColor: #333) {
- замина - ранг : @endColor ;
- замина - такрор : такрор - x ;
- замина - тасвир : - khtml - градиент ( хаттӣ , боло чап , боло аз рост , аз ( @startColor ), то ( @endColor )); // Konqueror
- замина - тасвир : - moz - linear - градиент ( аз чап , @startColor , @endColor ); // FF 3.6+
- замина - тасвир : - ms - хатӣ - градиент ( аз чап , @startColor , @endColor ); // IE10
- замина - тасвир : - webkit - градиент ( хаттӣ , болои чап , болои рост , ранг - қатъ ( 0 %, @startColor ), ранг - қатъ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- замина - тасвир : - webkit - linear - градиент ( аз чап , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- замина - тасвир : - o - градиенти хатӣ ( аз чап , @startColor , @endColor ); // Опера 11.10
- - ms - филтр : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- филтр : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ва IE7
- замина - тасвир : хатӣ - градиент ( аз чап , @startColor , @endColor ); // Стандарт
- }
- . амудӣ ( @startColor : #555, @endColor: #333) {
- замина - ранг : @endColor ;
- замина - такрор : такрор - x ;
- замина - тасвир : - khtml - градиент ( хаттӣ , боло чап , поёни чап , аз ( @startColor ), то ( @endColor )); // Konqueror
- замина - тасвир : - moz - linear - градиент ( @startColor , @endColor ); // FF 3.6+
- замина - тасвир : - ms - хатти - градиент ( @startColor , @endColor ); // IE10
- замина - тасвир : - webkit - градиент ( хаттӣ , болои чап , поёни чап , ранг - қатъ ( 0 %, @startColor ), ранг - қатъ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- замина - тасвир : - webkit - linear - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- замина - тасвир : - o - хатӣ - градиент ( @startColor , @endColor ); // Опера 11.10
- - ms - филтр : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- филтр : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ва IE7
- замина - тасвир : хатӣ - градиент ( @startColor , @endColor ); // Стандарт
- }
- . самтнок ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . амудӣ - се - ранг ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) {
- ...
- }
- }
Барои тавлиди миксинҳои фасеҳ ва пурқудрате, ки дар зер оварда шудааст, тасаввур кунед ва математика иҷро кунед.
- // Гридитуд
- @gridСутунҳо : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Системаи шабакавӣ
- . контейнер {
- паҳно : @siteWidth ;
- маржа : 0 худкор ;
- . clearfix ();
- }
- . сутунҳо ( @columnSpan : 1 ) {
- намоиш : inline ;
- шинокунанда : чап ;
- паҳно : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- маржа - чап : @gridGutterWidth ;
- &: аввал - фарзанд {
- маржа - чап : 0 ;
- }
- }
- . офсет ( @columnOffset : 1 ) {
- маржа - чап : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! муҳим ;
- }