Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap huwa sett ta' għodda minn Twitter iddisinjat biex jagħti bidu għall-iżvilupp ta' webapps u siti.
Jinkludi CSS bażi u HTML għal tipografija, formoli, buttuni, tabelli, grilji, navigazzjoni, u aktar.
Twissija Nerd: Bootstrap huwa mibni b'Les u kien iddisinjat biex jaħdem barra mill-bieb bil-browsers moderni f'moħħu.
Għall-bidu l-aktar mgħaġġel u faċli, tikkopja dan is-snippet fil-paġna web tiegħek.
Fan li juża Inqas? Ebda problema, kklona r-repo u żid dawn il-linji:
Niżżel, furketta, iġbed, fajl kwistjonijiet, u aktar bir-repo uffiċjali Bootstrap fuq Github.
Fil-jiem ta 'qabel ta' Twitter, l-inġiniera użaw kważi kull librerija li kienu familjari magħha biex jissodisfaw ir-rekwiżiti front-end. Bootstrap beda bħala tweġiba għall-isfidi li ppreżentat u l-iżvilupp malajr aċċellera matul l-ewwel Hackweek ta 'Twitter.
Bl-għajnuna u r-rispons ta 'ħafna inġiniera fuq Twitter, Bootstrap kiber b'mod sinifikanti biex jinkludi mhux biss stili bażiċi, iżda mudelli ta' disinn front-end aktar eleganti u durabbli.
Aqra aktar fuq dev.twitter.com ›
Bootstrap huwa ttestjat u appoġġjat fil-browsers moderni ewlenin bħal Chrome, Safari, Internet Explorer, u Firefox.
Bootstrap jiġi komplut b'mudelli CSS ikkumpilati, mhux ikkompilati u eżempju.
Is-sistema ta' grilja awtomatika pprovduta bħala parti minn Bootstrap hija grilja ta' 16-il kolonna wiesgħa 940px. Huwa togħma tas-sistema popolari tal-grilja 960, iżda mingħajr il-marġni/ikkuttunar addizzjonali fuq in-naħat tax-xellug u tal-lemin.
Kif muri hawn, jista 'jinħoloq tqassim bażiku b'żewġ "kolonni," kull wieħed ikopri numru ta' 16-il kolonna fundamentali li ddefinijna bħala parti mis-sistema tal-grilja tagħna. Ara l-eżempji hawn taħt għal aktar varjazzjonijiet.
- <div class="row">
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 kolonni" >
- ...
- </div>
- </div>
Tqassim bażiku ta' kontenitur wiesa' ta' 940px iċċentrat għal kważi kull sit jew paġna.
- <korp>
- <div class = "kontenitur" >
- ...
- </div>
- </body>
Struttura ta 'paġna fluwidu jew likwida flessibbli b'wisa' min u max u bar tal-ġenb tax-xellug. Kbir għall-apps.
- <korp>
- <div class = "kontenitur-fluwidu" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "kontenut" >
- ...
- </div>
- </div>
- </body>
Ġerarkija tipografika standard għall-istrutturar tal-paġni web tiegħek.
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.
Uża enfasi, indirizzi, u abbrevjazzjonijiet
<strong>
<em>
<address>
<abbr>
Tikketti ta' enfasi ( <strong>
u <em>
) għandhom jintużaw biex jindikaw importanza jew enfasi addizzjonali ta' kelma jew frażi relattiva għall-kopja ta' madwarha. Uża <strong>
għall-importanza u <em>
għall -enfasi tal -istress .
Fusce dapibus , tellus ac cursus commodo , torttor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Nota: Għadu tajjeb li tuża <b>
u <i>
tikketti fl-HTML5, iżda ma jiġux bi stili inerenti aktar. <b>
huwa maħsub biex jenfasizza kliem jew frażijiet mingħajr ma jwassal importanza addizzjonali, filwaqt li <i>
huwa l-aktar għal vuċi, termini tekniċi, eċċ.
L- <address>
element jintuża għall-informazzjoni ta 'kuntatt għall-eqreb antenat tiegħu, jew il-korp kollu tax-xogħol. Ara kif tidher:
Nota: Kull linja <address>
f'must tispiċċa b'line-break ( <br />
) jew tkun imgeżwer f'tikketta tal-livell ta' blokka (eż. <p>
) biex tistruttura sew il-kontenut.
Għall-abbrevjazzjonijiet u l-akronimi, uża t- <abbr>
tikketta ( <acronym>
hija deprecata f'HTML5 ). Poġġi l-formola shorthand fit-tikketta u waqqaf titolu għall-isem sħiħ.
<blockquote>
<p>
<small>
Biex tinkludi blockquote, wrap <blockquote>
around <p>
u <small>
tags. Uża l- <small>
element biex tikkwota s-sors tiegħek u ikollok sing em —
qabel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
It-tabelli huma tajbin—għal ħafna affarijiet. Tabelli kbar, madankollu, jeħtieġu ftit imħabba ta 'markup biex ikunu utli, skalabbli, u jinqraw (fil-livell tal-kodiċi). Hawn huma ftit suġġerimenti biex jgħinu.
Dejjem wrap l-intestaturi tal-kolonni tiegħek b'tali mod li l - <thead>
ġerarkija tkun <thead>
>> <tr>
.<th>
Simili għall-intestaturi tal-kolonni, il-kontenut kollu tal-korp tal-mejda tiegħek għandu jkun imgeżwer <tbody>
f'tali mod li l-ġerarkija tiegħek tkun <tbody>
> <tr>
> <td>
.
It-tabelli kollha se jiġu stiljati awtomatikament bil-borduri essenzjali biss biex tiġi żgurata l-leġibbiltà u tinżamm l-istruttura. M'hemmx bżonn li żżid klassijiet jew attributi żejda.
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Xi wħud | Waħda | Ingliż |
2 | Joe | Sixpack | Ingliż |
3 | Stu | Dent | Kodiċi |
- <table class="common-table"> klassi = "tabella komuni" >
- ...
- </mejda>
Ikseb ftit fancy mat-tabelli tiegħek billi żżid zebra-striping—sempliċement żid il- .zebra-striped
klassi.
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Xi wħud | Waħda | Ingliż |
2 | Joe | Sixpack | Ingliż |
3 | Stu | Dent | Kodiċi |
Nota: Zebra-striping huwa titjib progressiv mhux disponibbli għal browsers anzjani bħal IE8 u taħt.
- <table class="common-table zebra-striped"> klassi = "common-table zebra-striped" >
- ...
- </mejda>
Filwaqt li nieħdu l-eżempju ta 'qabel, intejbu l-utilità tat-tabelli tagħna billi nipprovdu funzjonalità ta' għażla permezz ta ' jQuery u l- plugin Tablesorter . Ikklikkja l-header ta 'kwalunkwe kolonna biex tibdel it-tip.
# | Isem | Kunjom | Lingwa |
---|---|---|---|
1 | Tiegħek | Waħda | Ingliż |
2 | Joe | Sixpack | Ingliż |
3 | Stu | Dent | Kodiċi |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skript >
- $ ( funzjoni () {
- $ ( "tabella#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "tabella komuni bi strixxi taż-żebra" >
- ...
- </mejda>
Il-formoli kollha jingħataw stili awtomatiċi biex jippreżentawhom b'mod li jinqara u skalabbli. L-istili huma pprovduti għal inputs ta’ test, listi ta’ għażla, żoni ta’ test, buttuni tar-radju u kaxxi ta’ kontroll, u buttuni.
Żid .form-stacked
mal-HTML tal-formola tiegħek u jkollok tikketti fuq l-oqsma tagħhom minflok fuq ix-xellug tagħhom. Dan jaħdem tajjeb jekk il-formoli tiegħek huma qosra jew għandek żewġ kolonni ta 'inputs għal forom itqal.
Bħala konvenzjoni, il-buttuni jintużaw għall-azzjonijiet filwaqt li l-links jintużaw għall-oġġetti. Pereżempju, "Download" tista' tkun buttuna u "attività riċenti" tista' tkun link.
Il-buttuni kollha huma default għal stil griż ċar, iżda .primary
klassi blu hija disponibbli. Barra minn hekk, ir-rolling tal-istili tiegħek huwa faċli.
L-istili tal-buttuni jistgħu jiġu applikati għal kull ħaġa bl- .btn
applikata. Tipikament tkun trid tapplika dawn għal elementi biss <a>
, <button>
, u agħżel <input>
. Ara kif tidher:
Fancy buttuni akbar jew iżgħar? Ikollhom!
Għal buttuni li mhumiex attivi jew li huma diżattivati mill-app għal xi raġuni jew oħra, uża l-istat diżabbli. Dak .disabled
għall-links u :disabled
għall - <button>
elementi.
Messaġġi f'linja waħda biex jenfasizzaw il-falliment, il-falliment possibbli, jew is-suċċess ta 'azzjoni. Partikolarment utli għall-formoli.
Għal messaġġi li jeħtieġu ftit spjegazzjoni, għandna twissijiet ta 'stil ta' paragrafu. Dawn huma perfetti biex ibaxxu messaġġi ta 'żball itwal, iwissu lil utent dwar azzjoni pendenti, jew sempliċement jippreżentaw informazzjoni għal aktar enfasi fuq il-paġna.
Il-modali—djalogi jew lightboxes—huma tajbin għal azzjonijiet kuntestwali f'sitwazzjonijiet fejn huwa importanti li jinżamm il-kuntest tal-isfond.
Korp wieħed tajjeb...
Twipsies huma super utli biex jgħinu utent konfuż u jippontahom fid-direzzjoni t-tajba.
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 dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Uża popovers biex tipprovdi informazzjoni subtestwali lil paġna mingħajr ma taffettwa t-tqassim.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap inbniet bi Preboot , pakkett open-source ta 'mixins u varjabbli li għandhom jintużaw flimkien ma' Less , preproċessur CSS għal żvilupp tal-web aktar mgħaġġel u eħfef.
Iċċekkja kif użajna Preboot f'Bootstrap u kif tista' tagħmel użu minnu jekk tagħżel li tmexxi Less fuq il-proġett li jmiss tiegħek.
Uża din l-għażla biex tagħmel użu sħiħ mill-varjabbli, mixins, u nesting ta' Bootstrap Less f'CSS permezz ta' javascript fil-browser tiegħek.
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" href = "less/bootstrap.less" media = "kollha" />
- <script src = "js/less-1.0.41.min.js" ></script>
Mhux qed tħoss is-soluzzjoni .js? Ipprova l-app Less Mac jew uża Node.js biex tikkompila meta tuża l-kodiċi tiegħek.
Hawn huma xi wħud mill-punti ewlenin ta 'dak li hu inkluż f'Twitter Bootstrap bħala parti minn Bootstrap. Mur fuq il-websajt Bootstrap jew il-paġna tal-proġett Github biex tniżżel u titgħallem aktar.
Varjabbli f'Inqas huma perfetti biex iżommu u jaġġornaw l-uġigħ ta 'ras CSS tiegħek ħieles. Meta trid tibdel valur tal-kulur jew valur użat ta 'spiss, aġġornah f'post wieħed u tkun issettjat.
- // Links
- @linkColor : #8b59c2;
- @linkColorHover : jiskura ( @linkColor , 10 );
- // Griżi
- @iswed : #000;
- @grayDark : ħfief ( @black , 25 %);
- @griż : ħfief ( @iswed , 50 %);
- @grayLight : ħfief ( @iswed , 70 %);
- @grayLighter : ħfief ( @iswed , 90 %);
- @abjad : #fff;
- // Kuluri Aċċent
- @blu : #08b5fb;
- @aħdar : #46a546 ;
- @aħmar : #9d261d ;
- @isfar : #ffc40d;
- @orange : #f89406;
- @roża : #c3325f ;
- @vjola : #7a43b6;
- // Linja bażi
- @linja bażi : 20px ;
Less jipprovdi wkoll stil ieħor ta' kumment flimkien mas- /* ... */
sintassi normali tas-CSS.
- // Dan huwa kumment
- /* Dan huwa wkoll kumment */
Mixins huma bażikament jinkludi jew parzjali għal CSS, li jippermettulek tgħaqqad blokka ta 'kodiċi f'waħda. Huma tajbin għal proprjetajiet prefissati tal-bejjiegħ bħal box-shadow
, gradjenti cross-browser, munzelli ta 'font, u aktar. Hawn taħt hemm kampjun tal-mixins li huma inklużi ma 'Bootstrap.
- #font {
- . shorthand ( @weight : normali , @size : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . sans - serif ( @piż : normali , @daqs : 14px , @LinjaHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . serif ( @piż : normali , @size : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- . monospazju ( @piż : normali , @daqs : 12px , @LinjaHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- font - size : @size ;
- font - weight : @weight ;
- line - height : @lineHeight ;
- }
- }
- #gradjent {
- . orizzontali ( @startColor : #555, @endColor: #333) {
- background - color : @endColor ;
- sfond - irrepeti : irrepeti - x ;
- sfond - immaġni : - khtml - gradjent ( lineari , xellug ta 'fuq , lemin ta ' fuq , minn ( @startColor ), sa ( @endColor )); // Konqueror
- sfond - immaġni : - moz - lineari - gradjent ( xellug , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( xellug , @startColor , @endColor ); // IE10
- sfond - immaġni : - webkit - gradjent ( lineari , xellug ta 'fuq , lemin ta' fuq , kulur - stop ( 0 %, @startColor ), kulur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- sfond - immaġni : - webkit - lineari - gradjent ( xellug , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( xellug , @startColor , @endColor ); // Opera 11.10
- - ms - filtru : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- filtru : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1))" , @startColor , @endColor )); // IE6 & IE7
- sfond - immaġni : lineari - gradjent ( xellug , @startColor , @endColor ); // Le standard
- }
- . vertikali ( @startColor : #555, @endColor: #333) {
- background - color : @endColor ;
- sfond - irrepeti : irrepeti - x ;
- sfond - immaġni : - khtml - gradjent ( lineari , xellug ta ' fuq , xellug ta ' isfel , minn ( @startColor ), sa ( @endColor )); // Konqueror
- sfond - immaġni : - moz - lineari - gradjent ( @startColor , @endColor ); // FF 3.6+
- sfond - immaġni : - ms - lineari - gradjent ( @startColor , @endColor ); // IE10
- immaġni fl- isfond : - webkit - gradjent ( lineari , xellug ta 'fuq , xellug ta' isfel , kulur - stop ( 0 %, @startColor ), kulur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- sfond - immaġni : - webkit - lineari - gradjent ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- sfond - immaġni : - o - linear - gradjent ( @startColor , @endColor ); // Opera 11.10
- - ms - filtru : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- filtru : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0))" , @startColor , @endColor )); // IE6 & IE7
- sfond - immaġni : lineari - gradjent ( @startColor , @endColor ); // L-istandard
- }
- . direzzjonali ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikali - tliet kuluri ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Ikseb fancy u wettaq xi matematika biex tiġġenera mixins flessibbli u qawwija bħal dik ta 'hawn taħt.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Sistema tal-Grid
- . kontenitur {
- wisa : @sitWidth ;
- marġini : 0 auto ;
- . clearfix ();
- }
- . kolonni ( @columnSpan : 1 ) {
- wiri : inline ;
- float : xellug ;
- wisa ': (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- margin-left: @gridGutterWidth;
- &:l-ewwel wild {
- marġini-xellug: 0;
- }
- }
- .offset(@columnOffset: 1) {
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !importanti;
- }