Vaikimisi ruudustik

Bootstrapi osana pakutav vaikevõrgusüsteem on 940 piksli laiune 16 veeruga ruudustik. See on populaarse 960 ruudustiku süsteemi maitse, kuid ilma täiendava veeriseta/polsterduseta vasakul ja paremal küljel.

Võrgumärgistuse näide

Nagu siin näidatud, saab põhipaigutuse luua kahe "veeruga", millest igaüks hõlmab mitut 16 põhiveeru, mille määratlesime oma ruudustikusüsteemi osana. Rohkemate variatsioonide nägemiseks vaadake allolevaid näiteid.

<div class="row"> klass = "rida" >
  <div class = "span6 veergu" > 
    ...
  </div>
  <div class = "span10 veergu" > 
    ...
  </div>
</div>

Fikseeritud paigutus

Põhiline 940 piksli laiune tsentreeritud konteinerpaigutus peaaegu iga saidi või lehe jaoks.

<keha>
  <div class = "konteiner" > 
    ...
  </div>
</body>

Vedeliku paigutus

Paindlik vedel või vedel lehe struktuur minimaalse ja maksimaalse laiusega ning vasakpoolse külgribaga. Suurepärane rakenduste jaoks.

<keha>
  <div class = "container-fluid" > 
    <div class = "külgriba" > 
      ...
    </div>
    <div class = "sisu" > 
      ...
    </div>
  </div>
</body>

Pealkirjad ja koopia

Standardne tüpograafiline hierarhia teie veebilehtede struktureerimiseks.

h1. Pealkiri 1

h2. 2. pealkiri

h3. 3. pealkiri

h4. 4. pealkiri

h5. 5. pealkiri

h6. 6. pealkiri

Näidislõik

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.

Näidispealkirjal on alampealkiri...

Samuti saate alampealkirju lisada nupuga <strong>ja<em>

Muu elemendid

Rõhu, aadresside ja lühendite kasutamine

<strong> <em> <address> <abbr>

Millal kasutada

Rõhumärke ( <strong>ja <em>) tuleks kasutada sõna või fraasi ja seda ümbritseva koopia visuaalseks eristamiseks. Kasutage <strong>lihtsalt vana tähelepanu ja <em>libeda tähelepanu ja pealkirjade jaoks.

Rõhuasetus lõigus

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.

Aadressid

Elementi addresskasutatakse — arvate ära! — aadresside jaoks. See näeb välja järgmiselt:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Märkus. Iga rida addresspeab lõppema reavahetusega ( <br />), et sisu õigesti struktureerida nii, nagu seda päriselus loetakse ilma stiile rakendamata.

Lühendid

Lühendite ja akronüümide jaoks kasutage abbrmärgendit ( acronymon HTML5- s aegunud ). Pange stenogrammi vorm sildi sisse ja määrake täielikule nimele pealkiri.

Plokktsitaadid

<blockquote> <p> <cite>

Mähkige kindlasti blockquoteümber paragraphja citesildid. Allikale viitamisel kasutage citeelementi. CSS lisab nime ees automaatselt kriipsu (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr Julius Hibbert

Tellimata<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Minu meeskonnakaaslased
  • George Castanza
  • Jerry Seinfeld
  • Kosmo Kramer
  • Elaine Bennis
  • Uus mees
• John Jacob
• Paul Pierce
• Kevin Garnett

Stiilita<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Minu meeskonnakaaslased
  • George Castanza
  • Jerry Seinfeld
  • Kosmo Kramer
  • Elaine Bennis
  • Uus mees
• John Jacob
• Paul Pierce
• Kevin Garnett

Tellitud<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Minu meeskonnakaaslased
   1. George Castanza
   2. Jerry Seinfeld
   3. Kosmo Kramer
   4. Elaine Bennis
   5. Uus mees
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Kirjeldusdl

Kirjeldusloendid

Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida ja eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ehituslauad

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tabelid on suurepärased - paljude asjade jaoks. Suurepärased tabelid vajavad aga veidi märgistusarmastust, et olla kasulikud, skaleeritavad ja loetavad (koodi tasemel). Siin on mõned näpunäited, mis aitavad.

Mähkige veerupäised alati theadnii, et hierarhia oleks thead> tr> th.

Sarnaselt veerupäistele tuleks kogu tabeli põhisisu mähitud a-sse, tbodynii et teie hierarhia oleks tbody> tr> td.

Näide: tabeli vaikelaadid

Kõik tabelid kujundatakse automaatselt ainult oluliste ääristega, et tagada loetavus ja säilitada struktuur. Täiendavaid klasse ega atribuute pole vaja lisada.

#	Eesnimi	Perekonnanimi	Keel
1	Mõned	Üks	Inglise
2	Joe	Kuuspakk	Inglise
3	Stu	Mõlk	Kood

<table class="common-table"> klass = "ühine tabel" >
  ...
</table>

Näide: sebratriibuline

Lisage sebraribad, lisades oma laudadele pisut elegantsi – lisage lihtsalt .zebra-stripedklass.

#	Eesnimi	Perekonnanimi	Keel
1	Mõned	Üks	Inglise
2	Joe	Kuuspakk	Inglise
3	Stu	Mõlk	Kood

<table class = "tavalaud sebratriibuline" > 
...
</table>

Näide: sebratriibuline koos TableSorter.js-iga

Eelneva näite puhul parandame oma tabelite kasulikkust, pakkudes sortimisfunktsiooni jQuery ja Tablesorteri pistikprogrammi kaudu. Sordi muutmiseks klõpsake mis tahes veeru päist.

#	Eesnimi	Perekonnanimi	Keel
1	Sinu	Üks	Inglise
2	Joe	Kuuspakk	Inglise
3	Stu	Mõlk	Kood

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( dokument ). valmis ( funktsioon () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "tavalaud sebratriibuline" > 
  ...
</table>

Vaikimisi stiilid

Kõigile vormidele antakse vaikestiilid, et neid loetaval ja skaleeritaval viisil esitada. Tekstisisestuse, valikuloendite, tekstialade, raadionuppude ja märkeruutude ning nuppude stiilid on saadaval.

Näidisvormi legend

X-Large sisend

Valige

1 2 3 4 5

Valige

1 2 3 4 5

Redigeerimata sisend

Mingi väärtus siin

Keelatud sisend

X-Large sisend

Väike jupp abitekstist

Näidisvormi legend

Lisatud tekst

@

Lisatud märkeruut

Lisatud märkeruut

Faili sisend

Näidisvormi legend

Valikute loend

• Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
• Variant teist saab ka märkida ja vormitulemustesse kaasata
• Kolmandat valikut saab ka kontrollida ja vormitulemustesse kaasata – jah, arvasite ära
• Neljandat valikut ei saa kontrollida, kuna see on keelatud.

Märkus. Sildid ümbritsevad kõiki võimalusi palju suuremate klõpsamisalade ja kasutatavama vormi jaoks.

Kuupäevavahemik

juurde Kõik ajad on näidatud Vaikse ookeani standardajana (GMT -08:00).

Tekstiala

Abiteksti plokk ülaltoodud välja kirjeldamiseks, kui vaja.

Valikute loend

• Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
• Variant teist saab ka märkida ja vormitulemustesse kaasata

Salvesta muudatused Tühista

Virnastatud vormid

Lisage .form-stackedoma vormi HTML-i ja teil on sildid nende väljade kohal, mitte vasakul. See toimib suurepäraselt, kui teie vormid on lühikesed või kui teil on raskemate vormide jaoks kaks sisendi veergu.

Näidisvormi legend

X-Large sisend

Valige

1 2 3 4 5

Näidisvormi legend

Valikute loend

• Esimene võimalus on see ja see – lisage kindlasti, miks see on suurepärane
• Variant teist saab ka märkida ja vormitulemustesse kaasata

Märkus. Sildid ümbritsevad kõiki võimalusi palju suuremate klõpsamisalade ja kasutatavama vormi jaoks.

Salvesta muudatused Tühista

Nupud

Tavapäraselt kasutatakse nuppe toimingute jaoks, linke aga objektide jaoks. Näiteks "Laadi alla" võib olla nupp ja "hiljutine tegevus" võib olla link.

Kõik nupud on vaikimisi helehalli stiiliga, kuid .primarysaadaval on ka sinine klass. Lisaks on oma stiilide loomine lihtne.

Näidisnupud

Nupu stiile saab rakendusega kõigele .btnrakendada. Tavaliselt soovite neid rakendada ainult a, buttonja valitud inputelementidele. See näeb välja järgmiselt:

Alternatiivsed suurused

Kas soovite suuremaid või väiksemaid nuppe? Tehke seda!

Puudega olek

Nuppude puhul, mis ei ole aktiivsed või mille rakendus ühel või teisel põhjusel keelab, kasutage keelatud olekut. Seda .disabledlinkide ja elementide :disabledjaoks .button

Lingid

Nupud

Mis see on

Meie ülemine riba on fikseeritud riba, millel on veebisaidi logo või nimi, peamine navigeerimine ja otsinguvorm.

Kohandatav

Kõik sees olevad elemendid ja ka kogu ülemine riba on valikulised. Saate valida, kas lisada logo/nime, navi, otsingu ja teisese navi – või nende mis tahes kombinatsiooni.

Kaasas rippmenüüd

Põhinavigeerimise osana oleme lisanud võimaluse lisada oma navigeerimisseadmele rippmenüüd. Vaadake ülaltoodud teisest navigeerimisnuppu (paremale joondatud), et näha, kuidas see on tehtud.

Vahelehed ja pillid

Looge lihtne sekundaarne navigeerimine ul. Vahetage vahekaarte või tablette, lisades sobiva klassi.

Suurepärane sisu alamjaotiste jaoks, nagu meie konto seadete lehed ja kasutajate ajaskaala sarnase sisuga lehtede vahel liikumiseks. Saadaval sakkide või pillidega.

• Kodu
• Profiil
• Sõnumid
• Seaded
• Võtke ühendust

<ul class = "tabs" > 
  <li class = "aktiivne" ><a href = "" > Avaleht </a></li>  
  <li><a href = "" > Profiil </a></li> 
  <li><a href = "" > Sõnumid </a></li> 
  <li><a href = "" > Seaded </a></li> 
  <li><a href = "" > Võtke ühendust </a></li> 
</ul>

• Kodu
• Profiil
• Sõnumid
• Seaded
• Võtke ühendust

<ul klass = "pillid" > 
  <li class = "aktiivne" ><a href = "" > Avaleht </a></li>  
  <li><a href = "" > Profiil </a></li> 
  <li><a href = "" > Sõnumid </a></li> 
  <li><a href = "" > Seaded </a></li> 
  <li><a href = "" > Võtke ühendust </a></li> 
</ul>

Leheküljed

Rdiost inspireeritud ülilihtsustatud ja minimaalse stiiliga lehekülgede lehekülg. Suurt plokki on raske mööda vaadata, see on kergesti skaleeritav ja pakub suuri klõpsamisalasid.

<div class = "lehekülgede jagamine" > 
  <ul>
    <li class = "eelmine keelatud" ><a href = "" > ← Eelmine </a></li>  
    <li class = "aktiivne" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 ​​</a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "next" ><a href = "" > Järgmine → </a></li>  
  </ul>
</div>

Põhilised hoiatused

Üherealised sõnumid toimingu ebaõnnestumise, võimaliku ebaõnnestumise või õnnestumise esiletõstmiseks. Eriti kasulik vormide jaoks.

Blokeeri sõnumid

Pisut selgitust vajavate sõnumite jaoks on meil lõigu stiili hoiatused. Need sobivad suurepäraselt pikemate veateadete esilekutsumiseks, kasutaja hoiatamiseks ootel oleva toimingu eest või lihtsalt teabe esitamiseks, et lehel rohkem rõhku panna.

Modaalid

Modaalid – dialoogid või valguskastid – sobivad suurepäraselt kontekstuaalsete toimingute jaoks olukordades, kus on oluline säilitada taustakontekst.

Popovers

Kasutage hüpikaknaid, et anda lehele subtekstilist teavet ilma paigutust mõjutamata.

Bootstrap loodi Prebootiga , avatud lähtekoodiga segude ja muutujate paketiga, mida kasutatakse koos Lessiga , CSS-i eelprotsessoriga, mis võimaldab veebiarendust kiiremaks ja lihtsamaks muuta.

Vaadake, kuidas me Bootstrapis Prebooti kasutasime ja kuidas saate seda kasutada, kui otsustate järgmises projektis Less'i käivitada.

Kuidas seda kasutada

Kasutage seda suvandit, et kasutada täielikult ära Bootstrapi vähem muutujaid, segusid ja pesastamist CSS-is brauseris JavaScripti kaudu.

<link rel = "stylesheet/less" type = "text/css" href = "vähem/bootstrap.less" media = "kõik" />     
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Kas te ei tunne .js-lahendust? Proovige rakendust Less Mac või kasutage koodi juurutamisel kompileerimiseks Node.js -i.

Mis on kaasas

Siin on mõned Twitteri Bootstrapi osana Bootstrapis sisalduva esiletõstmised. Allalaadimiseks ja lisateabe saamiseks minge Bootstrapi veebisaidile või Githubi projekti lehele.

Värvi muutujad

Muutujad in Less sobivad suurepäraselt teie CSS-i peavaludeta hooldamiseks ja värskendamiseks. Kui soovite muuta värviväärtust või sageli kasutatavat väärtust, värskendage seda ühes kohas ja oletegi valmis.

// Lingid
@linkColor : #8b59c2;         
@linkColorHover :     tumedamaks ( @linkColor , 10 ); 
 
// Hallid
@must : #000;             
@grayDark :           heledamaks ( @must , 25 %); 
@hall :               heledamaks ( @must , 50 %); 
@grayLight :          heledamaks ( @must , 70 %); 
@grayLighter :        heledamaks ( @must , 90 %); 
@valge : #fff;             
 
// Aktsentvärvid
@sinine : #08b5fb;              
@roheline : #46a546;             
@punane : #9d261d;               
@kollane : #ffc40d;            
@oranž : #f89406 ;            
@roosa : #c3325f;              
@lilla : #7a43b6;            
 
// Lähtejoon
@baseline : 20px ;          

Kommenteerides

Less pakub lisaks CSS-i tavalisele /* ... */süntaksile ka teist kommenteerimisstiili.

// See on kommentaar
/* See on ka kommentaar */

Segab wazoo kokku

Mixinid on CSS-i jaoks põhiliselt sisaldavad või osalised, mis võimaldavad teil koodiploki üheks ühendada. Need sobivad suurepäraselt müüja eesliitega atribuutide jaoks, nagu box-shadow, brauseriülesed gradiendid, fondivirnad ja palju muud. Allpool on näide Bootstrapiga kaasas olevatest miksinidest.

Fondivirnad

#font {
  . stenogramm ( @weight : tavaline , @size : 14px , @lineHeight : 20px ) {     
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : normaalne , @size : 14px , @lineHeight : 20px ) {     
    fondiperekond : " Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @weight : normaalne , @size : 14px , @lineHeight : 20px ) {     
    font - perekond : "Georgia" , Times New Roman , Times , sans - serif ;     
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : tavaline , @size : 12px , @lineHeight : 20px ) {     
    font - perekond : "Monaco" , Courier New , monospace ;   
    fondi suurus : @size ; _ 
    font - kaal : @weight ; 
    line - height : @lineHeight ; 
  }
}

Gradiendid

#gradient {
  . horisontaalne ( @startColor : #555, @endColor: #333) { 
    taustavärv : @endColor ; _ _ 
    taust - kordamine : kordus - x ;
    taustpilt : - khtml - gradient ( lineaarne , vasak ülemine , _  parem ülemine , alates ( @startColor ), kuni ( @endColor )); // Konqueror  
    taust - pilt : - moz - lineaarne  - gradient ( vasakul , @startColor , @endColor ); // FF 3,6+   
    taust - pilt : - ms - lineaarne  - gradient ( vasakul , @startColor , @endColor ); // IE10   
    taust - pilt : - veebikomplekt - gradient ( lineaarne , vasak ülemine , parem ülemine , värv - stop ( 0 % ,   @startColor ), värv - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+  
    background - image : - webkit - linear - gradient ( vasakul , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    taust - pilt : - o - lineaarne -  gradient ( vasakul , @startColor , @endColor ); // Ooper 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ja IE7 
    taust - pilt : lineaarne - gradient ( vasak , @startColor , @endColor ); // Le standard   
  }
  . vertikaalne ( @startColor : #555, @endColor: #333) { 
    taustavärv : @endColor ; _ _ 
    taust - kordamine : kordus - x ;
    taustpilt : - khtml - gradient ( lineaarne , vasak ülemine , vasak alumine , alates (   @startColor ), kuni ( @endColor )); // Konqueror 
    taust - pilt : - moz - lineaarne - gradient  ( @startColor , @endColor ); // FF 3,6+  
    taust - pilt : - ms - lineaarne - gradient ( @startColor , @endColor ); // IE10   
    background - image : - webkit - gradient ( lineaarne , vasak ülemine , vasak alumine , värv - stop ( 0 % , @startColor ), värv - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+    
    taust - pilt : - veebikomplekt - lineaarne - gradient  ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+  
    taust - pilt : - o - lineaarne - gradient ( @startColor , @endColor ); // Ooper 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ja IE7 
    taust - pilt : lineaarne - gradient ( @startColor , @endColor ); // Standard  
  }
  .suunaline ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertikaalne - kolm värvi ( _ @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0,5, @endColor: #c3325f) { 
    ...
  }
}

Toimingud ja võrgusüsteem

Olge väljamõeldud ja tehke matemaatikat, et luua paindlikke ja võimsaid mikse, nagu allpool näidatud.

// Griditude
@gridColumns : 16        ;
@gridColumnWidth : 40 pikslit    ;
@gridGutterWidth : 20px ;   
 
// Võrgusüsteem
. konteiner {
  laius : @siteWidth  ;
  marginaal : 0 auto ;  
  . clearfix ();
}
. veerud ( @columnSpan : 1 )   {
  ekraan : inline ; 
  ujuk : vasak ;
  laius : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  veeris - vasak : @gridGutterWidth ; 
  &: esimene - laps {
    veeris - vasak : 0 ; 
  }
}
. nihe ( @columnOffset : 1 ) {  
  veeris - vasak : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! oluline           ;
}