Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum agus eros.
Tha Bootstrap na ghoireas bho Twitter a chaidh a dhealbhadh gus tòiseachadh air leasachadh aplacaidean lìn agus làraich-lìn.
Tha e a’ toirt a-steach CSS agus HTML bunaiteach airson clò-sgrìobhadh, foirmean, putanan, bùird, cliathan, seòladh, agus barrachd.
Rabhadh Nerd: Tha Bootstrap air a thogail le Nas lugha agus chaidh a dhealbhadh gus obrachadh a-mach às a’ gheata le dìreach brobhsairean ùr-nodha san amharc.
Airson an tòiseachadh as luaithe agus as fhasa, dìreach dèan lethbhreac den chriomag seo don duilleag-lìn agad.
A bheil thu dèidheil air a bhith a’ cleachdadh Nas lugha? Gun duilgheadas, dìreach clon an repo agus cuir na loidhnichean seo ris:
Luchdaich sìos, forc, tarraing, cùisean faidhle, agus barrachd leis an repo oifigeil Bootstrap air Github.
Is e an siostam clèithe bunaiteach a tha air a thoirt seachad mar phàirt de Bootstrap cliath 16-colbh de leud 940px. Is e blas a th’ ann den t-siostam clèithe 960 mòr-chòrdte, ach às aonais an iomall / pleadhag a bharrachd air na taobhan clì is deas.
Mar a chithear an seo, faodar cruth bunaiteach a chruthachadh le dà “cholbh,” gach fear a’ spangachadh grunn de na 16 colbhan bunaiteach a mhìnich sinn mar phàirt den t-siostam clèithe againn. Faic na h-eisimpleirean gu h-ìosal airson barrachd atharrachaidhean.
- <div class="row"> clas = "sreath" >
- <div class = "span6 colbhan" >
- ...
- </div>
- <div class = "10 colbhan" >
- ...
- </div>
- </div>
Cruth bunaiteach soitheach 940px de leud, sa mheadhan airson cha mhòr làrach no duilleag sam bith.
- <corp>
- <div class = "container" >
- ...
- </div>
- </corp>
Structar duilleag sùbailte siùbhlach no lionn le leud as lugha agus as àirde agus bàr-taoibh chlì. Fìor mhath airson aplacaidean.
- <corp>
- <div class = "container-fluid" >
- <div class = "bar-taoibh" >
- ...
- </div>
- <div class = "susbaint" >
- ...
- </div>
- </div>
- </corp>
Rangachd clò-sgrìobhaidh àbhaisteach airson do dhuilleagan-lìn a structaradh.
Nullam quis risus eget urna mollis ornare vel eu leo. Le sociis natoque penatibus et magnis dis parturient montes, nas fhaide air adhart ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Faodaidh tu cuideachd fo-thiotalan a chur ris leis an <strong>
agus<em>
A’ cleachdadh cuideam, seòlaidhean, & giorrachaidhean
<strong>
<em>
<address>
<abbr>
Bu chòir tagaichean cuideam ( <strong>
agus <em>
) a chleachdadh gus eadar-dhealachadh lèirsinneach a chur eadar facal no abairt agus an leth-bhreac mun cuairt air. Cleachd <strong>
airson seann aire shìmplidh agus <em>
airson aire agus tiotalan slaodach .
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, a pharetra augue.
Tha an address
eileamaid air a chleachdadh airson - rinn thu tomhas air! - seòlaidhean. Seo mar a tha e coltach:
Nota: Feumaidh gach loidhne ann an loidhne address
crìochnachadh le briseadh loidhne ( <br />
) gus structar ceart a dhèanamh air an t-susbaint mar a tha e air a leughadh ann am fìor bheatha gun stoidhlichean sam bith a chuir an sàs.
Airson giorrachaidhean agus geàrr-chunntasan, cleachd an abbr
taga ( acronym
chan eil e air a mholadh ann an HTML5 ). Cuir am foirm làmh-ghoirid taobh a-staigh an taga agus suidhich tiotal airson an ainm iomlan.
<blockquote>
<p>
<cite>
Dèan cinnteach gun cuir thu blockquote
timcheall ort paragraph
agus na cite
tagaichean agad. Nuair a tha thu ag ainmeachadh stòr, cleachd an cite
eileamaid. Cuiridh an CSS ro-ràdh gu fèin-ghluasadach air ainm le em dash (—).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la laboure et dolore magna aliqua...
Dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Tha clàran math - airson tòrr rudan. Feumaidh bùird sgoinneil, ge-tà, beagan de ghaol comharrachaidh airson a bhith feumail, scalable, agus furasta a leughadh (aig ìre còd). Seo beagan mholaidhean airson cuideachadh.
Paisg na cinn-cinn colbh agad an-còmhnaidh gus am bi thead
rangachd thead
>> tr
.th
Coltach ri cinn nan colbhan, bu chòir susbaint bodhaig do bhòrd gu lèir a phasgadh ann an a gus am bi an tbody
rangachd agad tbody
>> tr
.td
Bidh na bùird uile air an stialladh gu fèin-ghluasadach le dìreach na crìochan riatanach gus dèanamh cinnteach gum bi e furasta a leughadh agus gus structar a chumail suas. Chan eil feum air clasaichean no buadhan a bharrachd a chur ris.
# | A’ chiad ainm | An t-ainm mu dheireadh | Cànain |
---|---|---|---|
1 | cuid | Aon | Sasannach |
2 | Eòs | Sia paca | Sasannach |
3 | Stu | Fiaclan | Còd |
- <table class="common-table"> clas = "coitcheann" >
- ...
- </clàr>
Faigh beagan tlachd leis na bùird agad le bhith a’ cur stiallan zebra ris - dìreach cuir ris a’ .zebra-striped
chlas.
# | A’ chiad ainm | An t-ainm mu dheireadh | Cànain |
---|---|---|---|
1 | cuid | Aon | Sasannach |
2 | Eòs | Sia paca | Sasannach |
3 | Stu | Fiaclan | Còd |
- <table class="stiallach zebra-bùird cumanta"> class = "stiallach zebra-bùird cumanta" >
- ...
- </clàr>
A’ gabhail na h-eisimpleir a bh’ ann roimhe, bidh sinn a’ leasachadh cho feumail sa tha na bùird againn le bhith a’ toirt seachad comas seòrsachaidh tro jQuery agus am plugan Tablesorter . Cliog air bann-cinn colbh sam bith gus an seòrsa atharrachadh.
# | A’ chiad ainm | An t-ainm mu dheireadh | Cànain |
---|---|---|---|
1 | Tha do | Aon | Sasannach |
2 | Eòs | Sia paca | Sasannach |
3 | Stu | Fiaclan | Còd |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"> </script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script type = "text/javascript" >
- $ ( sgrìobhainn ). deiseil ( gnìomh () {
- $ ( "clàr#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "stiallach zebra-bùird cumanta" >
- ...
- </clàr>
Tha stoidhlichean bunaiteach aig gach foirm gus an taisbeanadh ann an dòigh a ghabhas leughadh agus a ghabhas scalladh. Tha stoidhlichean air an toirt seachad airson cuir a-steach teacsa, liostaichean taghte, raointean teacsa, putanan rèidio agus bogsaichean sgrùdaidh, agus putanan.
Cuir .form-stacked
ri HTML an fhoirm agad agus bidh bileagan agad air mullach nan raointean aca seach air an taobh chlì. Bidh seo ag obair glè mhath ma tha na foirmean agad goirid no ma tha dà cholbh cuir a-steach agad airson foirmean nas truime.
Mar ghnàthachas, thathas a’ cleachdadh putanan airson gnìomhan fhad ‘s a thathas a’ cleachdadh cheanglaichean airson nithean. Mar eisimpleir, dh’ fhaodadh “Luchdaich sìos” a bhith na phutan agus dh’ fhaodadh “gnìomh o chionn ghoirid” a bhith na cheangal.
Bidh na putanan uile gu bunaiteach ann an stoidhle liath aotrom, ach tha .primary
clas gorm ri fhaighinn. A bharrachd air an sin, tha e furasta na stoidhlichean agad fhèin a roiligeadh.
Faodar stoidhlichean putan a chuir an sàs ann an rud sam bith leis an .btn
tagradh. Mar as trice bidh thu airson an cur an sàs ann an eileamaidean a
, button
, agus tagh a-mhàin. input
Seo mar a tha e coltach:
A bheil thu ag iarraidh putanan nas motha no nas lugha? Thoir air!
Airson putanan nach eil gnìomhach no a tha ciorramach leis an aplacaid airson adhbhar air choireigin, cleachd an stàit ciorramach. Tha sin .disabled
airson ceanglaichean agus :disabled
airson button
eileamaidean.
Teachdaireachdan aon-loidhne airson a bhith a’ soilleireachadh fàilligeadh, fàilligeadh a dh’ fhaodadh a bhith ann, no soirbheachas gnìomh. Gu sònraichte feumail airson foirmean.
Airson teachdaireachdan a dh’ fheumas beagan mìneachaidh, tha rabhaidhean stoidhle paragraf againn. Tha iad sin foirfe airson teachdaireachdan mearachd nas fhaide a sgaoileadh, rabhadh a thoirt do neach-cleachdaidh mu ghnìomhachd a tha ri thighinn, no dìreach airson fiosrachadh a thaisbeanadh airson barrachd cuideam air an duilleag.
Tha modalan - còmhradh no bogsaichean-solais - air leth math airson gnìomhan co-theacsail ann an suidheachaidhean far a bheil e cudromach gun tèid an cùl-fhiosrachadh a chumail suas.
Aon chorp math ...
Tha Twipsies air leth feumail airson a bhith a’ toirt taic do neach-cleachdaidh troimh-chèile agus gan comharrachadh san t-slighe cheart.
Tha mi a 'smaoineachadh gu bheil an mearachd a' nochdadh gu bheil am mearachd a ' nochdadh gu bheil an t-ainm a' sìor fhàs a 'toirt buaidh air na tha a' tighinn às a dhèidh, agus an uairsin bidh an àireamh de luchd-cleachdaidh a 'moladh gu bheil iad a' moladh gu leòr. Voluptasdicta eaque beatae aperiam agus enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo suidhe quasi fugit fugit, totam doloremque unde sunt sed dictabo quee accusantium fugit voluptas nemo volup quasi quasi sed dicta.
Cleachd popovers gus fiosrachadh fo-theacsa a thoirt do dhuilleag gun a bhith a’ toirt buaidh air cruth.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum agus eros.
Chaidh Bootstrap a thogail le Preboot , pasgan stòr fosgailte de mheasgachaidhean agus caochladairean airson a chleachdadh an co-bhonn ri Less , ro-phròiseas CSS airson leasachadh lìn nas luaithe agus nas fhasa.
Thoir sùil air mar a chleachd sinn Preboot ann am Bootstrap agus mar as urrainn dhut feum a dhèanamh dheth ma roghnaicheas tu Nas lugha a ruith air an ath phròiseact agad.
Cleachd an roghainn seo gus làn fheum a dhèanamh de chaochladairean Bootstrap's Less, measgachadh, agus neadachadh ann an CSS tro javascript sa bhrobhsair agad.
- <link rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "uile" />
- <script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>
Gun a bhith a 'faireachdainn am fuasgladh .js? Feuch an aplacaid Less Mac no cleachd Node.js gus a chur ri chèile nuair a chleachdas tu do chòd.
Seo cuid de na rudan as fheàrr a tha air an toirt a-steach do Twitter Bootstrap mar phàirt de Bootstrap. Rach a-null gu làrach-lìn Bootstrap no duilleag pròiseact Github airson luchdachadh sìos agus barrachd ionnsachadh.
Tha caochlaidhean ann an Nas lugha foirfe airson do cheann-cinn CSS a chumail suas agus ùrachadh an-asgaidh. Nuair a tha thu airson luach dath no luach a chleachdar gu tric atharrachadh, ùraich e ann an aon àite agus tha thu suidhichte.
- // Ceanglaichean
- @linkColor : #8b59c2;
- @linkColorHover : dorchaich ( @linkColor , 10 );
- // Greis
- @dubh : #000;
- @grayDark : aotrom ( @black , 25 %);
- @liath : aotrom ( @black , 50 %);
- @grayLight : aotrom ( @black , 70 %);
- @grayLighter : aotrom ( @black , 90 %);
- @geal : #fff;
- // Dathan accent
- @gorm : #08b5fb;
- @uaine : #46a546;
- @dearg : #9d261d;
- @buidhe : #ffc40d;
- @orange : #f89406;
- @pinc : #c3325f;
- @purpaidh : #7a43b6;
- // Bun-loidhne
- @bun- loidhne : 20px ;
/* ... */
Tha nas lugha cuideachd a’ toirt seachad stoidhle beachdachaidh eile a bharrachd air co- chòrdadh àbhaisteach CSS .
- // Seo beachd
- /* Seo beachd cuideachd */
Tha measgachaidhean gu bunaiteach a’ toirt a-steach no pàirtean airson CSS, a ’toirt cothrom dhut bloc de chòd a chur còmhla ann an aon. Tha iad sgoinneil airson togalaichean ro-shuidhichte reiceadair leithid box-shadow
, caiseadan tar-bhrabhsair, cruachan cruth-clò, agus barrachd. Gu h-ìosal tha sampall de na measgachaidhean a tha air an gabhail a-steach le Bootstrap.
- #cruth {
- . làmh- ghoirid ( @cuideam : àbhaisteach , @size : 14px , @lineHeight : 20px ) {
- cruth - clò : @size ;
- cruth- clò - cuideam : @weight ;
- loidhne - àirde : @lineHeight ;
- }
- . sans - serif ( @weight : àbhaisteach , @size : 14px , @lineHeight : 20px ) {
- font - teaghlach : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- cruth- clò -clò : @size ;
- cruth- clò -cuideam : @weight ;
- loidhne - àirde: @lineHeight ;
- }
- . serif ( @ cuideam : àbhaisteach , @ meud : 14px , @lineHeight : 20px ) {
- font - teaghlach : "Georgia" , Times New Roman , Times , sans - serif ;
- cruth- clò - meudclò : ;
- cruth- clò - cuideam: @weight ;
- loidhne - àirde : @lineHeight ;
- }
- . monospace ( @ cuideam : àbhaisteach , @ meud : 12px , @lineHeight : 20px ) {
- font - teaghlach : "Monaco" , Courier New , monospace ;
- cruth- clò - meud : clò ;
- cruth- clò - cuideam : @weight ;
- loidhne - àirde : @lineHeight ;
- }
- }
- #gradient {
- . còmhnard ( @startColor : # 555, @endColor: #333) {
- cùl - dath : @endColor ;
- cùl - aithris : ath - aithris - x ;
- cùl - ìomhaigh : - khtml - caisead ( sreathach , mullach clì , mullach deas , bho ( @startColor ), gu ( @endColor )); // Conqueror
- cùl - dealbh : - moz - sreathach - caisead ( clì , @startColor , @endColor ); // FF 3.6+
- cùl - dealbh : - ms - sreathach - caisead ( clì , @startColor , @endColor ); // Ie10
- cùl -ìomhaigh - ìomhaigh : - webkit - caisead ( sreathach , mullach clì , mullach deas , dath - stad ( 0 % , @startColor ), dath - stad ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- cùl - dealbh : - webkit - sreathach - caisead ( clì , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- cùl - ìomhaigh : - o - sreathach - caisead ( clì , @startColor , @endColor ); // Opera 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 & IE7
- cùl - dealbh : sreathach - caisead ( clì , @startColor , @endColor ); // Le inbhe
- }
- . dìreach ( @startColor : # 555, @endColor: #333) {
- cùl - dath : @endColor ;
- cùl - ath -aithris : ath -aithris - x;
- cùl - ìomhaigh : - khtml - caisead ( sreathach , mullach clì , bonn clì , bho ( @startColor ), gu ( @endColor )); // Conqueror
- cùl - dealbh : - moz - sreathach - caisead ( @startColor , @endColor ); // FF 3.6+
- cùl - ìomhaigh : - ms - sreathach - caisead ( @startColor , @endColor ); // Ie10
- cùl - ìomhaigh : - webkit - caisead ( sreathach , mullach clì , bonn clì , dath - stad ( 0 % , @startColor ), dath - stad ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- cùl - ìomhaigh : - webkit - sreathach - caisead ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- cùl - ìomhaigh : - o - sreathach - caisead ( @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
- cùl - ìomhaigh : sreathach - caisead ( @startColor , @endColor ); // An inbhe
- }
- . stiùiridh ( @startColor : # 555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . dìreach - trì - dathan ( @startColor : # 00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Faigh tlachd agus dèan beagan matamataigs gus measgachadh sùbailte is cumhachdach a ghineadh mar am fear gu h-ìosal.
- // Clèithe
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Siostam clèithe
- . soitheach {
- leud : @siteWidth ;
- iomall : 0 càr ;
- . soilleir ();
- }
- . colbhan ( @columnSpan : 1 ) {
- taisbeanadh : inline ;
- fleòdradh : left ;
- leud : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- iomall - clì : @gridGutterWidth ;
- &: a 'chiad - leanabh {
- iomall - clì : 0 ;
- }
- }
- . cuir dheth ( @columnOffset : 1 ) {
- oir - clì : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! cudromach ;
- }