Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vstibulum ac eros.
Pecyn cymorth gan Twitter yw Bootstrap sydd wedi'i gynllunio i roi hwb i ddatblygiad gwe-apps a gwefannau.
Mae'n cynnwys CSS sylfaenol a HTML ar gyfer teipograffeg, ffurflenni, botymau, tablau, gridiau, llywio, a mwy.
Rhybudd Nerd: Mae Bootstrap wedi'i adeiladu gyda Llai ac fe'i cynlluniwyd i weithio allan o'r giât gyda phorwyr modern mewn golwg.
I gael y cychwyn cyflymaf a hawsaf, copïwch y darn hwn i'ch tudalen we.
Yn gefnogwr o ddefnyddio Llai? Dim problem, dim ond clonio'r repo ac ychwanegu'r llinellau hyn:
Dadlwythwch, fforc, tynnu, materion ffeil, a mwy gyda repo swyddogol Bootstrap ar Github.
Yn nyddiau cynharach Twitter, defnyddiodd peirianwyr bron unrhyw lyfrgell yr oeddent yn gyfarwydd â hi i fodloni gofynion pen blaen. Dechreuodd Bootstrap fel ateb i'r heriau a gyflwynwyd a chyflymodd datblygiad yn gyflym yn ystod Wythnos Hac gyntaf Twitter.
Gyda chymorth ac adborth llawer o beirianwyr yn Twitter, mae Bootstrap wedi tyfu'n sylweddol i gwmpasu nid yn unig arddulliau sylfaenol, ond patrymau dylunio pen blaen mwy cain a gwydn.
Darllenwch fwy ar dev.twitter.com ›
Mae Bootstrap yn cael ei brofi a'i gefnogi mewn porwyr modern mawr fel Chrome, Safari, Internet Explorer, a Firefox.
Daw Bootstrap ynghyd â CSS wedi'i lunio, heb ei lunio, a thempledi enghreifftiol.
Y system grid rhagosodedig a ddarperir fel rhan o Bootstrap yw grid 16-colofn 940px o led. Mae'n flas o'r system grid 960 boblogaidd, ond heb yr ymyl / padin ychwanegol ar yr ochr chwith a dde.
Fel y dangosir yma, gellir creu cynllun sylfaenol gyda dwy "golofn," pob un yn rhychwantu nifer o'r 16 colofn sylfaenol a ddiffiniwyd gennym fel rhan o'n system grid. Gweler yr enghreifftiau isod am ragor o amrywiadau.
- <div class = "row" >
- <div class = "span6 colofn" >
- ...
- </div>
- <div class = "span10 colofn" >
- ...
- </div>
- </div>
Y gosodiad diofyn a syml 940px-eang, wedi'i ganoli ar gyfer bron unrhyw wefan neu dudalen a ddarperir gan un ffeil <div.container>
.
- <corff>
- <div class = "cynhwysydd" >
- ...
- </div>
- </corff>
Strwythur tudalen hylif hyblyg amgen gyda lled isaf ac uchaf a bar ochr chwith. Gwych ar gyfer apps a dogfennau.
- <corff>
- <div class = "container-fluid" >
- <div class = "bar ochr" >
- ...
- </div>
- <div class = "cynnwys" >
- ...
- </div>
- </div>
- </corff>
Hierarchaeth deipograffig safonol ar gyfer strwythuro'ch tudalennau gwe.
Mae'r grid teipograffeg cyfan yn seiliedig ar ddau newidyn Llai yn ein ffeil preboot.less: @basefont
a @baseline
. Y cyntaf yw maint y ffont sylfaen a ddefnyddir drwyddo draw a'r ail yw uchder y llinell sylfaen.
Rydyn ni'n defnyddio'r newidynnau hynny, a rhywfaint o fathemateg, i greu'r ymylon, padinau, ac uchder llinell o'n holl fath a mwy.
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 ultricies vehicula ut id elit.
Defnyddio pwyslais, cyfeiriadau a thalfyriadau
<strong>
<em>
<address>
<abbr>
Dylid defnyddio tagiau pwyslais ( <strong>
a ) i ddangos pwysigrwydd neu bwyslais ychwanegol gair neu ymadrodd o'i gymharu â'r copi o'i amgylch. <em>
Defnyddiwch <strong>
ar gyfer pwysigrwydd ac <em>
ar gyfer pwyslais straen .
Fusce dapibus , tellus ac cursus comodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, pharetra augue.
Nodyn: Mae'n dal yn iawn i ddefnyddio <b>
a <i>
thagiau yn HTML5 ac nid oes rhaid iddynt gael eu steilio mewn print trwm ac italig, yn y drefn honno (er os oes elfen fwy semantig, defnyddiwch hi). <b>
i fod i amlygu geiriau neu ymadroddion heb gyfleu pwysigrwydd ychwanegol, tra ei fod <i>
yn bennaf ar gyfer llais, termau technegol, ac ati.
Defnyddir yr <address>
elfen ar gyfer gwybodaeth gyswllt ar gyfer ei hynafiad agosaf, neu'r corff cyfan o waith. Dyma sut mae'n edrych:
Nodyn: Rhaid i bob llinell mewn llinell <address>
ddod i ben gyda toriad llinell ( <br />
) neu gael ei lapio mewn tag lefel bloc (ee, <p>
) i strwythuro'r cynnwys yn gywir.
Ar gyfer byrfoddau ac acronymau, defnyddiwch y <abbr>
tag ( <acronym>
wedi'i anghymeradwyo yn HTML5 ). Rhowch y ffurflen llaw-fer o fewn y tag a gosodwch deitl ar gyfer yr enw cyflawn.
<blockquote>
<p>
<small>
I gynnwys blockquote, cofleidiol a <blockquote>
thagiau . Defnyddiwch yr elfen i ddyfynnu eich ffynhonnell a byddwch yn cael 'em dash' o'i flaen.<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cyfanrif posuere erat a ante venenatis dapibus posuere velit aliquet.
Julius Hibbert, Dr
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Mae byrddau yn wych - am lawer o bethau. Fodd bynnag, mae angen ychydig o gariad marcio ar dablau gwych i fod yn ddefnyddiol, yn raddadwy ac yn ddarllenadwy (ar lefel y cod). Dyma ychydig o awgrymiadau i helpu.
Lapiwch benawdau eich colofnau bob amser <thead>
fel bod hierarchaeth yn <thead>
>> <tr>
.<th>
Yn debyg i benawdau'r colofnau, dylai holl gynnwys corff eich tabl gael ei lapio mewn a <tbody>
fel mai eich hierarchaeth yw <tbody>
>> .<tr>
<td>
Bydd pob bwrdd yn cael ei steilio'n awtomatig gyda dim ond y borderi hanfodol i sicrhau darllenadwyedd a chynnal strwythur. Nid oes angen ychwanegu dosbarthiadau neu briodoleddau ychwanegol.
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Rhai | Un | Saesneg |
2 | Joe | Sixpack | Saesneg |
3 | Stu | Dent | Côd |
- <bwrdd>
- ...
- </table>
Mynnwch ychydig o ffansi gyda'ch byrddau trwy ychwanegu stribedi sebra - ychwanegwch y .zebra-striped
dosbarth.
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Rhai | Un | Saesneg |
2 | Joe | Sixpack | Saesneg |
3 | Stu | Dent | Côd |
Nodyn: Mae stripio sebra yn welliant cynyddol nad yw ar gael ar gyfer porwyr hŷn fel IE8 ac is.
- <table class = "sebra-streipiau" >
- ...
- </table>
Gan gymryd yr enghraifft flaenorol, rydym yn gwella defnyddioldeb ein tablau trwy ddarparu ymarferoldeb didoli trwy jQuery ac ategyn Tablesorter . Cliciwch ar bennyn unrhyw golofn i newid y math.
# | Enw cyntaf | Enw olaf | Iaith |
---|---|---|---|
1 | Eich | Un | Saesneg |
2 | Joe | Sixpack | Saesneg |
3 | Stu | Dent | Côd |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( swyddogaeth ( ) {
- $ ( " table#sortTableExample " ). tablesorter ( { sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "sebra-streipiau" >
- ...
- </table>
Rhoddir arddulliau rhagosodedig i bob ffurflen i'w cyflwyno mewn ffordd ddarllenadwy a graddadwy. Darperir arddulliau ar gyfer mewnbynnau testun, rhestrau dethol, meysydd testun, botymau radio a blychau ticio, a botymau.
Ychwanegwch .form-stacked
at HTML eich ffurflen a bydd gennych labeli ar ben eu meysydd yn hytrach nag ar y chwith. Mae hyn yn gweithio'n wych os yw'ch ffurflenni'n fyr neu os oes gennych chi ddwy golofn o fewnbynnau ar gyfer ffurflenni trymach.
Fel confensiwn, defnyddir botymau ar gyfer gweithredoedd tra defnyddir dolenni ar gyfer gwrthrychau. Er enghraifft, gallai "Lawrlwytho" fod yn fotwm a gallai "gweithgaredd diweddar" fod yn ddolen.
Mae pob botwm yn rhagosodedig i arddull llwyd golau, ond gellir cymhwyso nifer o ddosbarthiadau swyddogaethol ar gyfer gwahanol arddulliau lliw. Mae'r dosbarthiadau hyn yn cynnwys dosbarth glas .primary
, dosbarth glas golau .info
, dosbarth gwyrdd .success
, a dosbarth coch .danger
. Hefyd, mae rholio eich arddulliau eich hun yn hawdd iawn.
Gellir cymhwyso arddulliau botwm i unrhyw beth gyda'r .btn
cymhwyso. Yn nodweddiadol byddwch am gymhwyso'r rhain i elfennau <a>
, <button>
, a dethol yn unig. <input>
Dyma sut mae'n edrych:
Awydd botymau mwy neu lai? Mwynhewch!
Ar gyfer botymau nad ydynt yn weithredol neu sy'n anabl gan yr ap am ryw reswm neu'i gilydd, defnyddiwch y cyflwr anabl. Mae hynny ar .disabled
gyfer dolenni ac :disabled
ar gyfer <button>
elfennau.
div.alert-message
Negeseuon un llinell ar gyfer tynnu sylw at fethiant, methiant posibl, neu lwyddiant gweithred. Yn arbennig o ddefnyddiol ar gyfer ffurflenni.
div.alert-message.block-message
Ar gyfer negeseuon sydd angen ychydig o esboniad, mae gennym rybuddion arddull paragraff. Mae'r rhain yn berffaith ar gyfer byrlymu negeseuon gwall hirach, rhybuddio defnyddiwr am weithred arfaethedig, neu ddim ond cyflwyno gwybodaeth i gael mwy o bwyslais ar y dudalen.
Mae moddau - deialogau neu flychau golau - yn wych ar gyfer gweithredoedd cyd-destunol mewn sefyllfaoedd lle mae'n bwysig cynnal y cyd-destun cefndirol.
Un corff da…
Mae Twipsies yn hynod ddefnyddiol ar gyfer cynorthwyo defnyddiwr dryslyd a'u pwyntio i'r cyfeiriad cywir.
Lorem ipsum dolar sit amet illo error ipsum veritatis neu iste perspiciatis iste voluptas natus illo quasi odit neu natus consequuntur canlyniad, neu 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.
Defnyddiwch popovers i ddarparu gwybodaeth is-destunol i dudalen heb effeithio ar y cynllun.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vstibulum ac eros.
Adeiladwyd Bootstrap gyda Preboot , pecyn ffynhonnell agored o gymysgeddau a newidynnau i'w defnyddio ar y cyd â Less , rhagbrosesydd CSS ar gyfer datblygiad gwe cyflymach a haws.
Darganfyddwch sut y gwnaethom ddefnyddio Preboot yn Bootstrap a sut y gallwch ei ddefnyddio pe baech yn dewis rhedeg Llai ar eich prosiect nesaf.
Defnyddiwch yr opsiwn hwn i wneud defnydd llawn o newidynnau Llai Bootstrap, cymysgeddau, a nythu yn CSS trwy javascript yn eich porwr.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Ddim yn teimlo'r ateb .js? Rhowch gynnig ar yr app Less Mac neu defnyddiwch Node.js i lunio pan fyddwch chi'n defnyddio'ch cod.
Dyma rai o uchafbwyntiau'r hyn sydd wedi'i gynnwys yn Twitter Bootstrap fel rhan o Bootstrap. Ewch draw i wefan Bootstrap neu dudalen prosiect Github i lawrlwytho a dysgu mwy.
Mae newidynnau mewn Llai yn berffaith ar gyfer cynnal a diweddaru'ch cur pen CSS yn rhad ac am ddim. Pan fyddwch chi eisiau newid gwerth lliw neu werth a ddefnyddir yn aml, diweddarwch ef mewn un man ac rydych chi wedi'ch gosod.
- // Dolenni
- @linkColor : #8b59c2;
- @linkColorHover : tywyllu ( @linkColor , 10 );
- // Llwyd
- @du : #000;
- @grayDark : ysgafnhau ( @du , 25 %);
- @llwyd : ysgafnhau ( @du , 50 %);
- @grayLight : ysgafnhau ( @du , 70 %);
- @grayLighter : ysgafnhau ( @black , 90 %);
- @gwyn : #ffff;
- // Lliwiau Acen
- @glas : #08b5fb;
- @gwyrdd : #46a546;
- @coch : #9d261d;
- @melyn : #ffc40d;
- @oren : #f89406;
- @pinc : #c3325f;
- @porffor : #7a43b6;
- // Grid gwaelodlin
- @basefont : 13px ;
- @gwaelodlin : 18px ;
/* ... */
Mae Llai hefyd yn darparu arddull arall o wneud sylwadau yn ogystal â chystrawen arferol CSS .
- // Sylw yw hwn
- /* Mae hwn hefyd yn sylw */
Yn y bôn, mae cymysgeddau yn cynnwys neu'n rhannol ar gyfer CSS, sy'n eich galluogi i gyfuno bloc o god yn un. Maen nhw'n wych ar gyfer eiddo sydd wedi'u rhagosod gan werthwyr fel box-shadow
, graddiannau traws-borwr, pentyrrau ffontiau, a mwy. Isod mae sampl o'r cymysgeddau sydd wedi'u cynnwys gyda Bootstrap.
- #ffont {
- . llaw fer ( @ pwysau : arferol , @size : 14px , @lineHeight : 20px ) {
- maint y ffont : @size ;
- pwysau ffont : @pwysau ; _
- uchder llinell : @lineHeight ; _
- }
- . sans - serif ( @ pwysau : normal , @size : 14px , @lineHeight : 20px ) {
- ffont - teulu : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- maint y ffont : @size ;
- pwysau ffont : @pwysau ; _
- uchder llinell : @lineHeight ; _
- }
- . serif ( @ pwysau : arferol , @size : 14px , @lineHeight : 20px ) {
- font - teulu : " Georgia " , Times New Roman , Times , sans - serif ;
- maint y ffont : @size ;
- pwysau ffont : @pwysau ; _
- uchder llinell : @lineHeight ; _
- }
- . monospace ( @ pwysau : normal , @size : 12px , @lineHeight : 20px ) {
- ffont - teulu : "Monaco" , Courier Newydd , monospace ;
- maint y ffont : @size ;
- pwysau ffont : @pwysau ; _
- uchder llinell : @lineHeight ; _
- }
- }
- #graddiant {
- . llorweddol ( @startColor : #555, @endColor: #333) {
- lliw cefndir : @endColor ; _
- cefndir - ailadrodd : ailadrodd - x ;
- cefndir - delwedd : - khtml - graddiant ( llinol , top chwith , top dde , o ( @startColor ), i ( @endColor )); // Konqueror
- cefndir - delwedd : - moz - llinol - graddiant ( chwith , @startColor , @endColor ); // FF 3.6+
- cefndir - delwedd : - ms - llinol - graddiant ( chwith , @startColor , @endColor ); // IE10
- cefndir - delwedd : - webkit - graddiant ( llinol , top chwith , top dde , lliw - stop ( 0 % , @startColor ), lliw - stop ( 100 % , @endColor ) ); // Safari 4+, Chrome 2+
- cefndir - delwedd : - webkit - llinol - graddiant ( chwith , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- cefndir - delwedd : - o - llinellol - graddiant ( chwith , @startColor , @endColor ); // Opera 11.10
- cefndir - delwedd : llinellol - graddiant ( chwith , @startColor , @endColor ); // Le safon
- }
- . fertigol ( @startColor : #555, @endColor: #333) {
- lliw cefndir : @endColor ; _
- cefndir - ailadrodd : ailadrodd - x ;
- cefndir - delwedd : - khtml - graddiant ( llinol , top chwith , gwaelod chwith , o ( @startColor ), i ( @endColor )); // Konqueror
- cefndir - delwedd : - moz - llinol - graddiant ( @startColor , @endColor ); // FF 3.6+
- cefndir - delwedd : - ms - llinol - graddiant ( @startColor , @endColor ); // IE10
- cefndir - delwedd : - webkit - graddiant ( llinol , top chwith , gwaelod chwith , lliw - stop ( 0 % , @startColor ), lliw - stop ( 100 % , @endColor ) ); // Safari 4+, Chrome 2+
- cefndir - delwedd : - webkit - llinol - graddiant ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- cefndir - delwedd : - o - llinellol - graddiant ( @startColor , @endColor ); // Opera 11.10
- cefndir - delwedd : llinellol - graddiant ( @startColor , @endColor ); // Y safon
- }
- . cyfeiriadol ( @startColor : #555, @endColor: #333, @deg:45deg) {
- ...
- }
- . fertigol - tri - lliw ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Byddwch yn ffansi a pherfformiwch rywfaint o fathemateg i gynhyrchu cymysgeddau hyblyg a phwerus fel yr un isod.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // System Grid
- . cynhwysydd {
- lled : @siteWidth ;
- ymyl : 0 auto ;
- . clirfix ();
- }
- . colofnau ( @columnSpan : 1 ) {
- lled : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . gwrthbwyso ( @columnOffset : 1 ) {
- ymyl - chwith : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }