Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap er verkfærasett frá Twitter sem er hannað til að hefja þróun vefforrita og vefsvæða.
Það inniheldur grunn CSS og HTML fyrir leturfræði, eyðublöð, hnappa, töflur, rist, flakk og fleira.
Nördaviðvörun: Bootstrap er smíðað með Less og var hannað til að virka út fyrir hliðið með aðeins nútímavafra í huga.
Fyrir fljótlegasta og auðveldasta byrjun skaltu bara afrita þennan bút inn á vefsíðuna þína.
Aðdáandi þess að nota minna? Ekkert mál, klónaðu bara endurhverfan og bættu við þessum línum:
Hlaða niður, gaffla, draga, skrá vandamál og fleira með opinberu Bootstrap endurhverfunni á Github.
Sjálfgefið netkerfi sem er hluti af Bootstrap er 940px breitt 16 dálka rist. Það er bragð af hinu vinsæla 960 ristkerfi, en án viðbótar spássíu/fyllingar á vinstri og hægri hlið.
Eins og sýnt er hér er hægt að búa til grunnútlit með tveimur „dálkum“, sem hver spannar fjölda af þeim 16 grunndálkum sem við skilgreindum sem hluta af netkerfi okkar. Sjá dæmin hér að neðan fyrir fleiri afbrigði.
- <div class="row"> class = "röð" >
- <div class = "span6 dálkar" >
- ...
- </div>
- <div class = "span10 dálkar" >
- ...
- </div>
- </div>
Einfalt 940px breitt, miðjusett gámaskipulag fyrir nánast hvaða síðu eða síðu sem er.
- <líkami>
- <div class = "gámur" >
- ...
- </div>
- </body>
Sveigjanleg vökva- eða fljótandi síðubygging með lágmarks- og hámarksbreiddum og vinstri hliðarstiku. Frábært fyrir öpp.
- <líkami>
- <div class = "ílát-vökvi" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Staðlað leturfræðistigveldi til að skipuleggja vefsíðurnar þínar.
Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula ut id elit.
Þú getur líka bætt við undirfyrirsögnum með <strong>
og<em>
Notaðu áherslur, heimilisföng og skammstafanir
<strong>
<em>
<address>
<abbr>
Áherslumerki ( <strong>
og <em>
) ætti að nota til að bæta sjónrænan greinarmun á orði eða orðasambandi og afriti þess í kring. Notaðu <strong>
fyrir venjulega gamla athygli og <em>
fyrir flotta athygli og titla.
Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , út fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Einingin address
er notuð fyrir — þú giskaðir á það! — heimilisföng. Svona lítur það út:
Athugið: Hver lína í línu address
verður að enda með línuskilum ( <br />
) til að skipuleggja innihaldið á réttan hátt eins og það er lesið í raunveruleikanum án þess að stíll sé notaður.
Fyrir skammstafanir og skammstafanir, notaðu abbr
merkið ( acronym
er úrelt í HTML5 ). Settu styttu eyðublaðið í merkinu og settu titil fyrir allt nafnið.
<blockquote>
<p>
<cite>
Vertu viss um að vefja blockquote
um þig paragraph
og cite
merkja. Þegar þú vitnar í heimild, notaðu cite
þáttinn. CSS mun sjálfkrafa setja em strik (—) á undan nafni.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Dr. Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Borð eru frábær - fyrir margt. Frábærar töflur þurfa hins vegar smá merkingarást til að vera gagnlegar, skalanlegar og læsilegar (á kóðastigi). Hér eru nokkur ráð til að hjálpa.
Settu alltaf dálkahausana thead
þannig að stigveldið sé thead
> tr
> th
.
Svipað og dálkahausarnir, ætti allt meginefni töflunnar að vera pakkað inn í tbody
svo stigveldið þitt sé tbody
> tr
> td
.
Allar töflur verða sjálfkrafa stílaðar með aðeins nauðsynlegum ramma til að tryggja læsileika og viðhalda uppbyggingu. Engin þörf á að bæta við auka flokkum eða eiginleikum.
# | Fyrsta nafn | Eftirnafn | Tungumál |
---|---|---|---|
1 | Sumir | Einn | Enska |
2 | Jói | Kippa | Enska |
3 | Stu | Dent | Kóði |
- <table class="common-table"> class = "algengt borð" >
- ...
- </table>
Vertu smá flottur með borðin þín með því að bæta við sebra-röndum - bættu bara við .zebra-striped
bekknum.
# | Fyrsta nafn | Eftirnafn | Tungumál |
---|---|---|---|
1 | Sumir | Einn | Enska |
2 | Jói | Kippa | Enska |
3 | Stu | Dent | Kóði |
- <table class="common-table zebra-striped"> class = "algengt borð sebra-röndóttur" >
- ...
- </table>
Með því að taka fyrra dæmið bætum við notagildi borðanna okkar með því að bjóða upp á flokkunarvirkni í gegnum jQuery og Tablesorter viðbótina. Smelltu á haus hvaða dálks sem er til að breyta röðun.
# | Fyrsta nafn | Eftirnafn | Tungumál |
---|---|---|---|
1 | Þinn | Einn | Enska |
2 | Jói | Kippa | Enska |
3 | Stu | Dent | Kóði |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <handritsgerð = " texti/javascript" >
- $ ( skjal ). tilbúinn ( fall () {
- $ ( "tafla#flokkaTaflaDæmi" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "algengt borð sebra-röndóttur" >
- ...
- </table>
Öll eyðublöð fá sjálfgefna stíla til að setja þau fram á læsilegan og skalanlegan hátt. Stílar eru til staðar fyrir textainnslátt, vallista, textasvæði, valhnappa og gátreiti og hnappa.
Bættu .form-stacked
við HTML eyðublaðsins þíns og þú munt hafa merki ofan á reitunum þeirra í stað þess að vera til vinstri. Þetta virkar frábærlega ef eyðublöðin þín eru stutt eða þú ert með tvo dálka af inntak fyrir þyngri eyðublöð.
Sem venja eru hnappar notaðir fyrir aðgerðir á meðan tenglar eru notaðir fyrir hluti. Til dæmis gæti "Hlaða niður" verið hnappur og "nýleg virkni" gæti verið hlekkur.
Allir hnappar hafa sjálfgefið ljósgráa stíl, en blár .primary
flokkur er í boði. Auk þess er auðvelt að rúlla eigin stílum.
Hægt er að nota hnappastíla á hvað sem er með .btn
beittum. Venjulega viltu nota þetta aðeins á a
, button
, og valda input
þætti. Svona lítur það út:
Langar þig í stærri eða minni hnappa? Hafið það!
Notaðu óvirka stöðuna fyrir hnappa sem eru ekki virkir eða eru óvirkir af appinu af einni eða annarri ástæðu. Það er .disabled
fyrir tengla og :disabled
fyrir button
þætti.
Skilaboð í einni línu til að undirstrika bilun, hugsanlega mistök eða árangur aðgerðar. Sérstaklega gagnlegt fyrir eyðublöð.
Fyrir skilaboð sem krefjast smá útskýringar höfum við tilkynningar um málsgreinastíl. Þetta er fullkomið til að blaðra upp lengri villuskilaboð, vara notanda við aðgerð sem er í bið, eða bara kynna upplýsingar til að leggja meiri áherslu á síðuna.
Modals—dálka eða ljóskassa—eru frábært fyrir samhengisaðgerðir í aðstæðum þar sem mikilvægt er að bakgrunnssamhenginu sé viðhaldið.
Einn fínn líkami...
Twipsies eru mjög gagnlegar til að aðstoða ruglaðan notanda og vísa þeim í rétta átt.
Lorem ipsum dolar sit amet illo villa ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut aut natus consequuntur consequuntur, aut natus illo voluptateem 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 dicta quae accusantium fugit volupta nemo
Notaðu sprettiglugga til að veita undirtextaupplýsingar á síðu án þess að hafa áhrif á uppsetningu.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap var smíðað með Preboot , opnum pakka af blöndun og breytum til að nota í tengslum við Less , CSS forgjörva fyrir hraðari og auðveldari vefþróun.
Skoðaðu hvernig við notuðum Preboot í Bootstrap og hvernig þú getur nýtt þér það ef þú velur að keyra Less í næsta verkefni.
Notaðu þennan valmöguleika til að fullnýta Bootstrap's Less breytur, mixins og hreiður í CSS í gegnum javascript í vafranum þínum.
- <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "allt" />
- <skriftargerð = "text/javascript" src = "js/less-1.0.41.min.js" > </script>
Finnurðu ekki fyrir .js lausninni? Prófaðu Less Mac appið eða notaðu Node.js til að setja saman þegar þú setur upp kóðann þinn.
Hér eru nokkrir af hápunktum þess sem er innifalið í Twitter Bootstrap sem hluti af Bootstrap. Farðu yfir á Bootstrap vefsíðuna eða Github verkefnasíðuna til að hlaða niður og læra meira.
Breytur í minna eru fullkomnar til að viðhalda og uppfæra CSS höfuðverk án. Þegar þú vilt breyta litagildi eða oft notaðu gildi, uppfærðu það á einum stað og þú ert tilbúinn.
- // Tenglar
- @linkColor : #8b59c2;
- @linkColorHover : dökkna ( @linkColor , 10 );
- // Gráir
- @svartur : #000;
- @grayDark : létta ( @black , 25 %);
- @grár : létta ( @svartur , 50 %);
- @grayLight : létta ( @black , 70 %);
- @grayLighter : létta ( @black , 90 %);
- @hvítur : #fff;
- // Hreim litir
- @blár : #08b5fb ;
- @grænn : #46a546 ;
- @rautt : #9d261d;
- @gulur : #ffc40d;
- @appelsínugult : #f89406 ;
- @bleikur : #c3325f;
- @fjólublátt : #7a43b6 ;
- // Grunnlína
- @grunnlína : 20px ;
Minna veitir einnig annan stíl athugasemda til viðbótar við venjulega /* ... */
setningafræði CSS.
- // Þetta er athugasemd
- /* Þetta er líka athugasemd */
Mixins eru í grundvallaratriðum innihalda eða hlutar fyrir CSS, sem gerir þér kleift að sameina kóðablokk í einn. Þeir eru frábærir fyrir eiginleika með forskeyti söluaðila eins og box-shadow
, halla yfir vafra, leturstafla og fleira. Hér að neðan er sýnishorn af blöndunum sem fylgja með Bootstrap.
- #font {
- . stytting ( @þyngd : venjuleg , @stærð : 14px , @línahæð : 20px ) {
- leturstærð : @ stærð ; _
- leturgerð - þyngd : @þyngd ;
- lína - hæð : @línahæð ;
- }
- . sans - serif ( @þyngd : venjuleg , @stærð : 14px , @lineHeight : 20px ) {
- leturgerð - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- leturstærð : @ stærð ; _
- leturgerð - þyngd : @þyngd ;
- lína - hæð : @línahæð ;
- }
- . serif ( @þyngd : venjuleg , @stærð : 14px , @línahæð : 20px ) {
- leturgerð - family : "Georgia" , Times New Roman , Times , sans - serif ;
- leturstærð : @ stærð ; _
- leturgerð - þyngd : @þyngd ;
- lína - hæð : @línahæð ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- leturgerð - family : "Monaco" , Courier New , monospace ;
- leturstærð : @ stærð ; _
- leturgerð - þyngd : @þyngd ;
- lína - hæð : @línahæð ;
- }
- }
- #gradient {
- . lárétt ( @startColor : #555, @endColor: #333) {
- bakgrunnslitur : @endColor ; _ _
- bakgrunnur - endurtaka : endurtaka - x ;
- bakgrunnur - mynd : - khtml - halli ( línulegur , vinstri efst , hægri efst , frá ( @startColor ), til ( @endColor )); // Konqueror
- bakgrunnur - mynd : - moz - línuleg - halli ( vinstri , @startColor , @endColor ); // FF 3.6+
- bakgrunnur - mynd : - ms - línuleg - halli ( vinstri , @startColor , @endColor ); // IE10
- bakgrunnur - mynd : - webkit - halli ( línuleg , vinstri efst , hægri efst , litur - stopp ( 0 %, @startColor ), litur - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- bakgrunnur - mynd : - vefsett - línuleg - halli ( vinstri , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- bakgrunnsmynd : -o - línuleg - halli ( vinstri , @startColor , @endColor ) ; _ _ // Ópera 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 og IE7
- bakgrunnur - mynd : línuleg - halli ( vinstri , @startColor , @endColor ); // Le standard
- }
- . lóðrétt ( @startColor : #555, @endColor: #333) {
- bakgrunnslitur : @endColor ; _ _
- bakgrunnur - endurtaka : endurtaka - x ;
- bakgrunnur - mynd : - khtml - halli ( línuleg , vinstri efst , vinstri neðst , frá ( @startColor ), til ( @endColor )); // Konqueror
- bakgrunnur - mynd : - moz - línuleg - halli ( @startColor , @endColor ); // FF 3.6+
- background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-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); // Opera 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 & IE7
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Vertu flottur og gerðu smá stærðfræði til að búa til sveigjanlegar og öflugar blöndur eins og hér að neðan.
- // Grindin
- @gridColumns: 16;
- @gridColumnWidth: 40px;
- @gridGutterWidth: 20px;
- // Grid System
- .container {
- width: @siteWidth;
- margin: 0 auto;
- .clearfix();
- }
- .columns(@columnSpan: 1) {
- display: inline;
- float: left;
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- margin-left: @gridGutterWidth;
- &:first-child {
- margin-left: 0;
- }
- }
- .offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
- }