Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum un eros.
Bootstrap ir Twitter rīku komplekts, kas paredzēts tīmekļa lietotņu un vietņu izstrādes uzsākšanai.
Tas ietver pamata CSS un HTML tipogrāfijai, veidlapām, pogām, tabulām, režģiem, navigācijai un citiem.
Brīdinājums par nerdiem : Bootstrap ir veidots, izmantojot Less , un tas ir paredzēts darbam ārpus vārtiem, paturot prātā tikai modernās pārlūkprogrammas.
Lai sāktu ātrāk un vienkāršāk, vienkārši iekopējiet šo fragmentu savā tīmekļa lapā.
Vai vēlaties izmantot Mazāk? Nav problēmu, vienkārši klonējiet repo un pievienojiet šīs rindas:
Lejupielādējiet, dakšojiet, velciet, reģistrējiet problēmas un veiciet citas darbības, izmantojot oficiālo Bootstrap repo vietnē Github.
Noklusējuma režģa sistēma, kas tiek nodrošināta kā daļa no Bootstrap, ir 940 pikseļu plats 16 kolonnu režģis. Tas ir populārās 960 režģa sistēmas aromāts, taču bez papildu piemales/polsterējuma kreisajā un labajā pusē.
Kā parādīts šeit, pamata izkārtojumu var izveidot ar divām "kolonnām", no kurām katra aptver vairākas no 16 pamata kolonnām, kuras definējām kā daļu no mūsu režģa sistēmas. Vairāk variantu skatiet tālāk sniegtajos piemēros.
- <div class="row"> klase = "rinda" >
- <div class = "span6 kolonnas" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
Vienkāršs 940 pikseļus plats, centrēts konteinera izkārtojums gandrīz jebkurai vietnei vai lapai.
- <body>
- <div class = "konteiners" >
- ...
- </div>
- </body>
Elastīga šķidra vai šķidra lapas struktūra ar minimālo un maksimālo platumu un kreiso sānjoslu. Lieliski piemērots lietotnēm.
- <body>
- <div class = "container-fluid" >
- <div class = "sānjosla" >
- ...
- </div>
- <div class = "saturs" >
- ...
- </div>
- </div>
- </body>
Standarta tipogrāfiska hierarhija jūsu tīmekļa lapu strukturēšanai.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Varat arī pievienot apakšvirsrakstus ar <strong>
un<em>
Izmantojot uzsvarus, adreses un saīsinājumus
<strong>
<em>
<address>
<abbr>
Uzsvara atzīmes ( <strong>
un <em>
) ir jāizmanto, lai vizuāli atšķirtu vārdu vai frāzi un to apkārtējo kopiju. Izmantojiet <strong>
vienkāršai vecai uzmanībai un gludai <em>
uzmanībai un nosaukumiem.
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 pharetra augue.
Elements address
tiek izmantots — jūs to uzminējāt! — adresēm. Lūk, kā tas izskatās:
Piezīme. Katrai rindiņai address
ir jābeidzas ar rindiņas pārtraukumu ( <br />
), lai pareizi strukturētu saturu tā, kā tas tiek lasīts reālajā dzīvē, neizmantojot nekādus stilus.
Saīsinājumiem un akronīmiem izmantojiet abbr
tagu ( acronym
ir novecojis HTML5 ). Ievietojiet īsraksta veidlapu tagā un iestatiet nosaukumu pilnam nosaukumam.
<blockquote>
<p>
<cite>
Noteikti aptiniet savu blockquote
apkārtni paragraph
un cite
atzīmes. Atsaucoties uz avotu, izmantojiet cite
elementu. CSS automātiski ievadīs nosaukumu ar domuzīmi (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Galdi ir lieliski piemēroti daudzām lietām. Tomēr lieliskām tabulām ir vajadzīga neliela iezīmēšana, lai tās būtu noderīgas, mērogojamas un lasāmas (koda līmenī). Šeit ir daži padomi, kas palīdzēs.
Vienmēr ietiniet sleju galvenes thead
tā, lai hierarhija būtu thead
> tr
> th
.
Līdzīgi kā kolonnu galvenēs, viss tabulas pamatteksts ir jāiekļauj a tbody
, lai jūsu hierarhija būtu tbody
> tr
> td
.
Visas tabulas tiks automātiski veidotas tikai ar būtiskām apmalēm, lai nodrošinātu lasāmību un saglabātu struktūru. Nav nepieciešams pievienot papildu klases vai atribūti.
# | Vārds | Uzvārds | Valoda |
---|---|---|---|
1 | Dažas | Viens | Angļu |
2 | Džo | Sešpaka | Angļu |
3 | Stu | Dent | Kods |
- <table class="common-table"> klase = "kopējā tabula" >
- ...
- </table>
Izbaudiet savus galdus, pievienojot zebras joslas — vienkārši pievienojiet .zebra-striped
klasi.
# | Vārds | Uzvārds | Valoda |
---|---|---|---|
1 | Dažas | Viens | Angļu |
2 | Džo | Sešpaka | Angļu |
3 | Stu | Dent | Kods |
- <table class="common-table zebra-striped"> klase = "parastā galda zebra-svītrains" >
- ...
- </table>
Ņemot vērā iepriekšējo piemēru, mēs uzlabojam savu tabulu lietderību, nodrošinot šķirošanas funkcionalitāti, izmantojot jQuery un spraudni Tablesorter . Noklikšķiniet uz jebkuras kolonnas galvenes, lai mainītu kārtošanu.
# | Vārds | Uzvārds | Valoda |
---|---|---|---|
1 | Jūsu | Viens | Angļu |
2 | Džo | Sešpaka | Angļu |
3 | Stu | Dent | Kods |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skripta veids = "text/javascript" >
- $ ( dokuments ). gatavs ( funkcija () {
- $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "parastā galda zebra-svītrains" >
- ...
- </table>
Visām veidlapām tiek piešķirti noklusējuma stili, lai tās parādītu lasāmā un mērogojamā veidā. Stili ir nodrošināti teksta ievadei, atlases sarakstiem, teksta apgabaliem, radio pogām un izvēles rūtiņām un pogām.
Pievienojiet .form-stacked
savas veidlapas HTML, un etiķetes būs augšpusē, nevis pa kreisi. Tas darbojas lieliski, ja jūsu veidlapas ir īsas vai smagākām formām ir divas ievades kolonnas.
Parasti pogas tiek izmantotas darbībām, bet saites tiek izmantotas objektiem. Piemēram, “Lejupielādēt” varētu būt poga un “nesenā darbība” varētu būt saite.
Visām pogām pēc noklusējuma ir gaiši pelēks stils, taču ir pieejama zilā .primary
klase. Turklāt ir viegli izveidot savus stilus.
Pogu stilus var lietot jebko, izmantojot .btn
lietoto. Parasti tos vēlēsities lietot tikai a
, button
un atlasītajiem input
elementiem. Lūk, kā tas izskatās:
Vai vēlaties lielākas vai mazākas pogas? Izdari to!
Pogām, kas nav aktīvas vai kuras lietotne viena vai otra iemesla dēļ ir atspējojusi, izmantojiet atspējošanas stāvokli. Tas .disabled
attiecas uz saitēm un :disabled
elementiem button
.
Vienas rindiņas ziņojumi, lai izceltu darbības neveiksmi, iespējamu neveiksmi vai panākumus. Īpaši noderīga formām.
Ziņojumiem, kuriem nepieciešams neliels skaidrojums, mums ir rindkopas stila brīdinājumi. Tie ir lieliski piemēroti, lai izpūstu garākus kļūdu ziņojumus, brīdinātu lietotāju par nepabeigtu darbību vai vienkārši sniegtu informāciju, lai lapā būtu lielāks uzsvars.
Modāļi — dialoglodziņi vai gaismas kastes — ir lieliski piemēroti kontekstuālām darbībām situācijās, kad ir svarīgi saglabāt fona kontekstu.
Viens labs ķermenis...
Twipsis ir ļoti noderīgi, lai palīdzētu apjukušam lietotājam un norādītu viņu pareizajā virzienā.
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 totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremetemque unde sunt sed volquauttemm a volquauttitamm volquauttitamm accttasusantuptas quautta
Izmantojiet uznirstošos logus, lai sniegtu lapai zemtekstu informāciju, neietekmējot izkārtojumu.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum un eros.
Bootstrap tika izveidots, izmantojot Preboot — atvērtā koda kombināciju un mainīgo pakotni, kas jāizmanto kopā ar Less — CSS priekšprocesoru ātrākai un vienkāršākai tīmekļa izstrādei.
Uzziniet, kā mēs izmantojām Preboot programmā Bootstrap un kā jūs varat to izmantot, ja izvēlēsities nākamajā projektā palaist Less.
Izmantojiet šo opciju, lai pilnībā izmantotu Bootstrap's Less mainīgos, mixins un ligzdošanu CSS, izmantojot JavaScript savā pārlūkprogrammā.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />
- <script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
Vai nejūtat .js risinājumu? Izmēģiniet lietotni Less Mac vai izmantojiet Node.js , lai kompilētu, izvietojot kodu.
Šeit ir daži no svarīgākajiem aspektiem, kas ir iekļauti pakalpojumā Twitter Bootstrap kā daļa no Bootstrap. Dodieties uz Bootstrap vietni vai Github projekta lapu, lai lejupielādētu un uzzinātu vairāk.
Mainīgie Less ir lieliski piemēroti, lai uzturētu un atjauninātu CSS bez galvassāpēm. Ja vēlaties mainīt krāsas vērtību vai bieži lietotu vērtību, atjauniniet to vienā vietā un esat gatavs.
- // Saites
- @linkColor : #8b59c2;
- @linkColorHover : aptumšot ( @linkColor , 10 );
- // Pelēkie
- @melns : #000;
- @pelēksDark : gaišāks ( @melns , 25 %);
- @ pelēks : gaišināt ( @melns , 50 %);
- @greyLight : gaišināt ( @melns , 70 %);
- @greyLighter : gaišināt ( @melns , 90 %);
- @balts : #fff;
- // Akcentu krāsas
- @zils : #08b5fb;
- @zaļš : #46a546 ;
- @red : #9d261d;
- @dzeltens : #ffc40d;
- @oranžs : #f89406 ;
- @rozā : #c3325f ;
- @violeta : #7a43b6;
- // Pamatlīnija
- @baseline : 20px ;
Less nodrošina arī citu komentēšanas stilu papildus CSS parastajai /* ... */
sintaksei.
- // Šis ir komentārs
- /* Šis arī ir komentārs */
Sajaukumi būtībā ir CSS savienojumi vai daļēji, kas ļauj apvienot koda bloku vienā. Tie ir lieliski piemēroti pārdevēja prefiksiem, piemēram box-shadow
, , starppārlūkprogrammu gradientiem, fontu kaudzēm un citiem. Tālāk ir sniegts Bootstrap komplektācijā iekļauto mixin paraugs.
- #font {
- . saīsinājums ( @svars : normāls , @izmērs : 14 pikseļi , @līnijas augstums : 20 pikseļi ) {
- fonta izmērs : @size ; _
- fonts - svars : @weight ;
- līnijas augstums : @lineHeight ; _
- }
- . sans - serif ( @svars : normāls , @izmērs : 14px , @lineHeight : 20px ) {
- fontu saime : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- fonta izmērs : @size ; _
- fonts - svars : @weight ;
- līnijas augstums : @lineHeight ; _
- }
- . serif ( @svars : normāls , @size : 14px , @lineHeight : 20px ) {
- fontu saime : " Georgia" , Times New Roman , Times , sans - serif ;
- fonta izmērs : @size ; _
- fonts - svars : @weight ;
- līnijas augstums : @lineHeight ; _
- }
- . monospace ( @weight : normāls , @size : 12px , @lineHeight : 20px ) {
- fontu saime : " Monaco" , Courier New , monospace ;
- fonta izmērs : @size ; _
- fonts - svars : @weight ;
- līnijas augstums : @lineHeight ; _
- }
- }
- #gradients {
- . horizontāli ( @startColor : #555, @endColor: #333) {
- fona krāsa : @endColor ; _
- fons - atkārtojiet : atkārtojiet - x ;
- fons - attēls : - khtml - gradients ( lineārs , augšā pa kreisi , augšā pa labi , no ( @startColor ), līdz ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( pa kreisi , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( pa kreisi , @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( lineārs , pa kreisi augšā , labajā augšā , krāsa - pietura ( 0 % , @startColor ), krāsa - pietura ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( pa kreisi , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( pa kreisi , @startColor , @endColor ); // Opera 11.10
- - ms - filtrs : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- filtrs : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 un IE7
- background - image : linear - gradient ( pa kreisi , @startColor , @endColor ); // Le standarts
- }
- . vertikāla ( @startColor : #555, @endColor: #333) {
- fona krāsa : @endColor ; _
- fons - atkārtojiet : atkārtojiet - x ;
- fons - attēls : - khtml - gradients ( lineārs , pa kreisi augšā , pa kreisi apakšā , no ( @startColor ), līdz ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( lineārs , pa kreisi augšā , pa kreisi apakšā , color - stop ( 0 % , @startColor ), color - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- - ms - filtrs : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- filtrs : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 un IE7
- fons - attēls : lineārs - gradients ( @startColor , @endColor ); // Standarts
- }
- . virziena ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikāla — trīs krāsas ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 0,5, @endColor: #c3325f) {
- ...
- }
- }
Iedomājieties un veiciet matemātiku, lai izveidotu elastīgus un jaudīgus miksus, piemēram, tālāk norādīto.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Režģa sistēma
- . konteiners {
- platums : @siteWidth ;
- piemale : 0 auto ;
- . clearfix ();
- }
- . kolonnas ( @columnSpan : 1 ) {
- displejs : iekļauts ;
- pludiņš : pa kreisi ;
- platums : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- margin - left : @gridGutterWidth ;
- &: pirmais — bērns {
- piemale - kreisā : 0 ;
- }
- }
- . nobīde ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! svarīgi ;
- }