Mbinu

Jifunze kuhusu kanuni elekezi, mikakati, na mbinu zinazotumiwa kujenga na kudumisha Bootstrap ili uweze kubinafsisha na kuipanua kwa urahisi zaidi.

Ingawa kurasa za kuanza zinatoa ziara ya utangulizi ya mradi na kile unachotoa, hati hii inaangazia kwa nini tunafanya mambo tunayofanya katika Bootstrap. Inafafanua falsafa yetu ya kujenga kwenye wavuti ili wengine wajifunze kutoka kwetu, kuchangia nasi, na kutusaidia kuboresha.

Je! unaona kitu ambacho hakisikiki sawa, au labda kinaweza kufanywa vizuri zaidi? Fungua suala - tungependa kulijadili nawe.

Muhtasari

Tutaingia katika kila moja ya haya zaidi kote, lakini kwa kiwango cha juu, hii ndio inaongoza mbinu yetu.

• Vipengele vinapaswa kuwa sikivu na simu-kwanza
• Vipengele vinapaswa kujengwa kwa darasa la msingi na kuongezwa kupitia madarasa ya kurekebisha
• Majimbo ya vipengele yanapaswa kutii kipimo cha kawaida cha z-index
• Inapowezekana, pendelea utekelezaji wa HTML na CSS juu ya JavaScript
• Inapowezekana, tumia huduma juu ya mitindo maalum
• Inapowezekana, epuka kutekeleza masharti magumu ya HTML (viteuzi vya watoto)

Msikivu

Mitindo ya mwitikio ya Bootstrap imeundwa kuwa sikivu, mbinu ambayo mara nyingi hujulikana kama mobile-first . Tunatumia neno hili katika hati zetu na tunakubaliana nalo kwa kiasi kikubwa, lakini wakati fulani linaweza kuwa pana sana. Ingawa si kila kipengele lazima kiwe sikivu kabisa katika Bootstrap, mbinu hii sikivu inahusu kupunguza ubatilishaji wa CSS kwa kukusukuma kuongeza mitindo kadiri eneo la kutazama linavyozidi kuwa kubwa.

Katika Bootstrap, utaona hili kwa uwazi zaidi katika maswali yetu ya media. Katika hali nyingi, sisi hutumia min-widthhoja zinazoanza kutumika katika sehemu mahususi ya kuhitimisha na kuendelea kupitia sehemu za juu zaidi. Kwa mfano, .d-noneinatumika kutoka min-width: 0kwa infinity. Kwa upande mwingine, a .d-md-noneinatumika kutoka sehemu ya kati na juu.

Wakati fulani tutatumia max-widthwakati utata asili wa kijenzi unapohitaji. Wakati fulani, ubatilishaji huu huwa wazi zaidi kiutendaji na kiakili katika kutekeleza na kuunga mkono kuliko kuandika upya utendakazi wa msingi kutoka kwa vipengele vyetu. Tunajitahidi kupunguza mbinu hii, lakini tutaitumia mara kwa mara.

Madarasa

Kando na Washa Upya, laha ya mitindo ya kuhalalisha kivinjari, mitindo yetu yote inalenga kutumia madarasa kama viteuzi. Hii inamaanisha kuachana na viteuzi vya aina (kwa mfano, input[type="text"]) na madarasa ya wazazi wa nje (kwa mfano, .parent .child) ambayo hufanya mitindo kuwa mahususi sana kubatilisha kwa urahisi.

Kwa hivyo, vijenzi vinapaswa kujengwa kwa darasa la msingi ambalo huweka jozi za kawaida, zisizoweza kubatilishwa za thamani ya mali. Kwa mfano, .btnna .btn-primary. Tunatumia .btnkwa mitindo yote ya kawaida kama display, padding, na border-width. Kisha tunatumia virekebishaji kama .btn-primarykuongeza rangi, rangi ya usuli, rangi ya mpaka, n.k.

Madarasa ya kirekebishaji yanapaswa kutumika tu wakati kuna sifa au thamani nyingi za kubadilishwa katika vibadala vingi. Virekebishaji sio lazima kila wakati, kwa hivyo hakikisha kuwa unahifadhi mistari ya nambari na kuzuia ubatilishaji usio wa lazima wakati wa kuunda. Mifano nzuri ya virekebishaji ni madarasa yetu ya rangi ya mandhari na anuwai za saizi.

z-index mizani

Kuna z-indexmizani miwili katika Bootstrap-vipengele ndani ya kijenzi na vijenzi vinavyowekelea.

Vipengele vya vipengele

• Vipengee vingine kwenye Bootstrap vimejengwa kwa vipengee vinavyopishana ili kuzuia mipaka maradufu bila kurekebisha bordermali. Kwa mfano, vikundi vya vitufe, vikundi vya ingizo, na utaftaji.
• Vipengee hivi vinashiriki kiwango cha kawaida z-indexcha 0kupitia 3.
• 0ni chaguo-msingi (ya awali), 1ni :hover, 2ni :active/ .active, na , 3ni :focus.
• Mbinu hii inalingana na matarajio yetu ya kipaumbele cha juu cha mtumiaji. Ikiwa kipengele kimelenga, kinatazamwa na kinazingatiwa na mtumiaji. Vipengele vinavyotumika ni vya pili kwa juu kwa sababu vinaonyesha hali. Hover ni ya tatu kwa juu kwa sababu inaonyesha dhamira ya mtumiaji, lakini karibu kila kitu kinaweza kuelea.

Vipengele vya kufunika

Bootstrap inajumuisha vipengele kadhaa vinavyofanya kazi kama safu ya aina fulani. Hii inajumuisha, kwa mpangilio wa juu zaidi z-index, menyu kunjuzi, pau za urambazaji zisizobadilika na zinazonata, moduli, vidokezo vya zana na popover. Vipengee hivi vina z-indexmizani yao inayoanzia 1000. Nambari hii ya kuanzia ni ya nasibu na hutumika kama bafa ndogo kati ya mitindo yetu na mitindo maalum ya mradi wako.

Kila sehemu inayowekelea huongeza z-indexthamani yake kidogo kwa njia ambayo kanuni za kawaida za kiolesura huruhusu vipengele vilivyolengwa na mtumiaji kuendelea kuonekana kila wakati. Kwa mfano, modali ni uzuiaji wa hati (kwa mfano, huwezi kuchukua hatua nyingine yoyote isipokuwa kitendo cha modali), kwa hivyo tunaiweka juu ya pau zetu za urambazaji.

Jifunze zaidi kuhusu hili katika z-indexukurasa wetu wa mpangilio .

HTML na CSS juu ya JS

Inapowezekana, tunapendelea kuandika HTML na CSS juu ya JavaScript. Kwa ujumla, HTML na CSS ni nyingi zaidi na zinapatikana kwa watu wengi zaidi wa viwango tofauti vya uzoefu. HTML na CSS pia zina kasi zaidi katika kivinjari chako kuliko JavaScript, na kivinjari chako kwa ujumla hutoa utendaji mwingi kwako.

Kanuni hii ni API ya JavaScript ya daraja la kwanza ni datasifa. Huna haja ya kuandika karibu JavaScript yoyote ili kutumia programu-jalizi zetu za JavaScript; badala yake, andika HTML. Soma zaidi kuhusu hili katika ukurasa wetu wa muhtasari wa JavaScript .

Hatimaye, mitindo yetu inajengwa juu ya tabia za kimsingi za vipengele vya kawaida vya wavuti. Inapowezekana, tunapendelea kutumia kile ambacho kivinjari hutoa. Kwa mfano, unaweza kuweka .btndarasa kwenye takriban kipengele chochote, lakini vipengele vingi havitoi thamani yoyote ya kisemantiki au utendakazi wa kivinjari. Kwa hivyo badala yake, tunatumia <button>s na <a>s.

Vile vile huenda kwa vipengele ngumu zaidi. Ingawa tunaweza kuandika programu-jalizi yetu wenyewe ya uthibitishaji wa fomu ili kuongeza darasa kwa kipengele cha mzazi kulingana na hali ya ingizo, na hivyo kuturuhusu kuweka maandishi ya kusema mekundu, tunapendelea kutumia :valid/ :invalidvipengee bandia ambavyo kila kivinjari hutupa.

Huduma

Madarasa ya matumizi—ambao awali walikuwa wasaidizi katika Bootstrap 3—ni mshirika mkubwa katika kupambana na uvimbe wa CSS na utendakazi duni wa ukurasa. Darasa la matumizi kwa kawaida ni uoanishaji mmoja wa thamani ya mali usiobadilika unaoonyeshwa kama darasa (kwa mfano, .d-blockinawakilisha display: block;). Rufaa yao kuu ni kasi ya utumiaji wakati wa kuandika HTML na kupunguza kiwango cha CSS maalum ambacho unapaswa kuandika.

Hasa kuhusu CSS maalum, huduma zinaweza kusaidia kukabiliana na ongezeko la ukubwa wa faili kwa kupunguza jozi zako za thamani ya mali zinazorudiwa mara nyingi katika aina moja. Hii inaweza kuwa na athari kubwa kwa kiwango katika miradi yako.

HTML inayoweza kubadilika

Ingawa haiwezekani kila wakati, tunajitahidi kuepuka kuwa waaminifu kupita kiasi katika mahitaji yetu ya vipengele vya HTML. Kwa hivyo, tunazingatia madarasa ya pekee katika viteuzi vyetu vya CSS na kujaribu kuzuia wateuzi wa watoto mara moja ( >). Hii hukupa unyumbulifu zaidi katika utekelezaji wako na husaidia kuweka CSS yetu kuwa rahisi na isiyo maalum.