Bootstrap компоненты. Настройка Bootstrap: выбор нужных компонентов. Как подготовить меню к просмотру на малых экранах

)
From: http://cgiscripts.r2.ru Date: Mon, 23 Feb 2004 14:31:37 +0000 (UTC) Subject: йУРПМШЪПЧБОЙЕ HTML::Mason РТЙ УПЪДБОЙЙ УБКФБ. пТЙЗЙОБМ: http://cgiscripts.r2.ru/docs/mason.shtml уБКФ У РПНПЭША HTML::Mason уФБФШС ПРХВМЙЛПЧБОБ Ч ЦХТОБМЕ рТПЗТБННЙУФ (http://www.programme.ru/) 04.2002 чЧЕДЕОЙЕ йЪ-ЪБ УМПЦОПУФЙ УПРТПЧПЦДЕОЙС, ОЕДПУФБФПЮОПК ЗЙВЛПУФЙ Й ПЗТБОЙЮЕООПК ЖХОЛГЙПОБМШОПУФЙ ЮЕМПЧЕЮЕУФЧП ДБЧОП ХЦЕ ПФЛБЪБМПУШ ПФ УФБФЙЮЕУЛЙИ HTML-УФТБОЙГ. ч ОБУФПСЭЕЕ ЧТЕНС РТЙОСФП ПФДЕМСФШ ДЙЪБКО ПФ РТПЗТБННОПЗП ЛПДБ. оБРТЙНЕТ, Ч УМХЮБЕ ЙУРПМШЪПЧБОЙС Perl, ПДОПЗП ЙЪ УБНЩИ ТБУРТПУФТБОЕООЩИ СЪЩЛПЧ web-РТПЗТБННЙТПЧБОЙС, ДЕМП УЧПДЙФУС Л ЗЕОЕТБГЙЙ УФТБОЙГ У РПНПЭША CGI-УЛТЙРФПЧ, РТЙЮЕН УБН HTML-ЛПД ОБИПДЙМУС Ч ПФДЕМШОЩИ ЖБКМБИ-ЫБВМПОБИ, УПУФПСЭЙИ ЙЪ ОБВПТБ ФЕЗПЧ, РЕТЕНЕООЩИ Й ХРТБЧМСАЭЙИ ПРЕТБФПТПЧ. дБООЩЕ, РПМХЮЕООЩЕ Ч ТЕЪХМШФБФЕ ТБВПФЩ УЛТЙРФПЧ, РЕТЕДБАФУС ЫБВМПОХ, ЛПФПТЩК РПДУФБЧМСЕФ ЙИ ЧНЕУФП РЕТЕНЕООЩИ. уХЭЕУФЧХЕФ ПЗТПНОПЕ ЛПМЙЮЕУФЧП НПДХМЕК, ХНЕАЭЙИ ТБВПФБФШ У ЫБВМПОБНЙ. оЕЛПФПТЩЕ ЙЪ ОЙИ РПЪЧПМСАФ ЧЛМАЮБФШ ЛПД Perl, ОЕЛПФПТЩЕ ЙУРПМШЪХАФ УЧПК СЪЩЛ РТПЗТБННЙТПЧБОЙС. рПДТПВОЕЕ П РТЙНЕОЕОЙЙ ТБЪМЙЮОЩИ НПДХМЕК НПЦОП ХЪОБФШ ЙЪ УФБФШЙ . оЕПВИПДЙНПУФШ ЛБЦДЩК ТБЪ ЪБЗТХЦБФШ ЙОФЕТРТЕФБФПТ тerl, ДПРПМОЙФЕМШОЩЕ НПДХМЙ, ПВТБВБФЩЧБФШ ЫБВМПООЩЕ ЖБКМЩ УХЭЕУФЧЕООП ОБЗТХЦБЕФ web-УЕТЧЕТ. рТЙ ВПМШЫПК РПРХМСТОПУФЙ ТЕУХТУБ ЬФП НПЦЕФ РТЙЧЕУФЙ Л ЪБНЕФОПНХ ЪБНЕДМЕОЙА ТБВПФЩ. пРЙУБООЩИ ОЕДПУФБФЛПЧ МЙЫЕО НПДХМШ mod_perl ДМС Apache. л ПУОПЧОЩН ДПУФПЙОУФЧБН mod_perl ПФОПУСФУС: * РТЙЧСЪЛБ ЙОФЕТРТЕФБФПТБ Perl Л ЛБЦДПНХ РТПГЕУУХ Apache; * API Л Apache: * ЧПЪНПЦОПУФШ ОБРЙУБОЙС УПВУФЧЕООЩИ ПВТБВПФЮЙЛПЧ УФБДЙК ЧЩРПМОЕОЙС ЪБРТПУБ – ИЬОДМЕТПЧ (handlers); * ЧПЪНПЦОПУФШ ЛПОЖЙЗХТЙТПЧБОЙС Apache; * ЛЬЫЙТПЧБОЙЕ Perl-НПДХМЕК. чЩВПТ НПДХМС нПДХМШ-ЫБВМПОЙЪБФПТ, ТБВПФБАЭЙК РПД mod_perl, СЧМСЕФУС НПЭОЩН "ДЧЙЦЛПН" ДМС УБКФПЧ МАВПК УМПЦОПУФЙ. дМС ФПЗП ЮФПВЩ ПО УФБМ ПВТБВПФЮЙЛПН УФБДЙЙ ЪБРТПУБ, ПФЧЕЮБАЭЕК ЪБ ЗЕОЕТБГЙА ЛПОФЕОФБ УФТБОЙГЩ, ОЕПВИПДЙНП ПРТЕДЕМЙФШ ЕЗП Ч ОБУФТПКЛБИ Apache ЛБЛ PerlHandler. ьФП РПЪЧПМЙФ УДЕМБФШ ЫБВМПОЩ (ДБМЕЕ ЛПНРПОЕОФЩ) ЪБРХУЛБАЭЙНЙУС, Б УБН ПВТБВПФЮЙЛ ВХДЕФ ЧЩЪЩЧБФШУС ОЕЪБНЕФОП (РП БОБМПЗЙЙ У PHP, JSP Й ASP) РТЙ ЛБЦДПН ПВТБЭЕОЙЙ Л web-УЕТЧЕТХ. чЩВПТ БЧФПТБ РБМ ОБ HTML::Mason. еЗП ЧПЪНПЦОПУФЙ ДПЧПМШОП ЫЙТПЛЙ, ПО РПЪЧПМСЕФ УНЕЫЙЧБФШ ЛПД Perl У HTML Й ЧОПУЙФШ ЙЪНЕОЕОЙС Ч ПВТБВПФЮЙЛ, Б ФБЛЦЕ РТЕЛТБУОП ЙОФЕЗТЙТХЕФУС У mod_perl. йДЕС ОБРЙУБОЙС ЧУЕЗП ЛПДБ УБКФБ ЧРЕТЕНЕЫЛХ У HTML ФБЛЦЕ ЙНЕЕФ ТСД ОЕДПУФБФЛПЧ. Mason РПЪЧПМСЕФ ДПУФЙЮШ ЛПНРТПНЙУУБ, РТЕДПУФБЧМСС ЧПЪНПЦОПУФШ ИТБОЕОЙС ПУОПЧОПЗП ЛПДБ Ч НПДХМСИ (ЛМБУУБИ). рТЙ ЬФПН ХРТПЭБЕФУС УПРТПЧПЦДЕОЙЕ РТПЕЛФБ, Б ЙУРПМШЪПЧБОЙЕ ппр ВМБЗПРТЙСФОП УЛБЪЩЧБЕФУС ОБ НБУЫФБВЙТХЕНПУФЙ. еЭЕ ПДЙО РМАУ ФБЛПК ПТЗБОЙЪБГЙЙ - ЧПЪНПЦОПУФШ НОПЗПЛТБФОПЗП РТЙНЕОЕОЙС ЛПДБ Ч МАВЩИ РТПЕЛФБИ ОБ Perl, Ч ФПН ЮЙУМЕ ЙУРПМШЪХАЭЙИ ЙОФЕТЖЕКУ CGI. дБМЕЕ Ч УФБФШЕ ВХДХФ ТБУУНПФТЕОЩ ПУОПЧОЩЕ ЧПЪНПЦОПУФЙ HTML::Mason Й РТЙЧЕДЕО РТЙНЕТ ОЕВПМШЫПЗП УБКФБ, УПЪДБООПЗП ОБ ЬФПН "ДЧЙЦЛЕ". хУФБОПЧЛБ HTML::Mason чЪСФШ НПДХМШ НПЦОП У CPAN ЙМЙ У www.masonhq.com. мАВПК ЦЕМБАЭЙК НПЦЕФ РПХЮБУФЧПЧБФШ Ч ТБЪТБВПФЛЕ Й РТЕДМПЦЙФШ УЧПК ЧБТЙБОФ ДПРПМОЕОЙК. рТПГЕУУ ХУФБОПЧЛЙ БОБМПЗЙЮЕО ПВЩЮОЩН НПДХМСН. рПЬФПНХ РЕТЕКДЕН Л ОБУФТПКЛЕ ЖБКМБ ЛПОЖЙЗХТБГЙЙ Apache. бЧФПТ ЙУРПМШЪПЧБМ ПРЕТБГЙПООХА УЙУФЕНХ FreeBSD, РПЬФПНХ РТЙЧЕДЕООЩЕ РТЙНЕТЩ РХФЕК Л ЖБКМБН ИБТБЛФЕТОЩ ЙНЕООП ДМС UNIX-УЙУФЕН. рЕТЧПЕ, ЮФП ОХЦОП УДЕМБФШ - ДПВБЧЙФШ УФТПЮЛХ: PerlModule HTML::Mason::ApacheHandler ьФП МХЮЫЕ УДЕМБФШ Ч httpd.conf, Б ОЕ Ч.htaccess, ФБЛ ЛБЛ Ч ЬФПН УМХЮБЕ ЪБЗТХЪЛБ НПДХМС РТПЙЪПКДЕФ РТЙ ЪБРХУЛЕ web-УЕТЧЕТБ, Ч ПУОПЧОПН РТПГЕУУЕ Apache, Б ЧУЕ РПТПЦДЕООЩЕ РТПГЕУУЩ ВХДХФ ЙУРПМШЪПЧБФШ ТБЪДЕМСЕНХА РБНСФШ. ьФП РПЪЧПМЙФ ВПМЕЕ ЬЛПОПНОП ТБУИПДПЧБФШ РБНСФШ (Mason - ОЕ УБНЩК НБМЕОШЛЙК НПДХМШ), Б ФБЛЦЕ УХЭЕУФЧЕООП УПЛТБФЙФШ ЧТЕНС ЪБЗТХЪЛЙ ЛПНРПОЕОФБ РТЙ РЕТЧПН ПВТБЭЕОЙЙ. ч РТПФЙЧОПН УМХЮБЕ Mason ВХДЕФ ЪБЗТХЦБФШУС ЛБЦДЩН РТПГЕУУПН ПФДЕМШОП. дБМЕЕ УМЕДХЕФ ДПВБЧЙФШ Ч ЛПОЖЙЗХТБГЙПООЩК ЖБКМ ДЧЕ РЕТЕНЕООЩЕ: PerlSetVar MasonCompRoot /usr/local/www/data PerlSetVar MasonDataDir /usr/local/www/mason рЕТЧБС РЕТЕНЕООБС ПРТЕДЕМСЕФ ЛПТОЕЧХА ДЙТЕЛФПТЙА ЛПНРПОЕОФПЧ. чФПТБС - ДЙТЕЛФПТЙА ТБЪНЕЭЕОЙС УМХЦЕВОЩИ ЖБКМПЧ. рТЙ РЕТЧПН ЪБРХУЛЕ Mason УПЪДБЕФ ФБН ОЕУЛПМШЛП ДЙТЕЛФПТЙК. уАДБ УЛМБДЩЧБАФУС ФБЛЦЕ РТЕПВТБЪПЧБООЩЕ ЛПНРПОЕОФЩ Й ЛЬЫЙТПЧБООЩЕ ДБООЩЕ. фЕРЕТШ ПУФБМПУШ РТПРЙУБФШ ИЬОДМЕТ. дПЗПЧПТЙНУС, ЮФП ТБУЫЙТЕОЙЕ ЛПНРПОЕОФПЧ ВХДЕФ ЙНЕООП.html. оБУФТПЙН Apache ФБЛЙН ПВТБЪПН, ЮФПВЩ ЖБКМЩ, ПФМЙЮОЩЕ ПФ *.html, *.txt Й ЖБКМПЧ ВЕЪ ТБУЫЙТЕОЙК, ОЕ ПВТБВБФЩЧБМЙУШ HTML::Mason: SetHandler perl-script PerlHandler HTML::Mason пУОПЧЩ "ДЧЙЦЛБ" Mason лБЛ ХЦЕ ВЩМП УЛБЪБОП, Mason РПЪЧПМСЕФ ЧУФТБЙЧБФШ Perl-ЛПД Ч УБН ДПЛХНЕОФ. ьФП НПЦОП УДЕМБФШ ОЕУЛПМШЛЙНЙ УРПУПВБНЙ, ЛБЦДЩК ЙЪ ЛПФПТЩИ ХДПВЕО Ч ТБЪОЩИ УЙФХБГЙСИ. фБЛ ЛБЛ ЪОБЮЕОЙС ЗМПВБМШОЩИ РЕТЕНЕООЩИ ОЕ ХОЙЮФПЦБАФУС РПУМЕ ЪБЧЕТЫЕОЙС РТПЗТБННЩ (ПУПВЕООПУФШ mod_perl), ФП ЧУЕ ЙУРПМШЪХЕНЩЕ РЕТЕНЕООЩЕ ОЕПВИПДЙНП ПВЯСЧМСФШ ЛБЛ МЕЛУЙЮЕУЛЙЕ, ЪБ ЙУЛМАЮЕОЙЕН ПРТЕДЕМЕООЩИ УМХЮБЕЧ, П ЛПФПТЩИ ВХДЕФ ТБУУЛБЪБОП РПЪЦЕ. ч РТПФЙЧОПН УМХЮБЕ ЛПНРПОЕОФ Mason ОЕ РТПКДЕФ ЛПНРЙМСГЙА, ФБЛ ЛБЛ ЧЕУШ ЛПД РТПЧЕТСЕФУС РТБЗНПК strict. фЕРЕТШ ПВ ПУОПЧБИ УЙОФБЛУЙУБ Mason. 1. уФТПЛБ, ОБЮЙОБАЭБСУС У УЙНЧПМБ %, ЧПУРТЙОЙНБЕФУС, ЛБЛ Perl-ЛПД. ьФБ ЛПОУФТХЛГЙС ПЮЕОШ ХДПВОБ Ч ХРТБЧМСАЭЙИ ПРЕТБФПТБИ. рТЙНЕТ: % if ($browser =~ /msie/i) {

чЩ ЙУРПМШЪХЕФЕ Internet Explorer

% } else {

х ЧБУ, УЛПТЕЕ ЧУЕЗП, Netscape

% } нЙОЙНХН УЙОФБЛУЙУБ, НБЛУЙНХН ХДПВУФЧБ. 2. вМПЛ <% EXPR %> ЪБНЕОСЕФУС ТЕЪХМШФБФПН ЧЩЮЙУМЕОЙС ЧЩТБЦЕОЙС EXPR. пВЩЮОП РТЙНЕОСЕФУС ДМС ЧЩЧПДБ РЕТЕНЕООЩИ. рТЙНЕТ: Hello, <% $name %> <% ($name ? "Hello, $name" : "") %> ч ВМПЛЕ РТЕДХУНПФТЕОБ ЧПЪНПЦОПУФШ ЖПТНБФЙТПЧБОЙС ТЕЪХМШФБФБ: <% $html_tags |h %> - ЪБНЕОСЕФ ЧУЕ "<" ОБ "<" Й Ф.Д. <% $string |u %> - РТЕПВТБЪПЧЩЧБЕФ УФТПЛХ Ч urlencoded (РТЙНЕТ: ":" ЪБНЕОСЕФУС ОБ "%3A") 3. вПМШЫЙЕ Perl-ВМПЛЙ НПЦОП ЧУФБЧМСФШ НЕЦДХ ФЕЗБНЙ <%perl> ... 4. ч ЛПНРПОЕОФБИ ДПУФХРОЩ ДЧБ ЗМПВБМШОЩИ ПВЯЕЛФБ. рЕТЧЩК - $r, ПВЯЕЛФ НПДХМС Apache, ЙЪ ОЕЗП НПЦОП ЧЩЪЩЧБФШ ЧУЕ НЕФПДЩ ЬФПЗП НПДХМС, ЧФПТПК - $m, ПВЯЕЛФ Mason. пВЯЕЛФ $m, ПВЕУРЕЮЙЧБЕФ ДПУФХР Л ПЮЕОШ РПМЕЪОЩН НЕФПДБН, РПМОПЕ ПРЙУБОЙЕ ЛПФПТЩИ НПЦОП ОБКФЙ Ч ДПЛХНЕОФБГЙЙ Л Mason (perldoc HTML::Mason::Request). рТЙНЕТ ЙУРПМШЪПЧБОЙС ПВЯЕЛФБ $r: % my $ua = $r->header_in("User-Agent"); % my $host = $r->get_remote_host; 5. Mason ОЕ ВЩМ ВЩ ФБЛ РПРХМСТЕО, ЕУМЙ ВЩ Ч ОЕН ОЕМШЪС ВЩМП РПДЛМАЮБФШ ДТХЗЙЕ ЛПНРПОЕОФЩ. уМПЦОЩК ДПЛХНЕОФ ВЩЧБЕФ ХДПВОП ТБЪВЙФШ ОБ ОЕУЛПМШЛП ЖБКМПЧ. пДЙОБЛПЧЩЕ ЛПНРПОЕОФЩ НПЦОП ЙУРПМШЪПЧБФШ Ч ТБЪОЩИ УФТБОЙГБИ, РЕТЕДБЧБС ЙН УППФЧЕФУФЧХАЭЙЕ РБТБНЕФТЩ. еУФШ ДЧБ УРПУПВБ ЧЩЪПЧБ ЛПНРПОЕОФПЧ. рЕТЧЩК РТЕДОБЪОБЮЕО ДМС ЧУФБЧЛЙ Ч HTML, ЧФПТПК РТЕДУФБЧМСЕФ УПВПК НЕФПД ПВЯЕЛФБ $m. рТЙНЕТ: 1) <& /path/comp_name, par1 => $value1, par2 => $value2 &> 2) $m->comp("/path/comp_name",par1 => $value1, par2 => $value2); рХФШ ЧЩЮЙУМСЕФУС ПФОПУЙФЕМШОП MasonCompRoot. ч ЛБЮЕУФЧЕ РБТБНЕФТПЧ НПЦОП РЕТЕДБЧБФШ УУЩМЛЙ ОБ НБУУЙЧЩ Й ИЬЫЙ. пУФБМШОЩЕ РЕТЕНЕООЩЕ Ч ЧЩЪЧБООПН ЛПНРПОЕОФЕ ОЕДПУФХРОЩ. 6. еУМЙ ЕУФШ ЧПЪНПЦОПУФШ РЕТЕДБФШ ДБООЩЕ, ДПМЦЕО ВЩФШ УРПУПВ ЙИ ЙЪЧМЕЮШ. ъДЕУШ Mason ПРСФШ РТЕДМБЗБЕФ ОЕУЛПМШЛП УРПУПВПЧ. рТЙЮЕН ОЕЧБЦОП, РЕТЕДБАФУС МЙ ЬФЙ РБТБНЕФТЩ ЮЕТЕЪ ЪБРТПУ GET (POST) ЙМЙ ЦЕ РТЙ ЧЩЪПЧЕ ЛПНРПОЕОФБ. рЕТЧЩК УРПУПВ иЬЫ %ARGS УПДЕТЦЙФ ЧУЕ РЕТЕДБООЩЕ РБТБНЕФТЩ. еУМЙ ЙНЕОБ РБТБНЕФТПЧ РПЧФПТСАФУС (ОБРТЙНЕТ, РТЙ ЙУРПМШЪПЧБОЙЙ checkbox), ФП УППФЧЕФУФЧХАЭЙК ЛМАЮ ИЬЫБ УПДЕТЦЙФ УУЩМЛХ ОБ НБУУЙЧ. у ПДОПК УФПТПОЩ, ИЬЫ ХДПВЕО ДМС ТБЪТБВПФЮЙЛБ, ПО ЧЩДЕМСЕФ РЕТЕНЕООЩЕ, Л ЛПФПТЩН ОЕПВИПДЙНП ПФОПУЙФУС У ВПМШЫПК ПУФПТПЦОПУФША, ФБЛ ЛБЛ ПОЙ РЕТЕДБАФУС ПФ РПМШЪПЧБФЕМС. у ДТХЗПК, ЪБРЙУЙ ЧЩЗМСДСФ ПЮЕОШ ЗТПНПЪДЛП. Mason РТЕДМБЗБЕФ БМШФЕТОБФЙЧОЩК ЧБТЙБОФ РПМХЮЕОЙС РБТБНЕФТПЧ. чФПТПК УРПУПВ <%args> $par1 => undef @par2 => undef ъДЕУШ ЧУЕ РПОСФОП, undef РПУМЕ => ЪБДБЕФ ЪОБЮЕОЙЕ РП ХНПМЮБОЙА, ЕУМЙ ЧП ЧИПДОЩИ ДБООЩИ РБТБНЕФТ ВХДЕФ ПФУХФУФЧПЧБФШ. рПЧФПТСАЭЙЕУС РБТБНЕФТЩ РПРБДБАФ Ч НБУУЙЧ. 7. уЕЛГЙЙ <%init> ... Й <%cleanup> ... ПРТЕДЕМСАФ ЛПД ЙОЙГЙБМЙЪБГЙЙ Й ЪБЧЕТЫЕОЙС УППФЧЕФУФЧЕООП. уПЪДБОЙЕ УБКФБ чППВЭЕ, РТПЗТБННЙТПЧБФШ ДМС Mason-ДЧЙЦЛБ ПДОП ХДПЧПМШУФЧЙЕ: ЧТЕНС ТБЪТБВПФЛЙ ТХФЙООЩИ ЧЕЭЕК УПЛТБЭБЕФУС, РПЪЧПМСС УПУТЕДПФПЮЙФУС ОБ ПУОПЧОПН РТПЗТБННЙТПЧБОЙЙ. уПЪДБОЙЕ ДЙЪБКОБ ПРХУФЙН Й РЕТЕКДЕН Л РТПЗТБННОПК ЮБУФЙ. фБЛ ЛБЛ ДЙЪБКО УБКФБ ВХДЕФ ПДЙОБЛПЧЩН ДМС ЧУЕИ УФТБОЙГ, ЧЩДЕМЙН УФБФЙЮЕУЛХА Й ДЙОБНЙЮЕУЛХА ЮБУФЙ. ч РТПУФЕКЫЕН УМХЮБЕ ЬФП ФТЙ ЬМЕНЕОФБ: ЧЕТИОСС ЮБУФШ УФТБОЙГЩ (header), ФЕМП УФТБОЙГЩ (body) Й ОЙЦОСС ЮБУФШ (footer) – УН. ТЙУ. 1. Header Й footer (УФБФЙЮЕУЛБС ЮБУФШ УБКФБ) ВХДХФ ПВЭЙНЙ ДМС ЧУЕИ УФТБОЙГ. рПЬФПНХ ЙИ НПЦОП ЧЩОЕУФЙ Ч ПФДЕМШОЩЕ ЛПНРПОЕОФЩ Й РПДЛМАЮБФШ ЧП ЧУЕИ УФТБОЙГБИ. оП РТПРЙУЩЧБФШ ПДЙО Й ФПФ ЦЕ ЛПД ЧП ЧУЕИ ЛПНРПОЕОФБИ (Ч ДЙОБНЙЮЕУЛПК ЮБУФЙ) - ЪБОСФЙЕ ОЕВМБЗПДБТОПЕ. рТПЗТБННЙУФЩ ОБ (PHP/ASP) ПВИПДСФ ЬФП ОЕХДПВУФЧП, ПТЗБОЙЪХС ЧЩЧПД ЧУЕЗП УПДЕТЦЙНПЗП УБКФБ ЙЪ ПДОПК УФТБОЙГЩ. рЕТЕДБЧБЕНЩК РБТБНЕФТ, ПРТЕДЕМСЕФ, ЛБЛПК ДПЛХНЕОФ ОХЦОП ЧЩДБФШ. оП ЬФП ОЕ УБНЩК МХЮЫЙК ЧБТЙБОФ, Й РТЙ УМПЦОПК УФТХЛФХТЕ УБКФБ РПТПЦДБЕФ ТСД РТПВМЕН. Mason РТЕДМБЗБЕФ ВПМЕЕ ХДПВОЩК УРПУПВ ПВИПДБ ДБООПЗП ОЕХДПВУФЧБ - ЮЕТЕЪ ЛПНРПОЕОФ autohandler. Mason РЕТЕД ПВТБВПФЛПК ЧЩЪЧБООПЗП ЛПНРПОЕОФБ РТПЧЕТСЕФ Ч ФЕЛХЭЕК Й ЧЩЫЕМЕЦБЭЙИ ДЙТЕЛФПТЙСИ ОБМЙЮЙЕ ЖБКМБ autohandler. еУМЙ ПО ОБКДЕО, ХРТБЧМЕОЙЕ УОБЮБМБ РЕТЕДБЕФУС ЕНХ. йФБЛ, РТЙЫМП ЧТЕНС ОБРЙУБОЙС РЕТЧПЗП Mason-ДПЛХНЕОФБ. жБКМ autohandler: @ Test page @ >

<% scalar localtime() %>
Test page
		<% $m->call_next %>

<%init> my $BG; my $FN; $BG = $cookie{"BG"} || "#006633"; $FN = $cookie{"FN"} || "#cccc66"; дМС ЬЛПОПНЙЙ НЕУФБ ПРЙУБОЙС УФЙМЕК ПРХЭЕОЩ. рПМОХА ЧЕТУЙА ФЕУФПЧПЗП УБКФБ НПЦОП ЧЪСФШ РП БДТЕУХ . ч autohandler ОБИПДСФУС Й header Й footer. тБЪВЕТЕНУС, ЛБЛ ЧУЕ ТБВПФБЕФ. рХУФШ ЪБРТБЫЙЧБЕФУС ЖБКМ index.html. Mason УОБЮБМБ ОБИПДЙФ autohandler, ЧЩРПМОСЕФ ВМПЛ <%init> Й ЧЩДБЕФ РПМШЪПЧБФЕМА ЧУЕ, ЮФП РТЕДЫЕУФЧХЕФ $m->call_next. ьФП Й ЕУФШ ОБЫ header. нЕФПД call_next РЕТЕДБЕФ ХРТБЧМЕОЙЕ ЪБРТПЫЕООПНХ ЛПНРПОЕОФХ (index.html). рПУМЕ ПВТБВПФЛЙ Й ЧЩДБЮЙ ТЕЪХМШФБФПЧ ТБВПФЩ index.html ЧЩЧПДЙФУС ПУФБЧЫБСУС ЮБУФШ autohandler. уФТЕНСУШ УДЕМБФШ УБКФ НБЛУЙНБМШОП ХДПВОЩН, РТЕДПУФБЧЙН РПУЕФЙФЕМА ЧПЪНПЦОПУФШ ОБУФТБЙЧБФШ ГЧЕФ ФЕЛУФБ Й ЖПОБ (ИПФС РБТБНЕФТПЧ НПЦОП ЧЩВТБФШ ВПМШЫЕ, ОП ДМС ДЕНПОУФТБГЙЙ ПЗТБОЙЮЙНУС ДЧХНС). чЩ, ОБЧЕТОПЕ, ЪБНЕФЙМЙ ЗМПВБМШОЩК ИЬЫ %cookie. ьФПФ ИЬЫ УПДЕТЦЙФ РЕТЕДБООЩЕ ВТБХЪЕТПН cookies. рПЛБ ОЕ ВХДЕН ЧДБЧБФШУС Ч РПДТПВОПУФЙ ЪБОЕУЕОЙС cookies Ч ЬФПФ ИЬЫ. фБЛЙН ПВТБЪПН, ЕУМЙ ПФ РПМШЪПЧБФЕМС РПУЩМБАФУС cookies, ФП ЪОБЮЕОЙС РП ХНПМЮБОЙА ЪБНЕОСАФУС РПМШЪПЧБФЕМШУЛЙНЙ. вМБЗПДБТС autohandler, ОБУ ВПМШЫЕ ОЕ ВХДЕФ ВЕУРПЛПЙФШ ЗПМПЧОБС ВПМШ РП ХЮЕФХ ЛМЙЕОФУЛЙИ ОБУФТПЕЛ Й ЧЩЧПДХ УФБФЙЮЕУЛПК ЮБУФЙ УБКФБ. фЕРЕТШ НПЦОП УПУТЕДПФПЮЙФШУС ОБ РТПЗТБННЙТПЧБОЙЙ ВПМЕЕ ЧБЦОЩИ ЧЕЭЕК. дБМЕЕ ТБУУНПФТЙН ЖБКМ index.html (ТЙУ. 2). дПРХУФЙН, ПО ЧЩЧПДЙФ РПУМЕДОЙЕ 10 ОПЧПУФЕК, УПТФЙТХС РП ХВЩЧБОЙА ДБФ. чУЕ ОПЧПУФЙ ИТБОСФУС Ч MySQL Ч ФБВМЙГЕ news. % while (my ($date,$desrc,$link) = $select->fetchrow()) { % }

<% $date %> - <% $descr %> ...">рПДТПВОЕЕ

<%init> my $select = $dbh->prepare(qq(SELECT * FROM news ORDER BY ndate DESC LIMIT 10)); $select->execute; <%cleanup> $select->finish; бЧФПТ ОЕ УФПТПООЙЛ ФПЗП, ЮФПВЩ ИТБОЙФШ SQL-ЛПД Ч ЛПНРПОЕОФБИ. рТЙ ЙЪНЕОЕОЙЙ ФБВМЙГЩ НПЦОП РТПУФП ОЕ ЧУРПНОЙФШ, Ч ЛБЛЙИ ДПЛХНЕОФБИ ПУХЭЕУФЧМСЕФУС ЧЩВПТЛБ. пРФЙНБМШОЩН ЧБТЙБОФПН НПЦЕФ ВЩФШ УПЪДБОЙЕ ПФДЕМШОПЗП НПДХМС У ЛПОУФБОФБНЙ ЙМЙ ЙУРПМШЪПЧБОЙЕ УПВУФЧЕООЩИ РТПГЕДХТ. ч ОБЮБМЕ УФБФШЙ ЗПЧПТЙМПУШ, ЮФП НПДХМШ Mason РПЪЧПМСЕФ ЧОПУЙФШ ЙЪНЕОЕОЙС Ч ПВТБВПФЮЙЛ, Б ФПЮОЕЕ ЙУРПМШЪПЧБФШ УЧПК. еУМЙ ЕУФШ ЧПЪНПЦОПУФШ, МХЮЫЕ ЙУРПМШЪПЧБФШ ЙНЕООП ЕЗП. ч ДЙУФТЙВХФЙЧЕ НПДХМС ЕУФШ "УЛЕМЕФ" ЬФПЗП ПВТБВПФЮЙЛБ - ЖБКМ handler.pl. лПОЕЮОП ЦЕ, ЧБН ОЕ РТЙДЕФУС РЙУБФШ У ОХМС УЧПК handler. дПУФБФПЮОП МЙЫШ ДПРЙУБФШ УЧПК ЛПД Ч ХЦЕ ЙНЕАЭЙКУС. ч handler.pl РПДЛМАЮБЕФУС HTML::Mason, ПО-ФП Й ЧЩРПМОСЕФ ЧУА ТБВПФХ. ч ЬФПН ЖБКМЕ УПЪДБАФУС ЗМПВБМШОЩЕ ИЬЫ %cookie Й ПВЯЕЛФ $dbh. оЕ ЪБВХДШФЕ ЪБНЕОЙФШ УФТПЛХ PerlModule HTML::Mason::ApacheHandler ОБ PerlRequire /path/handler.pl Ч httpd.conf. ч handler.pl ЕУФШ ДЧБ ВМПЛБ, Ч ЛПФПТЩЕ НПЦОП ЧОПУЙФШ ЙЪНЕОЕОЙС. ч РЕТЧПН РПДЛМАЮБАФУС НПДХМЙ. пЮЕОШ ХДПВОП РПДЛМАЮБФШ Ч ЬФПН ВМПЛЕ ЧУЕ ЙУРПМШЪХЕНЩЕ НПДХМЙ Й ТБВПФБФШ У ОЙНЙ Ч ЛПНРПОЕОФБИ ЮЕТЕЪ ЗМПВБМШОЩЕ ПВЯЕЛФЩ. чП ЧФПТПН (НЕФПД handler) ПРЙУЩЧБЕФУС ЧЕУШ ЛПД. рТЙНЕТ ЖБКМБ handler.pl: package HTML::Mason; use HTML::Mason; use HTML::Mason::ApacheHandler; use strict; { # ВМПЛ РПДЛМАЮЕОЙС НПДХМЕК package HTML::Mason::Commands; # ЗМПВБМШОЩЕ РЕТЕНЕООЩЕ use vars qw(%cookie $dbh); # ЙУРПМШЪХЕНЩЕ НПДХМЙ use CGI::Cookie; use DBI; } # УПЪДБОЙЕ ПВЯЕЛФПЧ mason my $parser = new HTML::Mason::Parser; my $interp = new HTML::Mason::Interp (parser => $parser, comp_root => "/usr/local/www/mason", data_dir => "/usr/local/www/data"); my $ah = new HTML::Mason::ApacheHandler (interp => $interp); chown (Apache->server->uid, Apache->server->gid, $interp->files_written); sub handler { my ($r) = @_; my %c = parse CGI::Cookie($r->header_in("Cookie")); # ХДБМСЕН РТЕДЯЩДХЭЕЕ ЪОБЮЕОЙЕ %HTML::Mason::Commands::cookie = (); foreach my $temp (keys %c) { # ДПВБЧМСЕН ЪОБЮЕОЙС Ч ИЬЫ $HTML::Mason::Commands::cookie{$temp} = $c{$temp}->value(); } # РПДЛМАЮБЕНУС Л вд $HTML::Mason::Commands::dbh = DBI->connect("DBI:mysql:database=mason;host=host", "user","pass"); my $status = $ah->handle_request($r); $HTML::Mason::Commands::dbh->disconnect(); return $status; } лПНРПОЕОФ У ЖПТНПК ОБУФТПКЛЙ ДЙЪБКОБ УБКФБ ЧЩЗМСДЙФ УМЕДХАЭЙН ПВТБЪПН. <%def .outmesg> <% $ARGS{"MESG"}%> оБУФТПКЛБ УБКФБ <%init> if ($ARGS{"GO"}) { # РТПЧЕТЛБ ЧЧЕДЕООЩИ РПМЕК if ($ARGS{"BG"} !~ /^[\d\w]+$/ || $ARGS{"FN"} !~ /^[\d\w]+$/) { $m->comp(".outmesg", MESG => "оЕРТБЧЙМШОП ЧЧЕДЕОЩ ДБООЩЕ"); } else { $r->headers_out->add("Set-Cookie","BG=$ARGS{"BG"}"); $r->headers_out->add("Set-Cookie","FN=$ARGS{"FN"}"); $m->comp(".outmesg",MESG => "хУФБОПЧЛЙ УПИТБОЕОЩ"); } } фЕЗ <%def> ПРЙУЩЧБЕФ ЛПНРПОЕОФ Ч ЛПНРПОЕОФЕ. рПУМЕДОЙЕ ЫФТЙИЙ дМС ФПЗП, ЮФПВЩ ЙУЛМАЮЙФШ ЧПЪНПЦОПУФШ ЧЩЪПЧБ ЧОХФТЕООЙИ ЛПНРПОЕОФ, ОХЦОП ДПВБЧЙФШ Ч ЛПОЖЙЗХТБГЙПООЩК ЖБКМ УФТПЛЙ: PerlModule Apache::Constants SetHandler perl-script PerlInitHandler Apache::Constants::NOT_FOUND ьФП ЪБЭЙФЙФ ЧОХФТЕООЙЕ ЛПНРПОЕОФЩ ПФ ОЕЦЕМБФЕМШОПЗП ЧЩЪПЧБ ЙЪ ВТБХЪЕТБ. оП Ч ЬФПН УМХЮБЕ ЧУЕ ЧОХФТЕООЙЕ ЛПНРПОЕОФЩ ДПМЦОЩ ОБЮЙОБФШУС У УЙНЧПМБ “_”. ъБЛМАЮЕОЙЕ вПМЕЕ РПДТПВОХА ЙОЖПТНБГЙА НПЦОП ХЪОБФШ ЙЪ ДПЛХНЕОФБГЙЙ Л НПДХМА (perldoc HTML::Mason::Devel, perldoc HTML::Mason::Admin). п HTML::Mason Ч УФБФШЕ УЛБЪБОП ДБМЕЛП ОЕ ЧУЕ. оП РТЙЧЕДЕООПК ЙОЖПТНБГЙЙ ХЦЕ ДПУФБФПЮОП ДМС ФПЗП, ЮФПВЩ ПГЕОЙФШ ДПУФПЙОУФЧБ ЬФПЗП НПДХМС. уФБТБОЙС ТБЪТБВПФЮЙЛПЧ ОЕ РТПЫМЙ ДБТПН. ьФПФ НПДХМШ ХЦЕ ХУРЕМ ЪБОСФШ ДБМЕЛП ОЕ УБНПЕ РПУМЕДОЕЕ НЕУФП Ч УРЙУЛЕ РПРХМСТОЩИ web-ФЕИОПМПЗЙК. уУЩМЛЙ 1. тЕУХТУЩ РП mod_perl Й ЫБВМПОБН

Страницы делятся на статические и динамические по поведению документа в браузере. С другой стороны эти понятия часто используют и в другом смысле. Документы также делятся на статические и динамические по способу создания документа.

По поведению документа в браузере пользователя, различают:

Статические html страницы
Статические - означает, что страница выглядит всегда одинаково, на зависимо от действий пользователя. Например, меню организованно ссылками на отдельные страницы, а не выпадающим списком.
Динамические html страницы
Эти страницы уже могут реагировать на действия пользователя и изменяться. Например, при щелчке по тексту может показываться всплывающий блок текста с переводом слова. Кстати, именно так реализован один из плугинов-переводчиков для браузера Firefox.

Динамика на веб страницах реализована при помощи скриптов, которые выполняются браузером. Многие элементы языка html поддерживают определение обработчиков событий. Например, можно задать обработку события "нажатия кнопки мыши" на картинке. Тогда если пользователь кликнет на эту картинку, вызовется определенный для этого обработчик.

Это может звучать несколько запутано, но не переживайте. Когда вы с этим столкнетесь - все будет проще.

Самый распространенный язык для создания динамики веб страниц - это JavaScript. (Не путайте с языком программирования Java. Это две совершенно разные сущности.)
Реже используется VBscript(visual basic script). (Microsoft как всегда пошла своим путем.)

По способу создания документы делят опять на статические и динамические.

Статическими называют страницы, если они лежат на сервере в html виде.
А динамическими называют те, которые генерируются "на лету" по запросу браузера.

Как легко увидеть, если на сервере лежит обычная html страница, то такой подход сильно ограничен. Например, у вас есть интернет-магазин, и вы добавили новый товар. Если ваш магазин состоит из "статических" html страниц, то вы должны вручную подправить несколько других страничек. Как минимум это каталог товаров и, наверное, форму заказа. Если у вас кончился какой-либо товар, то опять надо обновлять сайт. Это очень неудобно. Поэтому вы не найдете ни одного интернет магазина на html. (Хотя и можно придумать систему, которая автоматически перегенирирует сайт при изменении товара. Но это не очень элегантное решение и я о таком никогда не слышал).

Если ваш сайт содержит часто меняющийся контент (content - информация на сайте), то вам на помощь придут скрипты, выполняющиеся на сервере . И это ключевое отличие этих скриптов, от описанных ранее (тех, что написаны на JavaScript). Работает это следующим образом:

Браузер запрашивает у сервера документ
Сервер определяет, что документ является скриптом и запускает его на выполнение
Скрипт генерирует html страницу
Сервер отправляет сгенерированную страницу браузеру, так что тот и не догадывается, что на сервере отработал скрипт

Существует несколько языков программирования, на которых могут писать скрипты, которые генерируют "динамические" страницы. Самые распространенные из них:

Python
Бинарный код (программа на Си или С++ скомпилированная в исполняемый код)

Каждый из этих языков имеет свои особенности применения. Писать скрипты можно на любом языке. Главное знать его сильные и слабые стороны и использовать их эффективно. Я еще расскажу об этих языках поподробнее на страницах нашей рассылки. А пока, важно знать, что существуют различные языки программирования, на которых программируются сайты с часто меняющимся контентом.

Как правило если вы видите, что адрес страницы заканчивается на.html или.htm, то это обычная статическая страница. (Можно конечно настроить сервер так, чтобы он исполнял скрипты, которые заканчиваются на эти же окончания, только это не практично. Все таки.html и.htm - это стандарт и переопределять эти окончания не стоит.) Если же вы видите любое другое окончание, то это скорее всего скрипт. Например, скрипты на языке PHP имеют обычно расширение.php, на языке Perl - .pl, ASP - .aspx
Если же адрес не содержит имени страницы, то сервер будет использовать документ заданный по умолчанию (обычно это либо index.html либо index.htm либо index.php).

Надо сказать, что сейчас все больше набирает силу гибридная система. Название у нее, как у голландского футбольного клуба - AJAX, что означает: Asyncronous JavaScript And XML (Как расшифровывается название голландского клуба я не знаю:)). Эта технология позволяет скриптам на JavaScript обращаться к какому либо скрипту на сервере и получать информацию с сервера. Это в свою очередь, дает пользователю гибкость и позволяет перезагружать только часть содержимого страницы, а не всю ее полностью (что значительно экономит трафик).

Выводы

Статические html страницы - не очень гибкое решение. Использовать их стоит, только если у вас полностью статическое содержание. Например, вы выкладываете в сеть какую-либо книгу. Книга уже написана и изменяться не будет. В этом случае, намного эффективнее и проще оформить книгу как статический html документ.

Если же у вас на сайте часто меняющаяся информация, то выбор следует остановить на использовании скриптов.
Вот расхвалил вам скрипты. Однако, у скриптов есть один минус: они требуют дополнительных ресурсов от сервера для своей работы. Если html страничку надо просто прочитать с сервера и отправить браузеру, то скрипт надо сначала запустить и выполнить. К тому же, очень часто скрипты используют систему управления базой данных (СУБД ) для хранения изменяющихся данных, что создает дополнительную нагрузку.

Александр Архипов

От автора: В данной статье рассказывается о том, как настроить Bootstrap перед скачиванием, и рассматриваются некоторые моменты, касающиеся выбора компонентов. Вы узнаете, какие возможности данного фреймворка вам нужны, а какие нет, в зависимости от ваших потребностей.

Из прошлой статьи вы уже знаете, что такое , когда его следует использовать, а также из чего он состоит. Сейчас вы узнаете, как выбирать компоненты для вашего проекта, как настроить фреймворк под ваши задачи, как убрать все лишнее и не запутаться при этом. Это начальный этап практической работы с Bootstrap, и любой базовый проект начинается с данного этапа.

Зачем настраивать Bootstrap

Это очень хороший вопрос, поскольку вы же можете просто скачать целиком весь архив, не настраивая его, и работать с ним. Есть две причины: во-первых, скорее всего вам не понадобятся все компоненты Bootstrap, а, во-вторых, размер всего фреймворка не такой уж незначительный (даже в сжатом виде) — 525 Кб. Плюс 95 Кб весит jQuery, потому что без него фреймворк не будет работать. Такую роскошь не может позволить себе ни один фронтенд разработчик, поэтому вам нужно убрать все лишнее. В любом случае всегда удаляйте ненужные компоненты.

Выбор компонентов

На странице загрузки Bootstrap вы увидите форму с чекбоксами. Здесь вам нужно отметить те компоненты, которые пригодятся вам в работе над проектом. И давайте теперь взглянем на некоторые составляющие Bootstrap и их предназначение.

Базовый CSS (Common CSS)

Это набор базовых элементов, необходимых для базовой разметки. Его всегда рекомендуется оставлять отмеченным.

Стили для печати (print media styles)

Это стили, которые используются браузерами перед печатью страниц. Вы можете настроить их, как вам нравится, используя следующую запись:

@media print { /* ваши стили */ }

Типографика (Typography)

Базовое оформление текста: различные отступы, абзацы, цитаты, подсветка кода, форматированный текст, заголовки, индексы – все это оформляется с помощью данных стилей.

Даже если вы не будете использовать предустановленные классы на странице, ее содержимое будет отображено в стиле Bootstrap. Это полезно для тех, кто не может или не хочет копаться в старом коде. Просто подключите библиотеку, чтобы сделать текст привлекательнее.

Вот как можно изменить простой текст без использования дополнительных стилей:

Код (Code)

Форматирование кода на страницах. Конечно, здесь не будет подсветки синтаксиса. Для этого нужно будет использовать сторонний плагин (не имеющий никакого отношения к Bootstrap). Но фреймворк позволит вам отличать код от обычного текста с помощью использования тегов code, pre или kdb.

Сеточная система (Grid system)

Магия, которую используют CSS фреймворки, до сих пор вызывает благоговейный трепет у бывалых разработчиков, которые начинали работать еще 10 лет назад, и перед началом проекта им предстояло сделать выбор между табличной или блочной версткой. А сегодня, просто путем добавления нужных классов, вы получаете адаптивный (отзывчивый) макет для вашего веб-сайта всего за 10 минут.

Давайте посмотрим на пример того, как это может выглядеть:

Таблицы (Tables)

Табличная верстка давно ушла в прошлое, но табличные данные должны отображаться соответствующим образом, если не предусмотрено ничего другого. Без хорошо подобранного дизайна, данные будут смотреться не очень привлекательно. Постарайтесь избегать следующего отображения:

После простого добавления Bootstrap, без внесения каких-либо изменений в HTML, таблица будет выглядеть вот так:

Формы (Forms)

Если вам нужно создать формы, вы можете использовать Bootstrap:

Отметьте чекбокс «Форма» («Form»), если вам предстоит создание формы.

Кнопки (Buttons)

Кнопки Bootstrap достойны отдельного обсуждения: по умолчанию они бывают 4 размеров и 7 разных типов. Дополнительно есть кнопка с выпадающим меню, блочные кнопки и т.д. По умолчанию кнопки в Bootstrap выглядят вот так:

Утилиты для отзывчивого дизайна (Responsive utilities)

В Bootstrap есть набор полезных инструментов для быстрого и легкого создания макета под мобильные устройства. Благодаря этим инструментам вы можете скрывать и показывать некоторые компоненты на разных устройствах, изменять их размеры, отдельно для больших, средних и маленьких экранов. Данный компонент существенно сокращает количество кода и состоит из следующих классов:

Как видите, один и тот же блок может быть скрыт на планшете, но отображен на настольном компьютере или мобильном устройстве.

Компоненты (Components)

Здесь дается лишь краткое объяснение, потому что сами по себе компоненты малы и можно легко понять их предназначение по названию.

1. Глиф-иконки (Glyphicons). Иконочный шрифт. Весит около 250 Кб и редко используется. Поэтому если он не нужен, отключите его.

2. Группы кнопок (Button groups). Блоки, состоящие из пары кнопок.

3.Группы полей ввода (Input groups). Расширение для текстовых блоков и полей, например, «Имя пользователя» (Username):

4. Навигация (Navs). Навигация по табам (вкладкам). Для использования нужно подключить js-модуль.

5. Навигационная панель (Navbar). Навигация для главного меню; может быть фиксированной, светлой или темной.

6. «Хлебные крошки» (Breadcrumbs). Позволяет пользователям отслеживать местонахождение на сайте.

7. Постраничная навигация (Pagination). Отображает количество страниц на веб-сайте. Особенно полезно для блогов.

8. Переключатель страниц (Pager). Кнопки «вперед» и «назад».

9. Этикетки (Labels). Имеется 6 типов:

10. Бейджи (Badges). Используются, например, для отображения количества непрочитанных сообщений.

11. Приветственный блок (Jumbotron). Большой блок с вступительным текстом. Обычно используется на промо-сайтах и содержит короткое описание проекта.

12. Миниатюры (Thumbnails). Отвечает за отображение уменьшенных вариантов изображений.

13. Предупреждения (Alerts). Указывают на успех, ошибку, информацию или подсказку.

14. Индикатор процесса (Progress bars). Процесс выполнения отображается в процентах. Дополнительно можно применять анимацию и добавлять полосатый фон.

15. Медиа объекты (Media items). Форматирование блоков с комментариями, твитами и т.д. Это обычно списки с вложенными элементами, у которых может отличаться отступ слева, как у традиционных древовидных комментариев.

16. Группы списков (List groups). Форматирование списков с дополнительными возможностями: сноски, ссылки, примечания, уведомления (смотрите «этикетки» («labels»)).

17.Панели (Panels). Блоки с хедером, основным контентом и футером. Могут использоваться для усовершенствованных уведомлений, а также для элементов управления или форм.

18. Встраивание отзывчивых элементов (Responsive embed). «Отзывчивые» объекты могут расширяться и подстраиваться под разные размеры экрана для отображения видео в нужных пропорциях и без непосредственного указания размера.

19. Вдавленные элементы (Wells). Блоки с подсказками, альтернативным оформлением для цитат и т.д.

20. Иконка закрытия (Close icon). Предназначение должно быть понятно по названию.

Компоненты JavaScript

Bootstrap расширяет возможности динамических функций. Работа данного раздела фреймворка основывается на jQuery, и он обязательно должен быть подключен к bootstrap.min.js. Состоит данный раздел из следующих компонентов:

1. Анимация компонентов (Component animations) (для JS). Плавные переходы, анимация.

2. Выпадающие элементы (Dropdowns). Выпадающие списки.

3. Всплывающие подсказки (Tooltips). Небольшие появляющиеся подсказки.

4. Всплывающие элементы (Popovers). По сути такие же всплывающие подсказки, к которым вы можете добавить динамический контент, хедер и основной текст:

5. Модальные окна (Modals). Всплывающие окна. Вы можете изменять их размеры, добавлять заголовок, основной текст, футер, изменять их так, как вам захочется. По умолчанию они выглядят так:

6. Карусель (Carousel). Простой слайдер с выбором анимации.

Настройка переменных

Вы можете изменять стандартные настройки, исходя из ваших потребностей. Вы можете создать собственную тему для Bootstrap двумя способами:

Создайте ваш файл style.css и уже в нем определяйте стили, которые «перезапишут» стили по умолчанию.

В блоке с переменными Less вы можете изменить параметры на те, которые вам действительно нужны, и скачать измененный под вас архив с Bootstrap.

Скачивание

После того как вы закончите с изменением настроек, нажмите на кнопку «Компилировать и скачать» («Compile and download»). В загруженном архиве у нас будут содержаться только выбранные нами элементы. Для сравнения: небольшой проект использует лишь какую-то часть функционала, поэтому размер фреймворка очень легко уменьшить с 600 Кб до 100 Кб. Полученные в результате файлы можно сохранить в папке с проектом, а затем подключить bootstrap.min.css и (если нужно) bootstrap.min.js.