Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum және eros.
Bootstrap — веб-қосымшалар мен сайттарды әзірлеуді бастауға арналған Twitter-дің құралдар жинағы.
Ол типография, пішіндер, түймелер, кестелер, торлар, навигация және т.б. үшін базалық CSS және HTML қамтиды.
Nerd ескертуі: Bootstrap Less көмегімен жасалған және заманауи браузерлерді ескере отырып, қақпадан шығуға арналған.
Ең жылдам және оңай бастау үшін осы үзіндіні веб-бетіңізге көшіріп алыңыз.
Less пайдалануды ұнататын адамсыз ба? Мәселе жоқ, тек репо клондаңыз және мына жолдарды қосыңыз:
Github сайтындағы ресми Bootstrap репосының көмегімен жүктеп алыңыз, ашыңыз, тартыңыз, файл мәселелерін және т.б..
Twitter-дің алғашқы күндерінде инженерлер алдыңғы қатардағы талаптарды қанағаттандыру үшін өздері білетін кез келген дерлік кітапхананы пайдаланды. Bootstrap ұсынылатын қиындықтарға жауап ретінде басталды және Twitter-дің алғашқы Hackweek кезінде дамуы тез қарқын алды.
Twitter-дегі көптеген инженерлердің көмегімен және кері байланысымен Bootstrap негізгі стильдерді ғана емес, сонымен қатар талғампаз және берік алдыңғы дизайн үлгілерін қамту үшін айтарлықтай өсті.
Толығырақ dev.twitter.com сайтында оқыңыз ›
Bootstrap Chrome, Safari, Internet Explorer және Firefox сияқты негізгі заманауи браузерлерде сыналған және оларға қолдау көрсетіледі.
Bootstrap компиляцияланған CSS, құрастырылмаған және үлгі үлгілерімен бірге жеткізіледі.
Bootstrap бөлігі ретінде берілген әдепкі тор жүйесі ені 940 пиксель болатын 16 бағанды тор болып табылады. Бұл танымал 960 тор жүйесінің хош иісі, бірақ сол және оң жағында қосымша маржа/толтырусыз.
Мұнда көрсетілгендей, негізгі орналасуды екі «бағанмен» жасауға болады, олардың әрқайсысы біздің тор жүйеміздің бөлігі ретінде анықтаған 16 негізгі бағандардың санын қамтиды. Қосымша нұсқалар үшін төмендегі мысалдарды қараңыз.
- <div класс = "жол" >
- <div class = "span6 бағандар" >
- ...
- </div>
- <div class = "span10 баған" >
- ...
- </div>
- </div>
Әдепкі және қарапайым ені 940 пиксель, бір ұсынатын кез келген веб-сайт немесе бет үшін орталықтандырылған орналасу <div.container>
.
- <дене>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Минималды және максималды ені және сол жақтағы бүйірлік тақтасы бар балама, икемді сұйық бет құрылымы. Қолданбалар мен құжаттар үшін тамаша.
- <дене>
- <div class = "контейнер-флюид" >
- <div класс = «бүйірлік тақта» >
- ...
- </div>
- <div класс = "мазмұн" >
- ...
- </div>
- </div>
- </body>
Веб-беттеріңізді құрылымдауға арналған стандартты типографиялық иерархия.
Бүкіл типографиялық тор біздің preboot.less файлындағы екі Less айнымалысына негізделген: @basefont
және @baseline
. Біріншісі - бүкіл қолданылатын негізгі қаріп өлшемі, екіншісі - негізгі жолдың биіктігі.
Біз осы айнымалы мәндерді және кейбір математиканы барлық түріміздің жиектерін, толтырғыштарын және жол биіктігін және т.б. жасау үшін қолданамыз.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus and magnis disparturient Montes, nascetur ridiculus mus. Идентификатордың идентификаторы жоқ.
Екпінді, мекенжайларды және аббревиатураларды пайдалану
<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.
Ескертпе:<b>
HTML5-те және тегтерді пайдалану әлі де дұрыс <i>
және олар жуан және көлбеу стильде болуы міндетті емес (бірақ семантикалық элементі көбірек болса, оны пайдаланыңыз). <b>
қосымша маңыздылығын көрсетпестен сөздерді немесе сөз тіркестерін бөлектеуге арналған, ал <i>
көбінесе дауыс, техникалық терминдер және т.б.
Элемент <address>
өзінің ең жақын ата-бабасына немесе бүкіл жұмыс тобына арналған байланыс ақпараты үшін пайдаланылады. Бұл қалай көрінеді:
Ескерту: Мазмұнды дұрыс құрылымдау үшін әрбір жол <address>
үзіліспен аяқталуы керек ( <br />
) немесе блок деңгейіндегі тегке (мысалы, ) оралуы керек.<p>
Қысқартулар мен аббревиатуралар үшін <abbr>
тегті пайдаланыңыз ( HTML5<acronym>
-те ескірген ). Стенографиялық пішінді тегтің ішіне қойып, толық атқа тақырып қойыңыз.
<blockquote>
<p>
<small>
Блоктауды қосу үшін айналаны орап <blockquote>
, <p>
тегтер <small>
қойыңыз. Дереккөзге сілтеме жасау үшін элементті пайдаланыңыз <small>
және оның алдында сызықша —
аласыз.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Доктор Джулиус Гибберт
<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 және одан төменірек ескі браузерлер үшін қол жетімді емес прогрессивті жақсарту.
- <үстел класы = «зебра-жолақты» >
- ...
- </кесте>
Алдыңғы мысалды ала отырып, біз jQuery және Tablesorter плагині арқылы сұрыптау функционалдығын қамтамасыз ету арқылы кестелеріміздің пайдалылығын жақсартамыз. Сұрыптауды өзгерту үшін кез келген бағанның тақырыбын басыңыз.
# | Аты | Тек | Тіл |
---|---|---|---|
1 | Сіздің | Бір | Ағылшын |
2 | Джо | Sixpack | Ағылшын |
3 | Stu | Тіс | Код |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <скрипт >
- $ ( функция () {
- $ ( «кесте#sortTableExample» ). кесте сұрыптаушы ({ сұрыптау тізімі : [[ 1 , 0 ]] });
- });
- </script>
- <үстел класы = «зебра-жолақты» >
- ...
- </кесте>
Барлық пішіндерге оқуға болатын және масштабталатын етіп көрсету үшін әдепкі мәнерлер беріледі. Мәнерлер мәтін енгізу, таңдау тізімдері, мәтіндік аумақтар, радио түймелер мен құсбелгілер және түймелер үшін берілген.
Пішініңіздің .form-stacked
HTML-ге қосыңыз, сонда олардың өрістерінің сол жағында емес, жоғарғы жағында белгілер болады. Бұл пішіндер қысқа болса немесе ауыр пішіндерге арналған екі кіріс бағандары болса тамаша жұмыс істейді.
Конвенция ретінде түймелер әрекеттер үшін пайдаланылады, ал сілтемелер нысандар үшін пайдаланылады. Мысалы, «Жүктеу» түймесі және «соңғы әрекет» сілтеме болуы мүмкін.
Барлық түймелер әдепкі бойынша ашық сұр стильге сәйкес келеді, бірақ әртүрлі түс мәнерлері үшін бірқатар функционалдық сыныптарды қолдануға болады. Бұл сыныптарға көк .primary
сынып, ашық-көк .info
сынып, жасыл .success
сынып және қызыл .danger
сынып кіреді. Сонымен қатар, өз стильдеріңізді айналдыру оңай емес.
Түйме мәнерлері қолданылған кез келген нәрсеге .btn
қолданылуы мүмкін. Әдетте сіз оларды тек <a>
, <button>
және таңдау <input>
элементтеріне қолданғыңыз келеді. Бұл қалай көрінеді:
Үлкенірек немесе кішірек түймелерді ұнатасыз ба? Қолда бар!
Белсенді емес немесе қандай да бір себептермен қолданба өшірген түймелер үшін өшірілген күйді пайдаланыңыз. Бұл .disabled
сілтемелер мен элементтерге :disabled
арналған .<button>
div.alert-message
Әрекеттің сәтсіздігін, ықтимал сәтсіздігін немесе сәттілігін бөлектеу үшін бір жолды хабарлар. Әсіресе пішіндер үшін пайдалы.
div.alert-message.block-message
Аздап түсіндіруді қажет ететін хабарлар үшін бізде абзац стилі ескертулері бар. Бұл ұзағырақ қате туралы хабарларды шығаруға, пайдаланушыны күтудегі әрекет туралы ескертуге немесе жай ғана бетке көбірек назар аудару үшін ақпаратты ұсынуға өте ыңғайлы.
Модальдер — диалогтар немесе жарық жәшіктері — фондық мәтінмәнді сақтау маңызды жағдайларда контекстік әрекеттер үшін тамаша.
Бір тамаша дене…
Twipsies абдырап қалған пайдаланушыға көмектесу және оларды дұрыс бағытта көрсету үшін өте пайдалы.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit or natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Ерекше түсініктемелер ашық түрде, толық сәулетші ашық түрде анық көрінбейді .
Орналасуға әсер етпестен бетке субтекстік ақпаратты беру үшін қалқымалы терезелерді пайдаланыңыз.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum және eros.
Bootstrap жылдам және оңай веб-әзірлеуге арналған CSS препроцессоры Less -пен бірге пайдаланылатын микстер мен айнымалылардың ашық бастапқы пакеті Preboot көмегімен жасалған.
Bootstrap бағдарламасында Preboot қолданбасын қалай пайдаланғанымызды және келесі жобада Less іске қосуды таңдасаңыз, оны қалай пайдалануға болатынын тексеріңіз.
Бұл опцияны браузердегі javascript арқылы Bootstrap-тың Less айнымалыларын, араластырғыштарын және CSS-те кірістіруді толық пайдалану үшін пайдаланыңыз.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" медиа = "барлығы" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js шешімін сезбейсіз бе? Less Mac қолданбасын қолданып көріңіз немесе кодты қолданғанда құрастыру үшін Node.js пайдаланыңыз .
Мұнда Bootstrap бөлігі ретінде Twitter Bootstrap құрамына енгізілген нәрселердің кейбір маңызды сәттері берілген. Жүктеп алу және қосымша ақпарат алу үшін Bootstrap веб-сайтына немесе Github жобасының бетіне өтіңіз.
Less ішіндегі айнымалы мәндер CSS-тің бас ауруын болдырмауға және жаңартуға өте ыңғайлы. Түс мәнін немесе жиі пайдаланылатын мәнді өзгерткіңіз келсе, оны бір жерде жаңартыңыз және сіз орнатасыз.
- // Сілтемелер
- @linkColor : #8b59c2;
- @linkColorHover : қараңғылау ( @linkColor , 10 );
- // Сұр
- @black : #000;
- @grayDark : жарықтандыру ( @black , 25 %);
- @gray : lighten ( @black , 50 %);
- @grayLight : жарықтандыру ( @black , 70 %);
- @grayLighter : жарықтандыру ( @black , 90 %);
- @white : #fff;
- // Екпін түстері
- @көк : #08b5fb ;
- @жасыл : #46a546 ;
- @red : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @қызғылт : #c3325f ;
- @күлгін : #7a43b6 ;
- // Базалық тор
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Less сонымен қатар CSS қалыпты синтаксисіне қосымша түсініктеме берудің басқа стилін ұсынады .
- // Бұл түсініктеме
- /* Бұл да түсініктеме */
Миксиндер негізінен 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 ) {
- шрифт - отбасы : "Грузия" , 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 ;
- background - image : - khtml - градиент ( сызықтық , сол жақ жоғарғы , оң жақ жоғарғы , бастап ( @startColor ), дейін ( @endColor )); // Konqueror
- background - image : - moz - linear - градиент ( сол жақта , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - сызықтық - градиент ( сол жақта , @startColor , @endColor ); // IE10
- background - image : - webkit - градиент ( сызықтық , сол жақ жоғарғы , оң жақ жоғарғы , түс - тоқтату ( 0 %, @startColor ), түс - тоқтату ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - сызықтық - градиент ( сол жақта , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - сызықтық - градиент ( сол жақта , @startColor , @endColor ); // Opera 11.10
- фон - сурет : сызықтық - градиент ( сол жақта , @startColor , @endColor ); // Стандартты
- }
- . тік ( @startColor : #555, @endColor: #333) {
- фон - түсі : @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
- background - image : - webkit - градиент ( сызықтық , сол жақ жоғарғы , сол жақ төменгі , түс - тоқтату ( 0 %, @startColor ), түс - тоқтату ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - сызықтық - градиент ( @startColor , @endColor ); // Opera 11.10
- background - image : linear - градиент ( @startColor , @endColor ); // Стандарт
- }
- . бағытты ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . тік - үш түсті ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Төмендегідей икемді және қуатты миксиндерді жасау үшін қиялдаңыз және математиканы орындаңыз.
- // Тор
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Тор жүйесі
- . контейнер {
- ені : @siteWidth ;
- маржа : 0 авто ;
- . clearfix ();
- }
- . бағандар ( @columnSpan : 1 ) {
- ені : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . офсет ( @columnOffset : 1 ) {
- маржа - сол жақ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }