Nguva yadarika, mumwe wangu Diego akanyora zvinyorwa zvakati wandei (senge izvi) nezve masisitimu ekugadzira zvemukati zvewebhu, kunyanya avo vane basa rekupa dhizaini. Pakupedzisira, mabhurawuza anongonzwisisa HTML yechimiro, CSS kudhizaini uye JavaScript kuti, sekutaura kwakaita mudzidzisi wangu nezve izvi, ratidza zviri mukati, kunyangwe paine masisitimu akaita seLaravel kana Django anoita seanotaura zvinopesana. Vanotaridzika. Zvatichaita pano nhasi kutsanangura patinofanira kusarudza imwe sarudzo kana imwe kuumba zvirimo zveHTML.
Kunyangwe Tailwind neBootstrap zvichitaurwa mumusoro wenyaya, izvo zvandinoreva nemazita iwayo ndizvo zvinotorwa nevamwe sepakati pakati peCSS yakachena uye furemu yakakodzera uye hurongwa hwakazara. Iwo ese ari maviri masisitimu, asi Bootstrap ine zvinenge zvese zvatoitwa uye Tailwind inobvumira kwakawanda kugadzirisa. Ndiri kutotarisira chimwe chezvikonzero zve sarudza imwe sarudzo kana imwe, asi ngatitange nenguva yekushandisa CSS.
Nguva yekusarudza CSS yakachena yewebhusaiti yangu
Pure CSS ndipo paunonyora mitemo yose nemaoko uchishandisa vanosarudza. Semuyenzaniso, pandinoda kuti bhaa yekufambisa ive nemashure matsvuku uye zvinongedzo kuti ive imwe ruvara uye yakanangana, ini ndinonyora chimwe chinhu senge chinotevera, ndichifungidzira kuti bhurawuza rinonangwa rinotsigira mitemo yakatenderedzwa.
nav {background-color:red; ruvara:blue; kumucheto:0; text-align: pakati; a {padding: 10px; ruvara:chena }}
Kune zviri pamusoro isu ticharamba tichiwedzera chimwe chinhu kana tichida icho chakareruka - uye chisina kugadzirwa zvakanaka, zvinofanirwa kutaurwa - navigation bar kuti inamire kumicheto, uye ndizvo. ita kuti mutumbi wegwaro usava nemiganhu. Zvikasadaro, mabhurawuza anoratidza muganho wakatenderedza zvese.
Uye zvakadaro nezvose.
- Izvo zvakanaka:
- Kushandisa yakachena CSS isu tine kutonga kwakakwana pane zvatinogadzira.
- Isu hatifanirwe kuwedzera akati wandei mafaera kuti zvese zvishande, ndoda kuisa chimiro mupurojekiti yedu.
- Zvakaipa:
- Kunyora ese CSS neruoko kunogona kunaka kune ONE SIMPLE purojekiti, asi kwete zvakanyanya kana purojekiti yakaoma kana isu tinofanirwa kugadzira akawanda mapeji ewebhu. Nguva dzose kutanga kubva mukutanga kunodhura, kusingabhadharwe, uye ndosaka maitiro aripo.
Nguva yekusarudza Bootstrap (kana imwe "yakazara" chimiro)
Bootstrap uye yakawanda CSS - uye isiri-CSS - masisitimu anogadzirwa kufunga nezvekubudirira. Vanowanzova nehuchenjeri mupfungwa inozivikanwa se "nyora zvishoma, ita zvakawanda." Semutemo wakajairwa, iwo maCSS mafaera, uye pamwe zvakare JavaScript, ane zvese zvakagadzirira kutanga kushandisa.
Kusiyana neCSS yakachena, inoshanda nevanosarudza, Bootstrap uye dzimwe sarudzo dzakafanana vanoshandisa makirasi anosanganisirwa mukati me tag chechimwe chinhu. Semuenzaniso, kana chatinoda kugadzira mhando 1 (h1) musoro une mavara ebhuruu, tsvuku kumashure uye kupatsanurwa kwemukati, isu tinofanirwa kunyora seizvi:
Ichi ndicho chinyorwa
Handizive kana iwe waona kuti ndakashandisa "yekutanga" uye "ngozi" kune iwo mavara, uye Bootstrap ine akati wandei emamenu, mabhatani uye mameseji. Kana isu tichida kushandisa vamwe, isu tinofanirwa kushandisa yedu pachedu CSS tonyora pamusoro pemitemo yeBootstrap. That or edit the framework's .css file.
- Izvo zvakanaka:
- Pane zvinyorwa uye mienzaniso kugadzira zvinhu nekukurumidza.
- Inopindura uye nhare kutanga.
- Mapeji ewebhu anogona kugadzirwa nekukurumidza, kunyangwe usingazive zvakawanda nezveBootstrap, kana iwe ukatora mienzaniso kubva muzvinyorwa zvayo.
- Zvakaipa:
- Kugadzira peji neBootstrap uye nekuzviita nekukurumidza kunojekesa zvawakashandisa pakugadzira kwayo.
- Yakanyanya kudiki customizable kana ukasashandisa yako wega mitemo uye tweaks.
Nguva yekusarudza Tailwind
Tailwind zvakare chimiro, asi vazhinji vanoiisa pakati peCSS yakachena nemamwe masisitimu nokuda kwokusava nechimiro chayo choga. Patinongoimisa, tinoona zvinhu senge misoro yese ine saizi yakafanana, uye imhaka yekuti ine yakanaka. Dzokerazve kuitira kuti mushandisi atonge zvese. Kuti uwane wemusoro mhando 1 kubva kuBootstrap muenzaniso, Tailwinds inotibvunza chimwe chinhu chakadai:
Ichi ndicho chinyorwa
Pane zvakafanana uye mutsauko kuBootstrap combo kirasi. Semuenzaniso, iyo yemukati margin kana padding Zvakafanana, imwe neimwe ine hukuru hwayo, asi syntax yakafanana, uye kirasi kuisa pakati pezvinyorwa zvakare. Kare zvakanyanya kusiyana kwemavara. Nepo Bootstrap nekusarudzika inongosanganisira mamwe mavara ari ekutanga, echipiri, njodzi, yambiro, nezvimwe, Tailwind inopa yakawedzera akasiyana siyana, uye iwe unogona kuseta ruvara runosvika 9 toni dzakasiyana. Kuti uvazive vese, zvakakosha kuverenga iyo zvinyorwa zvepamutemo.
- Izvo zvakanaka:
- Inonzi yakareruka kupfuura mamwe maframework.
- Isu tese tine masimba pane zvatinogadzira; hativimbi nehwaro hwakatsanangurwa.
- Mazita ekirasi akafanana neCSS yakachena.
- Zvakaipa:
- Kuiswa kwayo hakusi nyore. Kunyangwe inogona kushandiswa neCDN yakawedzerwa kune tag Musoro, izvi hazvikurudzirwe kune chirongwa chakakomba.
- Tailwind CSS chikamu chinyorwa pre-processor seSass uye isu tinoda faira rekuisa iro rinounganidza nekududzira zvese kune yakachena CSS.
- Iyo HTML haina kuchena zvakanyanya; Chinhu chine masitayera mazhinji chinogona kuva nekirasi hombe, asi ichi chine mhinduro, kunyangwe iwe uchifanirwa dzidza.
gidhi y flex neCSS zvimiro
Ichi chinhu chakanaka pamusoro pemafuremu uye chinhu chisina kunaka nezve CSS yakachena. Kune zvinyorwa zviri nyore kupfuura mamwe, uye control the gidhi y flex CSS inogona kuve yakaoma. Maframework akafunga nezve izvi, uye semuenzaniso Bootstrap ine mhinduro iri nyore yakavakirwa pamakoramu gumi nemaviri.
Ngatitii tine menyu kana chimwe chinhu chakafanana nezvinhu zvitanhatu uye tinoda kuti zvirongedzwe zvichienderana nehupamhi hwechidzitiro, inozivikanwawo se. viewport. Kuti uzviite neCSS yakachena unofanirwa kushandisa midhiya mibvunzo, yakaita semubvunzo unoitwa nebrowser nezverudzi rwechidzitiro chatiri kushanyira zvirimo. Iyo CSS yaizosanganisira @media kune yega yega skrini hupamhi, uye mune imwe neimwe yadzo isu taizofanira kugadzirisa iyo "grid". Bootstrap inogadzirisa izvi seizvi:
text text text text text text
Makirasi apfuura aizoratidza:
- Col-12: mune "yakajairika" saizi, iyo Bootstrap inotora nharembozha sezvidzitiro, chimwe nechimwe chinhu chinotora iyo yakazara (12/12), izvo zvichaita kuti pave nemitsara mitanhatu imwe pazasi imwe ichitora hupamhi hwese skrini. Inogona kusiiwa, sezvo iri iyo default maitiro.
- col-md-6-Pamasikirini epakati, chimwe nechimwe chinotora hafu (6/12), saka pachave nemaviri kumusoro, maviri pakati uye maviri pazasi.
- Col-lg-4-Pamasikirini makuru, chinhu chimwe nechimwe chichatora chetatu (4/12), saka pachave nematatu kumusoro uye matatu pasi.
- col-xl-2-Pamasikirini akakura, chinhu chimwe nechimwe chinotora chikamu chimwe-chitanhatu (2/12), saka sezvo paine zvinhu zvitanhatu, mutsara une zvese zvitanhatu ucharatidzwa.
Rumwe ruzivo nezve grid muBootstrap.
Mhedziso
Frameworks uye aya marudzi ezvishandiso Vakasikirwa kuvandudza, uye zvine musoro, pamusoro pezvose, patinenge tichida kugadzira nemazvo. Paunenge uchifanira kushandisa CSS diki, zvingangove zvakanaka kuti usanyanya kubatwa mukati mayo uye kuinamira mukati neruoko. Kana isu tichida chimwe chinhu nekukurumidza tisina hanya zvakanyanya nezvekugadzirisa, chimwe chinhu chakaita seBootstrap chinogona kuva mhinduro. Uye kana tichida kuve nekutonga kwakakwana, kunyangwe tichifanira kushanda zvishoma, nzvimbo yepakati, Tailwind.