Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ja eros.
Bootstrap on Twitterin työkalupakki, joka on suunniteltu käynnistämään verkkosovellusten ja -sivustojen kehitys.
Se sisältää perus-CSS:n ja HTML:n typografiaa, lomakkeita, painikkeita, taulukoita, ruudukoita, navigointia ja muuta varten.
Nörttivaroitus: Bootstrap on rakennettu vähemmällä, ja se on suunniteltu toimimaan ulos portista moderneja selaimia ajatellen.
Aloita nopein ja helpoin kopioimalla tämä katkelma verkkosivullesi.
Oletko vähemmän käyttänyt? Ei hätää, vain kloonaa repo ja lisää nämä rivit:
Lataa, haarukka, vedä, tee ongelmia ja paljon muuta Githubin virallisen Bootstrap-repon avulla.
Twitterin aikaisempina päivinä insinöörit käyttivät lähes mitä tahansa tuttua kirjastoa täyttääkseen käyttöliittymävaatimukset. Bootstrap sai alkunsa vastauksena haasteisiin ja kehitys kiihtyi nopeasti Twitterin ensimmäisen Hackweekin aikana.
Monien Twitterin insinöörien avulla ja palautteen avulla Bootstrap on kasvanut merkittävästi kattamaan perustyylien lisäksi tyylikkäämpiä ja kestävämpiä etupään suunnittelukuvioita.
Lue lisää osoitteessa dev.twitter.com ›
Bootstrap on testattu ja tuettu suurimmissa nykyaikaisissa selaimissa, kuten Chrome, Safari, Internet Explorer ja Firefox.
Bootstrap sisältää käännetyt CSS-, kääntämättömät ja esimerkkimallit.
Bootstrapin osana toimitettu oletusruudukkojärjestelmä on 940 pikseliä leveä 16 sarakkeen ruudukko. Se on suositun 960 ruudukkojärjestelmän maku, mutta ilman ylimääräistä marginaalia/pehmustetta vasemmalla ja oikealla puolella.
Kuten tässä näkyy, perusasettelu voidaan luoda kahdella "sarakkeella", joista kukin kattaa useita 16 perussaraketta, jotka määritimme osaksi ruudukkojärjestelmäämme. Katso alla olevista esimerkeistä lisää muunnelmia.
- <div class = "rivi" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
Oletus- ja yksinkertainen 940 pikseliä leveä, keskitetty asettelu melkein mille tahansa verkkosivustolle tai sivulle, jonka tarjoaa yhden <div.container>
.
- <body>
- <div class = "säilö" >
- ...
- </div>
- </body>
Vaihtoehtoinen joustava sivurakenne, jossa on minimi- ja maksimileveydet sekä vasen sivupalkki. Erinomainen sovelluksille ja asiakirjoille.
- <body>
- <div class = "container-fluid" >
- <div class = "sivupalkki" >
- ...
- </div>
- <div class = "sisältö" >
- ...
- </div>
- </div>
- </body>
Normaali typografinen hierarkia verkkosivujesi jäsentämiseen.
Koko typografinen ruudukko perustuu kahteen Less-muuttujaan preboot.less-tiedostossamme: @basefont
ja @baseline
. Ensimmäinen on kauttaaltaan käytetty perusfontin koko ja toinen on perusviivan korkeus.
Käytämme näitä muuttujia ja hieman matematiikkaa kaikkien tyyppiemme marginaalien, täytteiden ja rivinkorkeuksien luomiseen ja paljon muuta.
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.
Painopisteiden, osoitteiden ja lyhenteiden käyttäminen
<strong>
<em>
<address>
<abbr>
Korostustunnisteita ( <strong>
ja <em>
) tulee käyttää ilmaisemaan sanan tai lauseen ylimääräistä tärkeyttä tai painotusta ympäröivään kopioon verrattuna. Käytä <strong>
tärkeyden ja <em>
stressin korostamiseen .
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.
Huomaa: HTML5:ssä voi silti käyttää -tunnisteita, <b>
eikä <i>
niiden tarvitse olla lihavoituja ja kursivoituja (jos on kuitenkin semanttisempi elementti, käytä sitä). <b>
on tarkoitettu korostamaan sanoja tai lauseita antamatta lisätärkeyttä, kun taas <i>
se on enimmäkseen puhetta, teknisiä termejä jne.
Elementtiä <address>
käytetään lähimmän esi-isänsä tai koko työn yhteystiedoissa. Tältä se näyttää:
Huomautus: Jokaisen rivin <address>
täytyy päättyä rivinvaihtoon ( <br />
) tai kääriä lohkotason tunnisteeseen (esim. <p>
), jotta sisältö rakentuu oikein.
Käytä lyhenteitä ja lyhenteitä varten <abbr>
tagia ( <acronym>
on vanhentunut HTML5 :ssä ). Laita lyhenne lomake tunnisteen sisään ja aseta otsikko koko nimelle.
<blockquote>
<p>
<small>
Jos haluat sisällyttää lohkolainauksen, kääri <blockquote>
ympärille <p>
ja <small>
merkitse tunnisteet. Käytä <small>
elementtiä lähteen mainitsemiseen, niin saat em-viivan —
ennen sitä.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Kokonaisluku posuere erat a ante venenatis dapibus posuere velit aliquet.
Tohtori Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Pöydät ovat mahtavia - moniin asioihin. Hienot taulukot tarvitsevat kuitenkin hieman merkintöjä ollakseen hyödyllisiä, skaalautuvia ja luettavia (kooditasolla). Tässä on muutamia vinkkejä avuksi.
Kääri aina sarakeotsikot siten <thead>
, että hierarkia on <thead>
> <tr>
> <th>
.
Kuten sarakeotsikoissa, kaikki taulukon leipäsisältö tulee kääriä a-merkkiin, <tbody>
jotta hierarkiasi on <tbody>
> <tr>
> <td>
.
Kaikki taulukot muotoillaan automaattisesti vain välttämättömillä reunuksilla luettavuuden ja rakenteen säilyttämiseksi. Ei tarvitse lisätä ylimääräisiä luokkia tai attribuutteja.
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Jonkin verran | Yksi | Englanti |
2 | Joe | Sixpäkki | Englanti |
3 | Stu | Dent | Koodi |
- <taulukko>
- ...
- </table>
Nauti pöydistäsi lisäämällä seepraraitoja – lisää vain .zebra-striped
luokka.
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Jonkin verran | Yksi | Englanti |
2 | Joe | Sixpäkki | Englanti |
3 | Stu | Dent | Koodi |
Huomautus: Zebra-striping on progressiivinen parannus, joka ei ole saatavilla vanhemmille selaimille, kuten IE8 tai vanhemmille.
- <taulukkoluokka = "seepraraidallinen " >
- ...
- </table>
Edellisessä esimerkissä parannamme taulukoidemme hyödyllisyyttä tarjoamalla lajittelutoimintoja jQueryn ja Tablesorter- laajennuksen kautta. Muuta lajittelua napsauttamalla minkä tahansa sarakkeen otsikkoa.
# | Etunimi | Sukunimi | Kieli |
---|---|---|---|
1 | Sinun | Yksi | Englanti |
2 | Joe | Sixpäkki | Englanti |
3 | Stu | Dent | Koodi |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funktio () {
- $ ( "taulukko#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <taulukkoluokka = "seepraraidallinen " >
- ...
- </table>
Kaikille lomakkeille annetaan oletustyylit, jotta ne voidaan esittää luettavalla ja skaalautuvalla tavalla. Tyylit tarjotaan tekstinsyöttöä, valintaluetteloita, tekstialueita, valintanappeja ja valintaruutuja ja painikkeita varten.
Lisää .form-stacked
lomakkeesi HTML-koodiin, niin sinulla on tunnisteet niiden kenttien päällä eikä niiden vasemmalla puolella. Tämä toimii hyvin, jos lomakkeesi ovat lyhyitä tai sinulla on kaksi saraketta raskaampia lomakkeita varten.
Perinteisesti painikkeita käytetään toimiin, kun taas linkkejä käytetään objekteihin. Esimerkiksi "Lataa" voi olla painike ja "äskettäinen toiminta" voi olla linkki.
Kaikki painikkeet ovat oletuksena vaaleanharmaita, mutta eri värityyleille voidaan soveltaa useita toimintaluokkia. Näihin luokkiin kuuluvat sininen .primary
luokka, vaaleansininen .info
luokka, vihreä .success
luokka ja punainen .danger
luokka. Lisäksi omien tyylien rullaaminen on helppoa.
Painiketyylejä voidaan soveltaa mihin tahansa .btn
sovelluksella. Yleensä haluat käyttää näitä vain <a>
, <button>
, ja valittuihin <input>
elementteihin. Tältä se näyttää:
Haluatko suurempia vai pienempiä painikkeita? Ole siinä!
Käytä painikkeita, jotka eivät ole aktiivisia tai jotka sovellus on jostain syystä poistanut käytöstä, käytöstä poistettua tilaa. Se on .disabled
linkkejä ja :disabled
varten<button>
.
div.alert-message
Yksiriviset viestit, jotka osoittavat toiminnon epäonnistumisen, mahdollisen epäonnistumisen tai onnistumisen. Erityisen hyödyllinen lomakkeille.
div.alert-message.block-message
Viesteille, jotka vaativat hieman selitystä, meillä on kappaletyylivaroitukset. Nämä ovat täydellisiä pidempien virheilmoitusten ilmaamiseen, käyttäjän varoittamiseen odottavasta toiminnasta tai vain tietojen esittämiseen sivun korostamiseksi.
Modaalit – valintaikkunat tai valolaatikot – sopivat erinomaisesti kontekstuaalisiin toimiin tilanteissa, joissa on tärkeää säilyttää taustakonteksti.
Yksi hieno kroppa…
Twipsit ovat erittäin hyödyllisiä hämmentyneen käyttäjän auttamiseksi ja oikeaan suuntaan.
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 doloremque unde sunt sed voluptatem quauttitamm volquauttatasm quauttamas quautta
Käytä ponnahdusikkunoita sivun tekstisisällön tarjoamiseen vaikuttamatta asetteluun.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ja eros.
Bootstrap rakennettiin Prebootilla , avoimen lähdekoodin sekoittimien ja muuttujien paketilla, jota käytetään yhdessä Lessin kanssa , CSS-esiprosessori nopeuttaa ja helpottaa verkkokehitystä.
Katso, kuinka käytimme Prebootia Bootstrapissa ja kuinka voit hyödyntää sitä, jos päätät käyttää Less-ohjelmaa seuraavassa projektissasi.
Käytä tätä vaihtoehtoa hyödyntääksesi täysin Bootstrapin Less-muuttujia, sekoituksia ja sisäkkäisyyttä CSS:ssä selaimesi JavaScriptin kautta.
- <link rel = "tyylitaulukko/vähemmän" href = "vähemmän/bootstrap.less" media = "kaikki" />
- <script src = "js/less-1.1.3.min.js" ></script>
Etkö tunne .js-ratkaisua? Kokeile Less Mac -sovellusta tai käytä Node.js :ää :ää kääntämiseen, kun otat koodin käyttöön.
Tässä on joitain kohokohtia siitä, mitä Twitter Bootstrap sisältää osana Bootstrapia. Siirry Bootstrap-verkkosivustolle tai Github-projektisivulle ladataksesi ja saadaksesi lisätietoja.
Muuttujat in Less ovat täydellisiä ylläpitämään ja päivittämään CSS-päänsärkyäsi. Kun haluat muuttaa väriarvoa tai usein käytettyä arvoa, päivitä se yhdessä paikassa ja olet valmis.
- // Linkkejä
- @linkColor : #8b59c2;
- @linkColorHover : tummenna ( @linkColor , 10 );
- // Harmaat
- @musta : #000;
- @harmaaDark : vaalentaa ( @musta , 25 %);
- @harmaa : vaalentaa ( @musta , 50 %);
- @greyLight : vaalentaa ( @musta , 70 %);
- @greyLighter : vaalentaa ( @musta , 90 %);
- @valkoinen : #fff;
- // Korostusvärit
- @sininen : #08b5fb;
- @vihreä : #46a546 ;
- @punainen : #9d261d;
- @keltainen : #ffc40d;
- @oranssi : #f89406;
- @vaaleanpunainen : #c3325f;
- @violetti : #7a43b6;
- // Perustason ruudukko
- @basefont : 13px ;
- @perusviiva : 18px ;
Less tarjoaa myös toisen kommentointityylin CSS:n normaalin /* ... */
syntaksin lisäksi.
- // Tämä on kommentti
- /* Tämä on myös kommentti */
Mixiinit ovat pohjimmiltaan CSS:n sisältämiä tai osittaisia, joten voit yhdistää koodilohkon yhdeksi. Ne sopivat erinomaisesti toimittajan etuliitteillä varustettuihin ominaisuuksiin, kutenbox-shadow
varustettuihin ominaisuuksiin, kuten , selaimen välisiin liukuväreihin, kirjasinpinoihin ja muihin. Alla on esimerkki Bootstrapin mukana tulevista mixineistä.
- #font {
- . pikakirjoitus ( @paino : normaali , @koko : 14px , @linjankorkeus : 20px ) {
- font - size : @size ;
- font - weight : @weight ;
- rivi - korkeus : @lineHeight ;
- }
- . sans - serif ( @weight : normaali , @size : 14px , @lineHeight : 20px ) {
- kirjasinperhe : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- rivi - korkeus : @lineHeight ;
- }
- . serif ( @weight : normaali , @size : 14px , @lineHeight : 20px ) {
- kirjasinperhe : " Georgia " , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- rivi - korkeus : @lineHeight ;
- }
- . monospace ( @weight : normaali , @size : 12px , @lineHeight : 20px ) {
- kirjasinperhe : " Monaco " , Courier New , monospace ;
- font - size : @size ;
- font - weight : @weight ;
- rivi - korkeus : @lineHeight ;
- }
- }
- #gradient {
- . vaakasuora ( @startColor : #555, @endColor: #333) {
- taustaväri : @endColor ; _ _
- tausta - toisto : toista - x ;
- background - image : - khtml - gradient ( lineaarinen , vasen ylhäällä , oikea ylhäällä , alkaen ( @startColor ), to ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( vasen , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( vasen , @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( lineaarinen , vasen yläosa , oikea yläosa , väri - stop ( 0 % , @startColor ), väri - stop ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( vasen , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( vasen , @startColor , @endColor ); // Ooppera 11.10
- background - image : linear - gradient ( vasen , @startColor , @endColor ); // Le standardi
- }
- . pystysuora ( @startColor : #555, @endColor: #333) {
- taustaväri : @endColor ; _ _
- tausta - toisto : toista - x ;
- background - image : - khtml - gradientti ( lineaarinen , vasen ylhäällä , vasen alaosa , alkaen ( @startColor ), to ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( lineaarinen , vasen ylhäällä , vasen alaosa , väri - stop ( 0 % , @startColor ), väri - 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 ); // Ooppera 11.10
- background - image : linear - gradient ( @startColor , @endColor ); // Standardi
- }
- . suuntaava ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . pystysuora - kolme - väriä ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Ihastu ja suorita matematiikkaa luodaksesi joustavia ja tehokkaita sekoituksia, kuten alla.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Verkkojärjestelmä
- . kontti {
- leveys : @siteWidth ;
- marginaali : 0 auto ;
- . clearfix ();
- }
- . sarakkeet ( @columnSpan : 1 ) {
- leveys : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- marginaali - vasen : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }