in English

fomba Fiasa

Mianara momba ireo fitsipika, paikady ary teknika ampiasaina amin'ny fananganana sy fikojakojana ny Bootstrap mba hahafahanao manamboatra sy manitatra azy io mora kokoa.

Raha manome fitsangatsanganana fampidirana ny tetikasa sy ny zavatra atolony ny pejy fanombohana, ity antontan-taratasy ity dia mifantoka amin'ny antony anaovanay ny zavatra ataonay ao amin'ny Bootstrap. Izy io dia manazava ny filozofiantsika amin'ny fananganana amin'ny tranonkala mba hahafahan'ny hafa mianatra amintsika, mandray anjara amin'ny anjarantsika ary manampy antsika hivoatra.

Mahita zavatra tsy mety, sa mety ho vita tsara kokoa? Sokafy olana iray — tianay ny hiresaka izany aminao.

FAMINTINANA

Hiditra amin'ny tsirairay amin'ireo bebe kokoa isika, fa amin'ny ambaratonga ambony, ity no mitarika ny fomba fiasantsika.

  • Ny singa dia tokony ho tompon'andraikitra ary voalohany amin'ny finday
  • Ny singa dia tokony hatsangana miaraka amin'ny kilasy fototra ary hitarina amin'ny alàlan'ny kilasy modifier
  • Ny fanjakana singa dia tokony hankatò ny mari-pamantarana z mahazatra
  • Raha azo atao dia aleo ny fampiharana HTML sy CSS toy izay JavaScript
  • Raha azo atao, ampiasao ny fitaovana ampiasaina amin'ny fomba mahazatra
  • Isaky ny azo atao, aza hadino ny fampiharana ny fepetra henjana HTML (mpifidy ankizy)

manaiky

Ny fomba famalian'i Bootstrap dia natsangana mba handraisana andraikitra, fomba iray antsoina matetika hoe mobile-first . Mampiasa an'io teny io izahay ao amin'ny dokanay ary miombon-kevitra aminy amin'ny ankapobeny, fa indraindray dia mety midadasika loatra. Na dia tsy ny singa rehetra aza dia tsy maintsy mamaly tanteraka ao amin'ny Bootstrap, ity fomba fandraisana andraikitra ity dia momba ny fampihenana ny fanoheran'ny CSS amin'ny alàlan'ny fanosehana anao hampiditra fomba rehefa mihamitombo ny viewport.

Eo amin'ny Bootstrap, ho hitanao mazava tsara izany amin'ny fanontanianay amin'ny haino aman-jery. Amin'ny ankabeazan'ny toe-javatra, mampiasa min-widthfanontaniana izay manomboka mihatra amin'ny toerana fiatoana manokana izahay ary mitondra any amin'ireo teboka ambony kokoa. Ohatra, a .d-nonemihatra hatramin'ny min-width: 0infinity. Amin'ny lafiny iray, ny a .d-md-nonedia mihatra avy amin'ny toerana fiatoana antonony sy ambony.

Indraindray isika dia hampiasa max-widthrehefa mila izany ny fahasarotan'ny singa iray. Indraindray dia mazava kokoa amin'ny fomba fiasa sy ara-tsaina ny fampiharana sy ny fanohanana ireo fanodinkodinana ireo noho ny fanoratana indray ny fiasa fototra avy amin'ny singantsika. Miezaka mametra io fomba fiasa io izahay, fa hampiasa azy io tsindraindray.

fianarana

Ho fanampin'ny Rebooty, takelaka fanamafisam-peo amin'ny navigateur, ny fombanay rehetra dia mikendry ny hampiasa kilasy ho mpifidy. Midika izany fa manaisotra ireo mpifidy karazana (oh, input[type="text"]) sy kilasy tsy misy ray aman-dreny (oh, .parent .child) izay mahatonga ny fomba voafaritra loatra ka tsy azo ihodivirana mora foana.

Noho izany, ny singa dia tokony hamboarina miaraka amin'ny kilasy fototra izay mitahiry tsiroaroa fananan-tany mahazatra, tsy azo ovaina. Ohatra, .btnary .btn-primary. Ampiasainay .btnamin'ny fomba mahazatra rehetra toy ny display, padding, ary border-width. Avy eo isika dia mampiasa modifiers toy .btn-primaryny manampy ny loko, ny afara, ny sisin-tany, sns.

Ny kilasin'ny modifier dia tsy tokony hampiasaina raha misy fananana na sanda maromaro hovaina amin'ny karazany maro. Tsy ilaina foana ny mpanova, koa aoka ho azo antoka fa tena mitahiry andalana misy kaody ianao ary misoroka ny fanovana tsy ilaina rehefa mamorona azy ireo. Ohatra tsara amin'ny mpanova dia ny kilasin'ny loko loha-hevitray sy ny habeny.

z-index mizana

Misy z-indexmizana roa ao amin'ny Bootstrap — singa ao anatin'ny singa iray ary singa manarona.

singa singa

  • Ny singa sasany ao amin'ny Bootstrap dia naorina miaraka amin'ny singa mifanindry mba hisorohana ny sisintany roa tsy misy fanovana ny borderfananana. Ohatra, vondrona bokotra, vondrona fampidirana, ary pagination.
  • Ireo singa ireo dia mizara z-indexambaratonga mahazatra amin'ny 0alalan'ny 3.
  • 0dia default (voalohany), 1dia :hover, 2dia :active/ .active, ary 3dia :focus.
  • Ity fomba fiasa ity dia mifanandrify amin'ny andrasantsika amin'ny laharam-pahamehana ambony indrindra amin'ny mpampiasa. Raha misy singa iray mifantoka dia eo imason'ny mpampiasa izany. Ny singa mavitrika no faharoa ambony indrindra satria manondro fanjakana. Fahatelo avo indrindra ny Hover satria manondro ny fikasan'ny mpampiasa izany, saingy saika ny zavatra rehetra dia azo apetraka.

Overlay singa

Ny Bootstrap dia ahitana singa maromaro izay miasa toy ny overlay karazana. Tafiditra ao anatin'izany, araka ny filaharan'ny avo indrindra z-index, ny fidina, ny navbar raikitra sy mipetaka, ny modals, ny toro-hevitra ary ny popover. Ireo singa ireo dia manana ny z-indexambaratongany manokana izay manomboka amin'ny 1000. Ity isa fanombohana ity dia nofidina tsy misy dikany ary natao ho toy ny mpanelanelana kely eo amin'ny fombantsika sy ny fomba mahazatra ny tetikasanao.

Ny singa overlay tsirairay dia mampitombo z-indexkely ny sandany amin'ny fomba ahafahan'ny fitsipiky ny UI mahazatra ahafahan'ny singa mifantoka na mihodinkodina ho hitan'ny mpampiasa amin'ny fotoana rehetra. Ohatra, ny modal dia fanakanana antontan-taratasy (ohatra, tsy afaka manao hetsika hafa ianao afa-tsy amin'ny fihetsik'ilay modal), noho izany dia apetrakay eo ambonin'ny navbars izany.

Mianara bebe kokoa momba izany ao amin'ny z-indexpejin'ny fandrafetana anay .

HTML sy CSS amin'ny JS

Isaky ny azo atao dia aleonay manoratra HTML sy CSS mihoatra ny JavaScript. Amin'ny ankapobeny, ny HTML sy CSS dia mamokatra kokoa ary azon'ny olona maro kokoa amin'ny ambaratonga traikefa samihafa. Ny HTML sy CSS koa dia haingana kokoa amin'ny navigateur anao noho ny JavaScript, ary amin'ny ankapobeny dia manome fampiasa betsaka ho anao ny navigateur anao.

Ity fitsipika ity dia ny kilasy voalohany JavaScript API mampiasa datany toetra. Tsy mila manoratra saika JavaScript ianao raha te hampiasa ny plugins JavaScript; fa manorata HTML. Vakio bebe kokoa momba an'io ao amin'ny pejin'ny fijerena JavaScript .

Farany, ny fombantsika dia miorina amin'ny fitondrantena fototra amin'ny singa mahazatra amin'ny tranonkala. Raha azo atao dia aleonay mampiasa izay omen'ny navigateur. Ohatra, azonao atao ny mametraka .btnkilasy amin'ny singa rehetra, fa ny ankamaroan'ny singa dia tsy manome sanda semantika na fampiasa amin'ny navigateur. Noho izany dia mampiasa <button>s sy <a>s isika.

Toy izany koa ny singa sarotra kokoa. Na dia afaka manoratra plugin validation ny endriny manokana aza izahay mba hanampiana kilasy amin'ny singa iray mifototra amin'ny toetran'ny fampidirana iray, ka mamela antsika hamolavola ny soratra hoe mena, dia aleontsika mampiasa ny :valid/ :invalidpseudo-elements omen'ny navigateur rehetra antsika.

Asa vaventy

Ny kilasin'ny fitaovana — mpanampy ao amin'ny Bootstrap 3 teo aloha — dia mpiara-miasa matanjaka amin'ny ady amin'ny bloat CSS sy ny fahombiazan'ny pejy. Ny kilasin'ny fampiasa matetika dia fampiarahana sanda fananana tokana tsy azo ovaina aseho ho kilasy (oh: .d-blockmaneho display: block;). Ny antson'izy ireo voalohany dia ny hafainganam-pandehan'ny fampiasana rehefa manoratra HTML ary mametra ny habetsaky ny CSS mahazatra tsy maintsy soratanao.

Raha ny momba ny CSS manokana, ny fitaovana dia afaka manampy amin'ny ady amin'ny fampitomboana ny haben'ny rakitra amin'ny alàlan'ny fampihenana ny sandan'ny fanananao miverimberina matetika ho kilasy tokana. Mety hisy fiantraikany lehibe eo amin'ny tetikasanao izany.

HTML flexible

Na dia tsy azo atao foana aza, dia miezaka izahay mba tsy ho dogmatika be loatra amin'ny fepetra HTML momba ny singa. Noho izany, mifantoka amin'ny kilasy tokana ao amin'ny mpifidy CSS izahay ary miezaka ny misoroka ireo mpifidy ankizy avy hatrany ( >). Izany dia manome anao fahafahana bebe kokoa amin'ny fampiharanao ary manampy amin'ny fitazonana ny CSS ho tsotra sy tsy dia voafaritra loatra.

Fifanarahana fehezan-dalàna

Code Guide (avy amin'ny mpiara-mamorona Bootstrap, @mdo) dia mirakitra ny fomba hanoratana ny HTML sy CSS amin'ny Bootstrap. Izy io dia mamaritra ny torolàlana momba ny fandrafetana ankapobeny, ny tsy fetezan'ny saina mahazatra, ny baikon'ny fananana sy ny toetra, ary ny maro hafa.

Mampiasa Stylelint izahay hampihatra ireo fenitra ireo sy ny maro hafa ao amin'ny Sass/CSS. Ny config Stylelint mahazatra anay dia loharano misokatra ary azon'ny hafa ampiasaina sy itarina.

Mampiasa vnu-jar izahay mba hampiharana HTML manara-penitra sy semantika, ary koa amin'ny fitadiavana lesoka mahazatra.