Etiam porta sem malesuada nga agtagibalay nga euismod. Maecenas nga faucibus nga mollis nga interdum. Morbi leo risus, porta ac consectetur ac, vestibulum iti eros.
Ti Bootstrap ket maysa a toolkit manipud iti Twitter a nadisenio a mangkickstart iti panagdur-as dagiti webapps ken sites.
Daytoy ket mangiraman ti batayan a CSS ken HTML para iti tipograpia, porma, buton, lamisaan, grid, nabigasion, ken dadduma pay.
Nerd alert: Ti Bootstrap ket naaramid babaen ti Less ken nadisenio nga agtrabaho iti ruar ti ruangan nga addaan laeng kadagiti moderno a browser iti panunot.
Para iti kapartakan ken kalalakaan a panangrugi, kopiaem laeng daytoy a snippet iti webpage-mo.
Maysa a fan ti panagusar iti Less? Awan ti problema, basta i-clone ti repo ken inayon dagitoy a linia:
I-download, tinidor, guyoden, dagiti isyu ti file, ken dadduma pay babaen ti opisial a Bootstrap repo iti Github.
Ti kasisigud a sistema ti grid a naited a kas paset ti Bootstrap ket ti 940px a kalawa a 16-kolum a grid. Daytat’ raman ti nalatak a 960 grid system, ngem awan ti kanayonan a margin/padding iti kannigid ken kannawan a sikigan.
Kas naipakita ditoy, ti batayan a layout ket mabalin a maparsua babaen ti dua a "kolum," tunggal maysa ket mangsaklaw ti bilang dagiti 16 a pundasional nga adigi nga inkeddengmi a kas paset ti sistema ti gridmi. Kitaen dagiti pagarigan iti baba para kadagiti ad-adu pay a panagduduma.
- <div klase="hilera"> klase = "hilera" >
- <div klase = "span6 nga adigi" >
- ...
- </div>
- < klase ti div = "span10 nga adigi" >
- ...
- </div>
- </div>
Ti batayan a 940px ti kalawana, naisentro a layout ti pagkargaan para iti dandani laeng ania man a site wenno panid.
- <bagi> nga
- <div klase = "laon" >
- ...
- </div>
- </bagi>
Ti nalaka a maibagay a pluido wenno likido nga estruktura ti panid nga addaan kadagiti min- ken max-a kalawa ken ti kannigid a sidebar. Nasayaat para kadagiti apps.
- <bagi> nga
- <div klase = "paglaon-a-pluido" >
- <div klase = "bara ti sikigan" >
- ...
- </div>
- <div klase = "linaon" >
- ...
- </div>
- </div>
- </bagi>
Ti maysa a pagalagadan a tipograpiko a hirarkia para iti panangistruktura kadagiti panidmo iti web.
Nullam quis risus eget urna mollis nga arkos nga vel eu leo. Cum sociis natoque penatibus ken magnis ti panagpasngay a montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies lugan ut id elit.
Mabalinmo met ti mangnayon kadagiti subheading nga addaan iti <strong>
ken<em>
Panangusar iti panangipaganetget, adres, & abbreviation
<strong>
<em>
<address>
<abbr>
Rumbeng nga usaren dagiti emphasis tag ( <strong>
ken <em>
) tapno mainayon ti makita a pannakaiduma ti maysa a sao wenno ragup ti sasao ken ti aglawlawna a kopia. Usaren <strong>
para iti plain old attention ken <em>
para iti slick attention ken titulo.
Fusce dapibus , tellus ac cursus commodo , tortor mauris kondimento nibh , ut fermentum masa justo agtugaw amet risus. Maecenas nga faucibus nga mollis nga interdum. Nulla vitae elit libero, maysa a pharetra nga augue.
Ti address
elemento ket mausar para kadagiti—napagtengmo!—dagiti adres. Kastoy ti langana:
Pakaammo: Tunggal linia iti maysa a address
masapul nga agpatingga iti line-break ( <br />
) tapno umiso ti pannakaistrukturana ti linaon bayat a mabasa iti pudno a biag nga awan ti aniaman nga estilo a mayaplikar.
Para kadagiti abbreviation ken acronym, usaren ti abbr
tag ( acronym
ket saanen a maus-usar iti HTML5 ). Ikabil ti porma ti shorthand iti uneg ti tag ken mangikeddeng iti paulo para iti kompleto a nagan.
<blockquote>
<p>
<cite>
Siguraduenyo a baluten ti blockquote
aglawlaw paragraph
ken cite
tag-yo. No mangdakamat iti gubuayan, usaren ti cite
elemento. Ti CSS ket automatiko a mangirugi ti nagan babaen ti em dash (—).
Lorem ipsum dolor agtugaw amet, consectetur adipisicing elit, sed aramiden eiusmod tempor nga incididunt ut panagtrabaho ken dolore magna aliqua...
Ni Julius Hibbert ni Dr
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Nasayaat dagiti lamisaan—para iti adu a banag. Dagiti naindaklan a lamisaan, nupay kasta, kasapulanda ti sangkabassit a panagayat ti panagmarka tapno makatulong, maipadakkel, ken mabasa (iti lebel ti kodigo). Adtoy ti sumagmamano a tips a makatulong.
Kanayon a baluten dagiti ulo ti kolummo iti thead
kastoy a ti hirarkia ket thead
> tr
> th
.
Kasla dagiti ulo ti kolum, amin a linaon ti bagi ti lamisaanmo ket rumbeng a nabalkot iti maysa tbody
isu a ti hirarkiam ket tbody
> tr
> td
.
Amin a lamisaan ket automatiko nga estilo nga addaan laeng kadagiti nasken a beddeng tapno masigurado ti pannakabasa ken mataginayon ti estruktura. Saan a kasapulan ti mangnayon kadagiti ekstra a klase wenno attribute.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Sumagmamano | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
- <table class="gagangay-a-lamisaan"> klase = "gagangay-a-lamisaan" >
- ...
- </table>
Agbalinka a magarbo bassit kadagiti lamisaanmo babaen ti pananginayon iti zebra-striping—inayonmo laeng ti .zebra-striped
klase.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Sumagmamano | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
- <table class="gagangay-a-lamisaan a zebra-striped"> class = "gagangay-a-lamisaan nga zebra-striped" >
- ...
- </table>
Iti panangala ti napalabas a pagarigan, pasayaatenmi ti pakausaran dagiti lamisaanmi babaen ti panangipaay ti panagusar ti panagurnos babaen ti jQuery ken ti plugin ti Tablesorter . I-click ti header ti ania man a kolum tapno baliwan ti panagurnos.
# | Nagan | Apelyido | Lengguahe |
---|---|---|---|
1 nga | Bukod mo | Maysa | Ingles |
2. 2 | Joe nga | Sixpack nga | Ingles |
3. | Stu nga | Dent nga | Kodigo nga |
- <tipo ti iskrip="teksto/javascript" src="js/jsaludsod/jkuestion.tablesorter.min.js"></script> type = "teksto/javascript" src = "js/jsaludsod/jsaludsod.tablesorter.min.js" ></script>
- < tipo ti iskrip = "teksto/javascript" >
- $ ( dokumento ). nakasagana ( function () { .
- $ ( "table#sortPagarigan ti Lamisaan" ). tablesorter ( { Listaan ti listaan : [[ 1 , 0 ]]} );
- });
- </script>
- < klase ti lamisaan = "gagangay-a-lamisaan a zebra-striped" >
- ...
- </table>
Amin a porma ket naikkan kadagiti default nga estilo tapno maipresenta dagitoy iti mabasa ken maipadakkel a wagas. Dagiti estilo ket naited para kadagiti panagserrek ti teksto, dagiti listaan ti panagpili, dagiti lugar ti teksto, dagiti buton ti radio ken dagiti kahon ti tsek, ken dagiti buton.
Inayonmo .form-stacked
iti HTML ti pormam ket maaddaanka kadagiti etiketa iti rabaw dagiti tay-akda imbes nga iti kannigidda. Daytoy ket agtrabaho a nasayaat no dagiti pormam ket ababa wenno addaanka iti dua a kolum dagiti input para kadagiti nadagdagsen a porma.
Kas maysa a konbension, dagiti buton ket maus-usar para kadagiti tignay bayat a dagiti silpo ket maus-usar para kadagiti banag. Kas pagarigan, ti "I-download" ket mabalin a maysa a buton ken ti "nabiit pay nga aktibidad" ket mabalin a maysa a silpo.
Amin a buton ket agdefault iti nalawag nga abuabu nga estilo, ngem ti asul a .primary
klase ket magun-od. Plus, nalaka a peasy ti panangi-roll kadagiti bukodmo nga estilo.
Mabalin nga iyaplikar dagiti estilo ti buton iti aniaman nga addaan iti .btn
naipakat. Gagangay a kayatmo nga iyaplikar dagitoy kadagiti laeng a
, , ken dagiti elemento a button
mangpili . input
Kastoy ti langana:
Magarbo a dakdakkel wenno babbabassit a butones? Adda koma iti dayta!
Para kadagiti buton a saan nga aktibo wenno baldado ti app gapu iti maysa wenno sabali a rason, usarem ti disabled state. Dayta ket .disabled
para kadagiti silpo ken :disabled
para kadagiti button
elemento.
Dagiti maysa a linia a mensahe para iti panangitampok iti pannakapaay, posible a pannakapaay, wenno balligi ti maysa nga aramid. Nangnangruna a makatulong kadagiti porma.
Para kadagiti mensahe a kasapulan ti sangkabassit a panangilawlawag, addaantayo kadagiti alerto ti estilo ti parapo. Dagitoy ket perpekto para iti panagbubbling kadagiti at-atiddog a mensahe ti biddut, mangpakdaar iti maysa nga agar-aramat iti maysa a nakasagana nga aramid, wenno basta panangidatag ti impormasion para iti ad-adu a panangipaganetget iti panid.
Dagiti modal—dagiti dialogo wenno dagiti lightbox—ket nasayaat para kadagiti konteksto a panagtignay kadagiti kasasaad a napateg a mataginayon ti konteksto ti likudan.
Maysa a napino a bagi...
Dagiti Twipsies ket super makatulong para iti panangtulong iti maysa a nariribuk nga agus-usar ken panangiturong kadakuada iti umno a direksion.
Lorem ipsum dolar sit amet illo biddut ipsum veritatis aut isiste perspiciatis iste voluptas natus illo quasi odit aut natus a pagbanagan, 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 arkitekto eksplicabo agtugaw a kasla agtalaw, totam doloremque unde sunt sed dikta quae akusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Usaren dagiti popovers tapno mangipaay ti subtekstual nga impormasion iti maysa a panid a saan nga epektibo ti layout.
Etiam porta sem malesuada nga agtagibalay nga euismod. Maecenas nga faucibus nga mollis nga interdum. Morbi leo risus, porta ac consectetur ac, vestibulum iti eros.
Ti Bootstrap ket naibangon babaen ti Preboot , ti maysa nga open-source a pakete dagiti mixin ken dagiti variable a mausar a maikuyog iti Less , ti maysa a CSS a preprosesor para iti naparpartak ken nalaklaka a panagrang-ay ti web.
Kitaen no kasano nga inusarmi ti Preboot iti Bootstrap ken no kasano a mausarmo daytoy no piliem nga ipatarayen ti Less iti sumaruno a proyektom.
Usaren daytoy a pagpilian tapno naan-anay nga usaren dagiti Less variables, mixins, ken panagumok ti Bootstrap iti CSS babaen ti javascript iti browsermo.
- <link rel = "estilo a panid/basbassit" a kita = "teksto/css" href = "basbassit/bootstrap.basbassit" media = "amin" />
- < tipo ti iskrip = "teksto/javascript" src = "js/basbassit-1.0.41.min.js" ></script>
Saan kadi a marikna ti .js a solusion? Padasem ti Less Mac app wenno usarem ti Node.js tapno ag-compile no i-deploy-mo ti code-mo.
Adtoy ti sumagmamano kadagiti highlights ti nairaman iti Twitter Bootstrap kas paset ti Bootstrap. Agturongka iti website ti Bootstrap wenno panid ti proyekto ti Github tapno mai-download ken maammuan ti ad-adu pay.
Dagiti variable iti Less ket perpekto para iti panangmantener ken panangpabaro iti CSS headache free. No kayatmo a baliwan ti pateg ti kolor wenno masansan a maus-usar a pateg, i-update dayta iti maysa a lugar ket naikabilka.
- // Dagiti silpo
- @silpo nga Kolor : # 8b59c2;
- @linkColorHover : agsipnget ( @Kolor ti silpo , 10 );
- // Dagiti abuabu
- @nangisit : # 000;
- @grayDark : palag-an ( @nangisit , 25 %);
- @gray : palag-an ( @itim , 50 %);
- @grayLight : palag-an ( @itim , 70 %);
- @grayLighter : palag-an ( @nangisit , 90 %);
- @puraw : #fff;
- // Dagiti Kolor ti Aksento
- @asul nga : # 08b5fb;
- @berde nga : # 46a546;
- @nalabaga : # 9d261d;
- @duyaw : # ffc40d nga;
- @ kahel : # f89406 nga;
- @rosas nga : # c3325f;
- @lila nga : # 7a43b6;
- // Base nga Linya
- @baseline : 20px nga ;
Ti Less ket mangipaay pay ti sabali nga estilo ti panagkomento malaksid ti gagangay a /* ... */
sintaksis ti CSS.
- // Daytoy ket maysa a komento
- /* Daytoy met ti komento */
Dagiti mixin ket kangrunaan a mairaman wenno dagiti paset para iti CSS, a mangipalubos kenka a mangtipon ti maysa a bloke ti kodigo iti maysa. Nasayaat dagitoy para kadagiti tagikua ti prefixed ti aglaklako a kas ti box-shadow
, cross-browser gradients, font stacks, ken dadduma pay. Iti baba ket ti sample dagiti mixins a nairaman iti Bootstrap.
- # nga letra { .
- . shorthand ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {
- kadakkel ti letra : @size ;
- font - timbang : @timbang ;
- kangato ti linia : @lineHeight ;
- } nga
- . sans - serif ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {
- pamilia ti letra : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- kadakkel ti letra : @size ;
- font - timbang : @timbang ;
- kangato ti linia : @lineHeight ;
- } nga
- . serif ( @timbang : normal , @kadakkel : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Panawen Baro a Romano , Panawen , sans - serif ;
- kadakkel ti letra : @size ;
- font - timbang : @timbang ;
- kangato ti linia : @lineHeight ;
- } nga
- . monospace ( @timbang : normal , @kadakkel : 12px , @lineHeight : 20px ) {
- letra - pamilia : "Monaco" , Kurier Baro , monoespasio ;
- kadakkel ti letra : @size ;
- font - timbang : @timbang ;
- kangato ti linia : @lineHeight ;
- } nga
- } nga
- #gradient nga { .
- . horizontal ( @Kolor ti pangrugian : # 555, @Kolor ti panagpatingga: # 333) {
- kolor ti likudan : @endColor ;
- background - ulit : ulit - x ;
- background - image : - khtml - gradient ( linear , kannigid nga ngato , kannawan nga ngato , manipud iti ( @startColor ), agingga iti ( @endColor )); // Konqueror nga
- background - imahe : -moz - linear - gradient ( kannigid , @mangrugi a Kolor , @endColor ); // FF nga 3.6+
- background - imahe : -ms - linear - gradient ( kannigid , @mangrugi a Kolor , @endColor ); // IE10 nga
- likudan - ladawan : - webkit - gradient ( linear , kannigid nga ngato , kannawan nga ngato , kolor - panagsardeng ( 0 %, @startColor ), kolor - panagsardeng ( 100 %, @endColor )); // Safari nga 4+, Kromo 2+
- background - imahe : -webkit - linear - gradient ( kannigid , @mangrugi a Kolor , @endColor ); // Safari nga 5.1+, Kromo nga 10+
- background - imahe : -o - linear - gradient ( kannigid , @startColor , @endColor ) ; // Opera nga 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(pangrugian ti Kolor='%d', panagpatingga ti Kolorstr='%d', Tipo ti Gradiente=1)" , @mangrugi a Kolor , @patingga a Kolor ); // IE8 + nga
- filter : e (%( "progid:DXImageTransform.Microsoft.gradient (pangrugian ti Kolor = '% d', ngudo ti Kolorstr = '% d', Tipo ti Gradiente = 1)" , @mangrugi a Kolor , @patingga a Kolor )); // IE6 ken IE7
- background - imahe : linear - gradient ( kannigid , @startColor , @endColor ); // Le nga estandarte
- } nga
- . bertikal ( @Kolor ti pangrugian : # 555, @Kolor ti panagpatingga: # 333) {
- kolor ti likudan : @endColor ;
- background - ulit : ulit - x ;
- background - image : - khtml - gradient ( linear , kannigid nga ngato , kannigid nga baba , manipud iti ( @startColor ), agingga iti ( @endColor )); // Konqueror nga
- likudan - ladawan : -moz - linear - gradient ( @mangrugi a Kolor , @patingga a Kolor ); // FF nga 3.6+
- background - imahe : - ms - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // IE10 nga
- likudan - ladawan : - webkit - gradient ( linear , kannigid nga ngato , kannigid nga baba , kolor - panagsardeng ( 0 %, @startColor ), kolor - panagsardeng ( 100 %, @endColor )); // Safari nga 4+, Kromo 2+
- likudan - ladawan : - webkit - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Safari nga 5.1+, Kromo nga 10+
- background - imahe : - o - linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Opera nga 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(pangrugian ti Kolor='%d', panagpatingga ti Kolorstr='%d', Tipo ti Gradiente=0)" , @mangrugi a Kolor , @patingga a Kolor ); // IE8 + nga
- filter : e (%( "progid:DXImageTransform.Microsoft.gradient (pangrugian ti Kolor = '% d', ngudo ti Kolorstr = '% d', Tipo ti Gradiente = 0)" , @mangrugi a Kolor , @patingga a Kolor )); // IE6 ken IE7
- background - imahe : linear - gradient ( @mangrugi nga Kolor , @ ngudo nga Kolor ); // Ti pagalagadan
- } nga
- . direksional ( @Mangrugi nga Kolor : # 555, @ ngudo nga Kolor: # 333, @ deg: 45deg) {
- ...
- } nga
- . bertikal - tallo - nga mga kolor ( @mangrugi nga Kolor : # 00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @ngudo nga Kolor: #c3325f) {
- ...
- } nga
- } nga
Agbalinka a magarbo ken mangaramid iti sumagmamano a matematika tapno makapataud kadagiti nalaka a maibagay ken nabileg a mixin a kas iti adda iti baba.
- // Griditude nga
- @gridDagiti Kolum : 16 ;
- @gridKalawa ti Kolum : 40px ;
- @gridKalawa ti Kanal : 20px ;
- // Sistema ti Grid
- . pagkargaan { .
- kalawa : @Kalawa ti site ;
- margin : 0 nga auto ;
- . nalawag a panangtarimaan ();
- } nga
- . dagiti kolum ( @columnSpan : 1 ) { .
- display : iti uneg ti linia ;
- float : kannigid ;
- width : ( @gridKlawa ti Kolum * @KolumnSpan ) + ( @gridGutterWidth * ( @KolumnSpan - 1 ));
- margin - kannigid : @gridKalawa ti Gutter ;
- &: umuna - ubing { .
- margin - kannigid : 0 ;
- } nga
- } nga
- . offset ( @ kolum ngaOffset : 1 ) { .
- margin - kannigid : ( @gridKlawa ti Kolum * @KolumOffset ) + ( @gridGutterWidth * ( @kolumOffset - 1 )) ! napateg ;
- } nga