Bootstrapiin on sisäänrakennettu kymmeniä uudelleenkäytettäviä komponentteja, jotka tarjoavat navigointia, hälytyksiä, ponnahdusikkunoita ja paljon muuta.
Erittäin yksinkertainen ja minimalistinen sivutus Rdion inspiroimana, sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.
Linkit ovat muokattavissa ja toimivat useissa olosuhteissa oikean luokan kanssa. .disabled
napsauttamattomille linkeille ja .active
nykyiselle sivulle.
Lisää jompikumpi kahdesta valinnaisesta luokasta muuttaaksesi sivutuslinkkien kohdistusta: .pagination-centered
ja .pagination-right
.
Oletussivutuskomponentti on joustava ja toimii useissa muunnelmissa.
Käärittynä <div>
sivunumerointi on vain <ul>
.
- <div class = "sivutus" >
- <ul>
- <li><a href = "#" > Edellinen </a></li>
- <li class = "aktiivinen" >
- <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 = "#" > Seuraava </a></li>
- </ul>
- </div>
Hakukomponentti on joukko linkkejä yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja vieläkin kevyemmillä tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.
Oletusarvoisesti hakulaite keskittää linkit.
- <ul class = "hakulaite" >
- <li>
- <a href = "#" > Edellinen </a>
- </li>
- <li>
- <a href = "#" > Seuraava </a>
- </li>
- </ul>
Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:
- <ul class = "hakulaite" >
- <li class = "edellinen" >
- <a href = "#" > ← Vanhempi </a>
- </li>
- <li class = "seuraava" >
- <a href = "#" > Uudempi → </a>
- </li>
- </ul>
Tarrat | Merkintä |
---|---|
Oletus | <span class="label">Default</span> |
Uusi | <span class="label label-success">New</span> |
Varoitus | <span class="label label-warning">Warning</span> |
Tärkeä | <span class="label label-important">Important</span> |
Tiedot | <span class="label label-info">Info</span> |
Oletuksena Bootstrapin pikkukuvat on suunniteltu esittelemään linkitettyjä kuvia minimaalisella vaaditulla merkinnällä.
Pienellä ylimääräisellä merkinnällä on mahdollista lisätä pikkukuviin kaikenlaista HTML-sisältöä, kuten otsikoita, kappaleita tai painikkeita.
Pikkukuvat (aiemmin .media-grid
versioon 1.4 asti) sopivat erinomaisesti valokuvien tai videoiden ruudukoille, kuvahakutuloksille, vähittäismyyntituotteille, portfolioille ja monelle muulle. Ne voivat olla linkkejä tai staattista sisältöä.
Pikkukuvien merkintä on yksinkertaista – ul
kaikki tarvittava määrä li
elementtejä on a. Se on myös erittäin joustava, ja se mahdollistaa kaiken tyyppisen sisällön ja vain hieman enemmän merkintöjä sisällön käärimiseen.
Lopuksi pikkukuvakomponentti käyttää olemassa olevia ruudukon järjestelmäluokkia, kuten .span2
tai .span3
- pikkukuvien mittojen ohjaamiseen.
Kuten aiemmin mainittiin, pikkukuvien vaadittava merkintä on kevyt ja yksinkertainen. Tässä on katsaus linkitettyjen kuvien oletusasetuksiin :
- <ul class = "pikkukuvat" >
- <li class = "span3" >
- <a href = "#" class = "pikkukuva" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Pikkukuvien mukautetun HTML-sisällön merkintä muuttuu hieman. Jotta estotason sisältö voidaan sallia missä tahansa, vaihdamme <a>
sen <div>
vastaavaan:
- <ul class = "pikkukuvat" >
- <li class = "span3" >
- <div class = "pikkukuva" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Pikkukuvan tunniste </h5>
- <p> Pikkukuvan kuvateksti tässä... </p>
- </div>
- </li>
- ...
- </ul>
Bootstrap 2:lla olemme yksinkertaistaneet perusluokkaa .alert
: .alert-message
. Olemme myös vähentäneet vaadittua vähimmäismerkintää – <p>
oletuksena ei vaadita, vain ulompi <div>
.
Kestävämmän ja vähemmän koodia sisältävän komponentin saamiseksi olemme poistaneet erottuvan ulkoasun estohälytyksiltä, viesteiltä, joissa on enemmän täyttöä ja yleensä enemmän tekstiä. Myös luokka on vaihtunut muotoon .alert-block
.
Bootstrapissa on upea jQuery-laajennus, joka tukee hälytysviestejä, mikä tekee niiden hylkäämisestä nopeaa ja helppoa.
Kääri viestisi ja valinnainen sulkemiskuvake diviksi yksinkertaisella luokalla.
- <div class = "hälytys" >
- <a class = "sulje" > × </a>
- <strong> Varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä.
- </div>
Laajenna vakiovaroitusviestiä helposti kahdella valinnaisella luokalla: .alert-block
lisää täyte- ja tekstiohjausobjekteja sekä .alert-heading
vastaava otsikko.
Parasta tarkistaa itsesi, et näytä liian hyvältä. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alert alert-block" >
- <a class = "sulje" > × </a>
- <h4 class = "alert-heading" > Varoitus! </h4>
- Parasta tarkistaa itsesi, et ole...
- </div>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Oletus etenemispalkki, jossa on pystysuora kaltevuus.
- <div class = "edistyminen" >
- <div class = "baari"
- style = " leveys : 60 %; " ></div>
- </div>
Käyttää gradienttia luodakseen raidallisen tehosteen.
- <div class = "edistymisen edistymistiedot
- etenemisraidallinen" >
- <div class = "baari"
- style = " leveys : 20 %; " ></div>
- </div>
Ottaa raidallisen esimerkin ja animoi sen.
- <div luokka = "edistyminen - vaara
- edistymisraita aktiivinen" >
- <div class = "baari"
- style = " leveys : 40 %; " ></div>
- </div>
Edistymispalkit käyttävät joitakin samoja luokkanimiä painikkeina ja varoituksia samanlaisesta tyylistä.
.progress-info
.progress-success
.progress-danger
Vaihtoehtoisesti voit mukauttaa VÄHEMMÄN tiedostoja ja rullata omia värejäsi ja kokosi.
Etenemispalkit käyttävät CSS3-siirtymiä, joten jos säädät leveyttä dynaamisesti javascriptin avulla, sen koko muuttuu sujuvasti.
Jos käytät .active
luokkaa, .progress-striped
edistymispalkit animoivat raidat vasemmalta oikealle.
Edistymispalkit käyttävät CSS3-gradientteja, siirtymiä ja animaatioita saavuttaakseen kaikki tehonsa. Näitä ominaisuuksia ei tueta Firefoxin IE7-8:ssa tai vanhemmissa versioissa.
Opera ei tue animaatioita tällä hetkellä.
Käytä kaivoa yksinkertaisena tehosteena elementissä antaaksesi sille upotetun vaikutelman.
- <div class = "hyvin" >
- ...
- </div>
Käytä yleistä sulkemiskuvaketta sulkeaksesi sisällön, kuten modaalit ja hälytykset.
- <a class = "sulje" > × </a>