Ka yi la'akari da abin da ake kira euismod. Maecenas faucibus mollis interdum. Morbi leo risus, portac consectetur ac, vestibulum da eros.
Bootstrap kayan aiki ne daga Twitter wanda aka ƙera don fara haɓaka ayyukan yanar gizo da shafuka.
Ya haɗa da tushe CSS da HTML don rubutu, fom, maɓalli, teburi, grid, kewayawa, da ƙari.
Jijjiga Nerd: An gina Bootstrap tare da Ƙananan kuma an tsara shi don yin aiki daga ƙofar tare da masu bincike na zamani.
Don farawa mafi sauri da sauƙi, kawai kwafi wannan snippet cikin shafin yanar gizon ku.
Mai son amfani kaɗan? Babu matsala, kawai rufe repo kuma ƙara waɗannan layukan:
Zazzage, cokali mai yatsa, ja, batutuwan fayil, da ƙari tare da aikin Bootstrap repo akan Github.
A kwanakin farko na Twitter, injiniyoyi sun yi amfani da kusan kowane ɗakin karatu da suka saba da shi don biyan buƙatun gaba. Bootstrap ya fara ne azaman amsa ga ƙalubalen da aka gabatar da haɓaka cikin sauri yayin Hackweek na farko na Twitter.
Tare da taimako da ra'ayoyin injiniyoyi da yawa a Twitter, Bootstrap ya girma sosai don haɗawa ba kawai salo na asali ba, amma mafi kyawun ƙirar ƙirar gaba-gaba.
Kara karantawa akan dev.twitter.com ›
Ana gwada Bootstrap kuma ana goyan bayan manyan masu bincike na zamani kamar Chrome, Safari, Internet Explorer, da Firefox.
Bootstrap ya zo cikakke tare da haɗaɗɗen CSS, waɗanda ba a tattara ba, da samfuran misali.
Tsohuwar tsarin grid da aka bayar azaman ɓangare na Bootstrap shine grid mai faɗin 940px 16. Yana da ɗanɗano na mashahurin tsarin grid 960, amma ba tare da ƙarin gefe/padding a gefen hagu da dama ba.
Kamar yadda aka nuna a nan, za a iya ƙirƙira wani tsari na asali tare da "ginshiƙai" guda biyu, kowanne ya faɗi adadin ginshiƙai 16 da muka ayyana a matsayin wani ɓangare na tsarin grid ɗin mu. Dubi misalan da ke ƙasa don ƙarin bambancin.
- <div class = "jere" >
- <div class = "span6 ginshiƙai" >
- ...
- </div>
- <div class = "span10 ginshiƙai" >
- ...
- </div>
- </div>
Tsohuwar kuma mai sauƙi 940px-fadi, shimfidar wuri na tsakiya don kusan kowane gidan yanar gizo ko shafi da aka samar ta guda <div.container>
.
- <jiki>
- <div class = "kwantena" >
- ...
- </div>
- </ jiki>
Madadin, tsarin shafi mai sassauƙa mai sassauƙa tare da min- da max-fasa da mashigin gefen hagu. Mafi kyau ga apps da docs.
- <jiki>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "abun ciki" >
- ...
- </div>
- </div>
- </ jiki>
Madaidaicin matsayi na rubutu don tsara shafukan yanar gizonku.
Gabaɗayan grid ɗin rubutun ya dogara ne akan ƙananan masu canji guda biyu a cikin fayil ɗin preboot.less: @basefont
da @baseline
. Na farko shine girman font-girman da aka yi amfani da shi duka kuma na biyu shine tsayin layin tushe.
Muna amfani da waɗancan sauye-sauye, da wasu maths, don ƙirƙira margins, paddings, da tsayin layi na kowane nau'in mu da ƙari.
Nullam quis risus eget urna mollis ornare vel eu leo. Duk da haka, muna magana ne game da abin ban dariya da kuma ban mamaki. Nullam id dolor id nibh ultricies vehicula ut id elit.
Amfani da girmamawa, adireshi, & gajarta
<strong>
<em>
<address>
<abbr>
Ya kamata a yi amfani da alamun girmamawa ( <strong>
da <em>
) don nuna ƙarin mahimmanci ko jaddada kalma ko jumla dangane da kwafinta na kewaye. Yi amfani <strong>
da mahimmanci kuma <em>
don jaddada damuwa .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Lura: Har yanzu yana da kyau a yi amfani <b>
da <i>
alama a cikin HTML5 kuma ba dole ba ne a yi musu salo mai ƙarfi da rubutu ba, bi da bi (ko da yake idan akwai ƙarin ma'anar ma'anar, yi amfani da shi). <b>
ana nufin haskaka kalmomi ko jimloli ba tare da isar da ƙarin mahimmanci ba, yayin <i>
da galibin murya ne, kalmomin fasaha, da sauransu.
Ana <address>
amfani da kashi don bayanin tuntuɓar kakansa na kusa, ko duka jikin aikin. Ga yadda abin yake:
Lura: Kowane layi a cikin <address>
dole ne ya ƙare tare da karya-layi ( <br />
) ko a naɗe shi cikin alamar toshewa (misali, <p>
) don tsara abun ciki yadda ya kamata.
Don gajartawa da gajarta, yi amfani da <abbr>
tag ( <acronym>
an soke shi a cikin HTML5 ). Saka fom ɗin gajeriyar hannu a cikin alamar kuma saita take don cikakken suna.
<blockquote>
<p>
<small>
Don haɗa da blockquote, kunsa <blockquote>
kusa <p>
da <small>
alama. Yi amfani da <small>
kashi don faɗi tushen ku kuma za ku sami dash —
a gabansa.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dokta Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Tables suna da kyau-don abubuwa da yawa. Manyan teburi, duk da haka, suna buƙatar ɗan ƙaƙƙarfan soyayya don zama mai amfani, daidaitacce, da abin karantawa (a matakin lambar). Anan akwai 'yan shawarwari don taimakawa.
Koyaushe ku nannade rubutun ku a cikin <thead>
irin wannan matsayi shine <thead>
> <tr>
> <th>
.
Hakazalika da rubutun kan layi, duk abubuwan da ke cikin teburin ku yakamata a nannade su cikin ta <tbody>
yadda tsarinku ya kasance <tbody>
> <tr>
> <td>
.
Duk teburi za a tsara su ta atomatik tare da mahimman iyakoki kawai don tabbatar da karantawa da kiyaye tsari. Babu buƙatar ƙara ƙarin azuzuwan ko halaye.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Wasu | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
- <tebur>
- ...
- </text>
Samun ɗan zato tare da tebur ɗinku ta ƙara zakin zebra - ƙara .zebra-striped
aji kawai.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Wasu | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
Lura: Zebra-striping shine haɓakawa na ci gaba da ba samuwa ga tsofaffin masu bincike kamar IE8 da ƙasa.
- < class class = "zebra-striped" >
- ...
- </text>
Ɗaukar misalin da ya gabata, muna inganta fa'idar teburin mu ta hanyar samar da aikin rarrabawa ta hanyar jQuery da plugin ɗin Tablesorter . Danna kowane ginshiƙi don canza nau'in.
# | Sunan rana | Sunan mahaifa | Harshe |
---|---|---|---|
1 | Naku | Daya | Turanci |
2 | Joe | Packack | Turanci |
3 | Stu | Haushi | Lambar |
- <script src = "js/jquery/jquery.tablesorter.min.js" > </script>
- <rubutu >
- $ ( aiki () {
- $ ( "tebur# sortTableExample" ). tablesorter ({ irinList : [[ 1 , 0 ]]] );
- });
- </script>
- < class class = "zebra-striped" >
- ...
- </text>
Ana ba da kowane nau'i nau'i na asali don gabatar da su a cikin hanyar da za a iya karantawa da kuma daidaitawa. An ba da salo don shigar da rubutu, zaɓi lissafin, wuraren rubutu, maɓallan rediyo da akwatunan rajista, da maɓalli.
Ƙara .form-stacked
zuwa HTML na fom ɗin ku kuma za ku sami lakabi a saman filayen su maimakon hagu. Wannan yana aiki da kyau idan fom ɗinku gajeru ne ko kuna da ginshiƙai biyu na abubuwan shigar da sifofi masu nauyi.
A matsayin al'ada, ana amfani da maɓalli don ayyuka yayin da ake amfani da hanyoyin haɗin gwiwa don abubuwa. Misali, "Zazzagewa" na iya zama maɓalli kuma "aikin kwanan nan" na iya zama hanyar haɗi.
Duk maɓallai sun saba zuwa salon launin toka mai haske, amma ana iya amfani da nau'ikan azuzuwan aiki don nau'ikan launi daban-daban. Waɗannan azuzuwan sun haɗa da ajin shuɗi .primary
, ajin haske-blue .info
, ajin kore .success
, da kuma jan .danger
aji. Bugu da ƙari, mirgina salon ku abu ne mai sauƙi peasy.
Za a iya amfani da salon maɓalli ga kowane abu tare da abin da aka .btn
yi amfani da shi. Yawanci kuna son amfani da waɗannan zuwa kawai <a>
, <button>
, kuma zaɓi <input>
abubuwa. Ga yadda abin yake:
Kuna son manyan maɓalli ko ƙarami? Ku zo da shi!
Don maɓallan da ba su aiki ko ƙa'idar ta kashe su saboda dalili ɗaya ko wani, yi amfani da yanayin nakasa. Wato .disabled
don haɗin kai da :disabled
abubuwan <button>
abubuwa.
div.alert-message
Saƙonnin layi ɗaya don nuna gazawa, yuwuwar gazawa, ko nasarar aiki. Musamman amfani ga siffofin.
div.alert-message.block-message
Don saƙonnin da ke buƙatar ɗan bayani, muna da faɗakarwar salon sakin layi. Waɗannan cikakke ne don busa saƙonnin kuskure masu tsayi, gargaɗin mai amfani da wani mataki na jiran aiki, ko gabatar da bayanai kawai don ƙarin girmamawa akan shafin.
Modals — maganganu ko akwatunan haske — suna da kyau don ayyukan mahallin a cikin yanayi inda yana da mahimmanci a kiyaye mahallin baya.
Jiki mai kyau…
Twipsies suna da fa'ida sosai don taimaka wa mai amfani da ya ruɗe da nuna su ta hanya madaidaiciya.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut 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 ne voluptam veruptam .
Yi amfani da popovers don samar da bayanan rubutu zuwa shafi ba tare da shafar shimfidar wuri ba.
Ka yi la'akari da abin da ake kira euismod. Maecenas faucibus mollis interdum. Morbi leo risus, portac consectetur ac, vestibulum da eros.
An gina Bootstrap tare da Preboot , buɗaɗɗen tushen fakitin mixins da masu canji da za a yi amfani da su tare da Kadan , mai gabatar da CSS don ci gaban yanar gizo cikin sauri da sauƙi.
Duba yadda muka yi amfani da Preboot a Bootstrap da kuma yadda za ku iya amfani da shi idan kun zaɓi gudanar da ƙasa akan aikinku na gaba.
Yi amfani da wannan zaɓi don yin cikakken amfani da Bootstrap's Ƙananan masu canji, mixins, da gida a cikin CSS ta hanyar javascript a cikin burauzar ku.
- <link rel = "stylesheet/less" href = "kasa/bootstrap.less" kafofin watsa labarai = "duk" />
- <script src = "js/less-1.1.3.min.js" > </script>
Ba jin maganin .js? Gwada ƙarancin Mac app ko amfani da Node.js don haɗawa lokacin da kuka tura lambar ku.
Anan akwai wasu mahimman abubuwan abubuwan da aka haɗa a cikin Bootstrap na Twitter a matsayin wani ɓangare na Bootstrap. Jeka zuwa gidan yanar gizon Bootstrap ko shafin aikin Github don saukewa da ƙarin koyo.
Maɓalli a Ƙananan sun dace don kiyayewa da sabunta ciwon kai na CSS kyauta. Lokacin da kake son canza ƙimar launi ko ƙimar da ake yawan amfani da ita, sabunta shi a wuri ɗaya kuma an saita ku.
- // Hanyoyin haɗi
- @linkColor : #8b59c2;
- @linkColorHover : duhu ( @linkColor , 10 );
- // Gwarzo
- @baki : #000;
- @grayDark : haske ( @black , 25 %);
- @ launin toka : haske ( @black , 50 %);
- @GreyLight : haske ( @black , 70 %);
- @grayLighter : haske ( @black , 90 %);
- @farar : #ff;
- // Launukan lafazi
- @blue : #08b5fb;
- @ kore : #46a546;
- @ja : #9d261d;
- @rawaya : #ffc40d;
- @orange : #f89406;
- @ruwan ruwa : #c3325f;
- @m : #7a43b6;
- // Gishiri na Baseline
- @bawant : 13px ;
- @batun : 18px ;
Kadan kuma yana ba da wani salon sharhi ban da ma'auni na al'ada na CSS /* ... */
.
- // Wannan sharhi ne
- /* Wannan kuma comment ne */
Mixins sun haɗa da asali ko ɓangarori don CSS, yana ba ku damar haɗa toshe na lamba zuwa ɗaya. Suna da kyau don ƙayyadaddun kaddarorin masu siyarwa kamar box-shadow
, ginshiƙan mai binciken giciye, tarin rubutu, da ƙari. A ƙasa akwai samfurin mixins waɗanda aka haɗa tare da Bootstrap.
- # font {
- . shorthand ( @nauyi : al'ada , @ size : 14px , @lineHeight : 20px ) {
- font - girman : @ size ;
- font - nauyi : @nauyi ;
- layi - tsawo : @lineHeight ;
- }
- . sans - serif ( @weight : al'ada , @ size : 14px , @lineHeight : 20px ) {
- font - iyali : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - girman : @ size ;
- font - nauyi : @nauyi ;
- layi - tsawo : @lineHeight ;
- }
- . serif ( @nauyi : al'ada , @size : 14px , @lineHeight : 20px ) {
- font - iyali : "Georgia" , Times New Roman , Times , sans - serif ;
- font - girman : @ size ;
- font - nauyi : @nauyi ;
- layi - tsawo : @lineHeight ;
- }
- . monospace ( @ nauyi : al'ada , @ size : 12px , @lineHeight : 20px ) {
- font - iyali : "Monaco" , Courier New , monospace ;
- font - girman : @ size ;
- font - nauyi : @nauyi ;
- layi - tsawo : @lineHeight ;
- }
- }
- #gradient {
- . kwance ( @startColor : #555, @endColor: #333) {
- bango - launi : @endColor ;
- baya - maimaita : maimaita - x ;
- baya - hoto : - khtml - gradient ( mikakke , saman hagu , saman dama , daga ( @startColor ), zuwa ( @endColor )); // Konqueror
- baya - hoto : - moz - layi - gradient ( hagu , @startColor , @endColor ); // FF 3.6+
- baya - hoto : - ms - madaidaiciya - gradient ( hagu , @startColor , @endColor ); // IE10
- baya - hoto : - webkit - gradient ( mikakke , saman hagu , saman dama , launi - tsayawa ( 0 % , @startColor ), launi - tsayawa ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- baya - hoto : - webkit - linear - gradient ( hagu , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- baya - hoto : - o - madaidaiciya - gradient ( hagu , @startColor , @endColor ); // Opera 11.10
- baya - hoto : madaidaiciya - gradient ( hagu , @startColor , @endColor ); // Le Standard
- }
- . a tsaye ( @startColor : #555, @endColor: #333) {
- bango - launi : @endColor ;
- baya - maimaita : maimaita - x ;
- baya - hoto : - khtml - gradient ( mikakke , saman hagu , hagu kasa , daga ( @startColor ), zuwa ( @endColor )); // Konqueror
- baya - hoto : - moz - layi - gradient ( @startColor , @endColor ); // FF 3.6+
- baya - hoto : - ms - layi - gradient ( @startColor , @endColor ); // IE10
- baya - hoto : - webkit - gradient ( mikakke , saman hagu , hagu kasa , launi - tsayawa ( 0 % , @startColor ), launi - tsayawa ( 100 % , @endColor )); // Safari 4+, Chrome 2+
- baya - hoto : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- baya - hoto : - o - madaidaiciya - gradient ( @startColor , @endColor ); // Opera 11.10
- baya - hoto : madaidaiciya - gradient ( @startColor , @endColor ); // Ma'auni
- }
- . shugabanci ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . a tsaye - uku - launuka ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Yi zato kuma yi wasu lissafi don samar da sassauƙa da haɗaɗɗun haɗaɗɗiya kamar na ƙasa.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Tsarin Grid
- . akwati {
- fadin : @siteWidth ;
- gefe : 0 atomatik ;
- . tsaftacewa ();
- }
- . ginshiƙai ( @columnSpan : 1 ) {
- nisa : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . biya ( @columnOffset : 1 ) {
- gefe - hagu : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }