Dekoj da reuzeblaj komponantoj estas enkonstruitaj en Bootstrap por provizi navigacion, atentigojn, popovers kaj multe pli.
Ultra simplisma kaj minimume stilita paĝigo inspirita de Rdio, bonega por programoj kaj serĉrezultoj. La granda bloko estas malfacile maltrafi, facile skalebla kaj provizas grandajn klakajn areojn.
Ligiloj estas agordeblaj kaj funkcias en kelkaj cirkonstancoj kun la ĝusta klaso. .disabled
por neklakeblaj ligiloj kaj .active
por aktuala paĝo.
Aldonu iun el du laŭvolaj klasoj por ŝanĝi la vicigon de paĝigaj ligiloj: .pagination-centered
kaj .pagination-right
.
La defaŭlta paĝiga komponanto estas fleksebla kaj funkcias en kelkaj varioj.
Envolvita en <div>
, paĝigo estas nur <ul>
.
- <div class = "paĝigo" >
- <ul>
- <li><a href = "#" > Antaŭa </a></li>
- <li class = "aktiva" >
- <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 = "#" > Poste </a></li>
- </ul>
- </div>
La paĝiga komponanto estas aro de ligiloj por simplaj paĝigaj efektivigoj kun malpeza markado kaj eĉ pli malpezaj stiloj. Ĝi estas bonega por simplaj retejoj kiel blogoj aŭ revuoj.
Defaŭlte, la paginador centras ligilojn.
- <ul class = "pagilo" >
- <li>
- <a href = "#" > Antaŭa </a>
- </li>
- <li>
- <a href = "#" > Sekva </a>
- </li>
- </ul>
Alternative, vi povas vicigi ĉiun ligon al la flankoj:
- <ul class = "pagilo" >
- <li class = "antaŭa" >
- <a href = "#" > ← Pli malnova </a>
- </li>
- <li klaso = "sekva" >
- <a href = "#" > Pli nova → </a>
- </li>
- </ul>
Etikedoj | Markado |
---|---|
Defaŭlte | <span class="label">Default</span> |
Sukceso | <span class="label label-success">Success</span> |
Averto | <span class="label label-warning">Warning</span> |
Grava | <span class="label label-important">Important</span> |
Info | <span class="label label-info">Info</span> |
Bootstrap provizas malpezan, flekseblan komponanton nomatan heroa unuo por montri enhavon en via retejo. Ĝi funkcias bone en merkatado kaj enhavo-pezaj retejoj.
Envolvu vian enhavon div
tiel:
- <div class = "hero-unuo" >
- <h1> Titolo </h1>
- <p> Skomo </p>
- <p>
- <a klaso = "btn btn-primara btn-granda" >
- Lernu pli
- </a>
- </p>
- </div>
Ĉi tio estas simpla herounuo, simpla jumbotron-stila komponento por nomi ekstran atenton al elstara enhavo aŭ informoj.
Simpla ŝelo por h1
taŭge disvastigi kaj segmenti sekciojn de enhavo sur paĝo. Ĝi povas uzi la h1
defaŭltan small
, elementon ankaŭ la plej multajn aliajn komponantojn (kun pliaj stiloj).
- <div class = "paĝo-haeder" >
- <h1> Ekzempla paĝokapo </h1>
- </div>
Defaŭlte, la bildetoj de Bootstrap estas dizajnitaj por montri ligitajn bildojn kun minimuma postulata markado.
Kun iom da ekstra markado, eblas aldoni ajnan specon de HTML-enhavo kiel titoloj, alineoj aŭ butonoj en bildetojn.
Bildetoj (antaŭe .media-grid
ĝis v1.4) estas bonegaj por kradoj de fotoj aŭ filmetoj, bildaj serĉrezultoj, podetalaj produktoj, biletujoj kaj multe pli. Ili povas esti ligiloj aŭ statika enhavo.
Bildeto-markado estas simpla—a ul
kun ajna nombro da li
elementoj estas ĉio, kio necesas. Ĝi ankaŭ estas tre fleksebla, ebligante ajnan tipon de enhavo kun nur iom pli da markado por envolvi vian enhavon.
Finfine, la komponanto de bildetoj uzas ekzistantajn krad-sistemklasojn—kiel .span2
aŭ .span3
—por kontrolo de bildetoj-dimensioj.
Kiel menciite antaŭe, la bezonata markado por bildetoj estas malpeza kaj simpla. Jen rigardo al la defaŭlta agordo por ligitaj bildoj :
- <ul class = "bildetoj" >
- <li class = "span3" >
- <a href = "#" class = "bildeto" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
Por kutima HTML-enhavo en bildetoj, la markado iomete ŝanĝiĝas. Por permesi bloknivelan enhavon ie ajn, ni interŝanĝas la <a>
por <div>
tia:
- <ul class = "bildetoj" >
- <li class = "span3" >
- <div class = "bildeto" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> Bildeto-etikedo </h5>
- <p> Bildetoteksto ĝuste ĉi tie... </p>
- </div>
- </li>
- ...
- </ul>
Kun Bootstrap 2, ni simpligis la bazan klason: .alert
anstataŭ .alert-message
. Ni ankaŭ reduktis la minimuman bezonatan markadon—ne <p>
necesas defaŭlte, nur la ekstera <div>
.
Por pli daŭrema komponanto kun malpli da kodo, ni forigis la diferencigan aspekton de blokatentigoj, mesaĝojn kiuj venas kun pli da kompletigo kaj tipe pli da teksto. La klaso ankaŭ ŝanĝiĝis al .alert-block
.
Bootstrap venas kun bonega jQuery-kromaĵo, kiu subtenas atentajn mesaĝojn, igante ilin forĵeti rapidan kaj facilan.
Envolvu vian mesaĝon kaj laŭvolan fermikonon en div kun simpla klaso.
- <div class = "atentigo" >
- <a class = "close" data-dismiss = "alerto" > × </a>
- <strong> Averto! </strong> Plej bone kontrolu vin mem, vi ne aspektas tro bona.
- </div>
Facile etendi la norman atentigmesaĝon kun du laŭvolaj klasoj: .alert-block
por pli da kompletigo kaj tekstaj kontroloj kaj .alert-heading
por kongrua titolo.
Plej bone kontrolu vin mem, vi ne aspektas tro bona. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = "alerto-atentigo-bloko" >
- <a class = "close" data-dismiss = "alerto" > × </a>
- <h4 class = "alert-heading" > Averto! </h4>
- Plej bone kontrolu vin mem, vi ne estas...
- </div>
- <div class = "alerto-eraro" >
- ...
- </div>
- <div class = "alerto-atentigo-sukceso" >
- ...
- </div>
- <div class = "alerto-alerto-informoj" >
- ...
- </div>
Defaŭlta progresbreto kun vertikala gradiento.
- <div class = "progreso" >
- <div class = "stango"
- stilo = " larĝo : 60 %; " ></div>
- </div>
Uzas gradienton por krei strian efikon.
- <div class = "progreso progreso-informo
- progres-striita" >
- <div class = "stango"
- stilo = " larĝo : 20 %; " ></div>
- </div>
Prenas la striitan ekzemplon kaj animas ĝin.
- <div class = "progreso progreso-danĝero
- progres-striita aktiva" >
- <div class = "stango"
- stilo = " larĝo : 40 %; " ></div>
- </div>
Progresdrinkejoj utiligas kelkajn el la samaj klasnomoj kiel butonoj kaj atentigoj por simila stilo.
.progress-info
.progress-success
.progress-danger
Alternative, vi povas personecigi la MALPLAS dosierojn kaj ruli viajn proprajn kolorojn kaj grandecojn.
Progresaj stangoj uzas CSS3-transirojn, do se vi dinamike ĝustigas la larĝon per Javaskripto, ĝi glate regrandigos.
Se vi uzas la .active
klason, viaj .progress-striped
progreso-stangoj vigligos la striojn de maldekstre al dekstre.
Progresstangoj uzas CSS3-gradientojn, transirojn kaj kuraĝigojn por atingi ĉiujn siajn efikojn. Ĉi tiuj funkcioj ne estas subtenataj en IE7-8 aŭ pli malnovaj versioj de Firefox.
Opera ne subtenas animaciojn nuntempe.
Uzu la puton kiel simplan efikon al elemento por doni al ĝi enmetitan efikon.
- <div class = "nu" >
- ...
- </div>
Uzu la ĝeneralan fermikonon por forĵeti enhavon kiel modalojn kaj atentigojn.
- <a class = "fermi" > × </a>