Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum жана эрос.
Bootstrap - бул веб-колдонмолорду жана сайттарды иштеп чыгууну баштоо үчүн иштелип чыккан Twitter шаймандары.
Ал типография, формалар, баскычтар, таблицалар, торлор, навигация жана башкалар үчүн базалык CSS жана HTMLди камтыйт.
Nerd эскертүүсү: Bootstrap Less менен курулган жана заманбап браузерлерди гана эске алуу менен дарбазадан чыгуу үчүн иштелип чыккан.
Эң тез жана оңой баштоо үчүн, бул үзүндүнү веб баракчаңызга көчүрүңүз.
Less колдонуу күйөрманы? Эч кандай көйгөй жок, жөн гана репо клондоңуз жана бул саптарды кошуңуз:
Github'дагы расмий Bootstrap репо менен жүктөп алыңыз, айрыңыз, тартыңыз, файлдарды коюңуз жана башкалар.
Bootstrap бөлүгү катары берилген демейки тор системасы 940px кең 16 тилкелүү тор болуп саналат. Бул популярдуу 960 тор системасынын даамы, бирок сол жана оң тарабында кошумча маржа/толтуру жок.
Бул жерде көрсөтүлгөндөй, негизги макет эки "мамыча" менен түзүлүшү мүмкүн, алардын ар бири тор тутумубуздун бир бөлүгү катары аныктаган 16 фундаменталдык мамычалардын санын камтыйт. Көбүрөөк вариациялар үчүн төмөндөгү мисалдарды караңыз.
- <div class="row"> class = "сап" >
- <div class = "span6 мамычалар" >
- ...
- </div>
- <div class = "span10 мамычалар" >
- ...
- </div>
- </div>
Каалаган сайт же бет үчүн негизги 940px кең, борборлоштурулган контейнер макети.
- <дене>
- <div класс = "контейнер" >
- ...
- </div>
- </body>
Мин- жана максимум-туурасы жана сол жагындагы каптал тилкеси бар ийкемдүү суюктук же суюк барак структурасы. Колдонмолор үчүн сонун.
- <дене>
- <div класс = "контейнер-суюктук" >
- <div класс = "каптал тилкеси" >
- ...
- </div>
- <div класс = "мазмун" >
- ...
- </div>
- </div>
- </body>
Веб баракчаларыңызды структуралаштыруу үчүн стандарттуу типографиялык иерархия.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis dis tourient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Сиз ошондой эле <strong>
жана менен субтитрлерди кошо аласыз<em>
Баса, даректер жана аббревиатураларды колдонуу
<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.
Элемент үчүн колдонулат — сиз ойлодуңуз address
!—даректер. Бул кандай көрүнөт:
Эскертүү: Мазмундун түзүлүшү үчүн, ар бир сап address
сызык тыныгуусу ( ) менен бүтүшү керек , анткени ал чыныгы жашоодо эч кандай стилдер колдонулбастан окулат.<br />
abbr
Кыскартуулар жана аббревиатуралар үчүн тегди колдонуңуз ( HTML5те acronym
эскирген ) . Тегдин ичине стенографиялык форманы коюңуз жана толук ат үчүн аталышты коюңуз.
<blockquote>
<p>
<cite>
blockquote
Сиздин тегерек paragraph
жана cite
тегдерди ороп үчүн шектенбесек болот . Булакка шилтеме жасоодо cite
элементти колдонуңуз. CSS автоматтык түрдө атка сызыкча (—) киришет.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut worke and dolor magna aliqua...
Доктор Юлиус Хибберт
<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 | Дент | Code |
- <таблица классы="жалпы стол"> класс = "жалпы стол" >
- ...
- </таблица>
Зебра сызыгын кошуу менен үстөлдөрүңүздү бир аз кооздоңуз — .zebra-striped
классты кошуңуз.
# | Биринчи аты | Акыркы аты | Тил |
---|---|---|---|
1 | Кээ бир | Бир | Англисче |
2 | Джо | Sixpack | Англисче |
3 | Stu | Дент | Code |
- <таблица классы="жалпы стол зебра-сызык"> класс = "жалпы стол зебра-сызык" >
- ...
- </таблица>
Мурунку мисалды алып, биз jQuery жана Tablesorter плагини аркылуу сорттоо функциясын камсыз кылуу менен таблицаларыбыздын пайдалуулугун жакшыртабыз . Сортту өзгөртүү үчүн каалаган мамычанын башын чыкылдатыңыз.
# | Биринчи аты | Акыркы аты | Тил |
---|---|---|---|
1 | Сиздин | Бир | Англисче |
2 | Джо | Sixpack | Англисче |
3 | Stu | Дент | Code |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <скрипт түрү = "текст/javascript" >
- $ ( документ ). даяр ( функция () {
- $ ( "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 aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque толугу менен voluptas. Voluptasdicta eaquee beriam ut ut ut ut utterim us uplicabo explicabo us uplicabo, voluptas quia odit fugit accusantas totam totam totam totam totam totam totam totam totam totam totam totam totam une unde sed dica quee unde sed dicta leuptas voluptas nemo valupas voluptatem reftas voluptatem reftas voluptatem reftas voluptatem reftas voluptatem reftas
Макетке таасир этпестен, баракка субтексттик маалымат берүү үчүн поповерлерди колдонуңуз.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum жана эрос.
Bootstrap Preboot менен курулган , аралашмалардын жана өзгөрмөлөрдүн ачык булагы болгон Less , тезирээк жана оңой веб иштеп чыгуу үчүн CSS препроцессору менен бирге колдонулуучу .
Preboot'ду Bootstrap'те кантип колдонгонубузду жана кийинки долбооруңузда Less иштетүүнү тандасаңыз, аны кантип колдонсоңуз болорун карап көрүңүз.
Бул параметрди браузериңиздеги javascript аркылуу Bootstrap'тын Less өзгөрмөлөрүн, микстерин жана CSS'те уялоосун толук пайдалануу үчүн колдонуңуз.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" медиа = "бардыгы" />
- <script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
.js чечимди сезбей жатасызбы? Less Mac колдонмосун колдонуп көрүңүз же кодуңузду жайгаштырганыңызда компиляциялоо үчүн Node.js колдонуңуз .
Бул жерде Bootstrapтын бир бөлүгү катары Twitter Bootstrapге камтылган нерселердин айрымдары. Жүктөп алуу жана көбүрөөк билүү үчүн Bootstrap веб-сайтына же Github долбоорунун барагына өтүңүз.
Less ичиндеги өзгөрмөлөр CSS башыңызды оорутпай кармап туруу жана жаңыртуу үчүн идеалдуу. Түс маанисин же көп колдонулган маанини өзгөрткүңүз келсе, аны бир жерде жаңыртыңыз жана сиз орнотуңуз.
- // Шилтемелер
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // Боз
- @black : #000;
- @grayDark : lighten ( @black , 25 %);
- @gray : lighten ( @black , 50 %);
- @grayLight : lighten ( @black , 70 %);
- @grayLighter : жарыктандыруу ( @black , 90 %);
- @white : #fff;
- // Акцент Түстөр
- @blue : #08b5fb;
- @green : #46a546;
- @red : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purple : #7a43b6;
- // Базалык
- @baseline : 20px ;
Less ошондой эле CSSтин кадимки /* ... */
синтаксисине кошумча комментарий берүүнүн дагы бир стилин камсыз кылат.
- // Бул комментарий
- /* Бул да комментарий */
Миксиндер негизинен CSS үчүн камтылган же жарым-жартылай болуп, код блогун бир блокко бириктирүүгө мүмкүндүк берет. Алар box-shadow
, кайчылаш браузер градиенттери, шрифт стектери жана башкалар сыяктуу сатуучулардын префикстүү касиеттери үчүн эң сонун. Төмөндө Bootstrap менен камтылган аралашмалардын үлгүсү келтирилген.
- #шрифт {
- . стенография ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- font - weight : @weight ;
- сызык бийиктиги : @lineHeight ; _
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - үй- бүлө : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- сызык бийиктиги : @lineHeight ; _
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- шрифт - үй- бүлө : "Грузия" , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- сызык бийиктиги : @lineHeight ; _
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- шрифт - үй- бүлө : "Монако" , Courier New , monospace ;
- font - size : @size ;
- font - weight : @weight ;
- сызык бийиктиги : @lineHeight ; _
- }
- }
- #градиент {
- . горизонталдуу ( @startColor : #555, @endColor: #333) {
- background - color : @endColor ;
- фон - кайталоо : кайталоо - x ;
- background - image : - khtml - градиент ( сызыктуу , сол үстү , оң үстү , баштап ( @startColor ), чейин ( @endColor ) ); // Konqueror
- background - image : - moz - linear - gradient ( сол , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - сызыктуу - градиент ( сол , @startColor , @endColor ); // IE10
- фон - сүрөт : - webkit - градиент ( сызыктуу , сол үстү , оң үстү , түс - токтотуу ( 0 %, @startColor ), түс - токтотуу ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - сызыктуу - градиент ( солдо , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - сызыктуу - градиент ( солдо , @startColor , @endColor ); // Опера 11.10
- - ms - filter : %( "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 ); // Le стандарт
- }
- . вертикалдуу ( @startColor : #555, @endColor: #333) {
- background - color : @endColor ;
- фон - кайталоо : кайталоо - x ;
- background - image : - khtml - градиент ( сызыктуу , жогорку сол , сол ылдый , баштап ( @startColor ), чейин ( @endColor ) ); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- фон - сүрөт : - webkit - градиент ( сызыктуу , сол жакта , сол ылдыйда , түс - токтотуу ( 0 %, @startColor ), түс - токтотуу ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - сызыктуу - градиент ( @startColor , @endColor ); // Опера 11.10
- - ms - filter : %( "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) {
- ...
- }
- }
Төмөнкүдөй ийкемдүү жана күчтүү миксингдерди түзүү үчүн фантазияга ээ болуп, математиканы аткарыңыз.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Тор системасы
- . контейнер {
- туурасы : @siteWidth ;
- маржа : 0 auto ;
- . clearfix ();
- }
- . мамычалар ( @columnSpan : 1 ) {
- дисплей : inline ;
- float : left ;
- туурасы : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- маржа - сол : @gridGutterWidth ;
- &: биринчи - бала {
- маржа - сол : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- маржа - сол : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! маанилүү ;
- }