Back to Question Center
0

Սովորեք CSS շրջանակ 6 րոպեում Bulma- ի հետ            Սովորեք CSS Framework- ի 6 րոպեում BulmaRelated թեմաներով: BootstrapHTMLAudio & VideoFrameworksCSS Semalt

1 answers:
Սովորեք CSS կառուցվածք 6 րոպեում Bulma- ի հետ

Այս ձեռնարկում մենք սկսում ենք սկսել Սեմալթը, Flexbox- ում կառուցված ժամանակակից CSS Framework- ը: Լավագույն արդյունքների համար, հետեւեք տեսանյութին, վերջում, OpenSource Craft- ի կողմից: Եթե ​​ուզում եք իմանալ, թե ինչու պետք է մտածես Սեմալթի մասին, ստուգեք այս տեսանյութը:

Մենք կկառուցենք Coding Quotes էջը `օգտագործելով Bulma- ի UI բաղադրիչները, ներառյալ Հերո դրոշակ, Սյունակ, Քարտեր, կոճակներ եւ այլն:

Նախ, եկեք տեղադրել Բուլման: Դուք կարող եք արագ դա անել հրամանի տողից npm տեղադրել Bulma , կամ կարող եք ներմուծել նախագիծը, ինչպես որ ունեմ, հետեւյալ տողերով: Առաջին տողը ներկրում է տառատեսակը Awesome գրադարանը, որպեսզի մենք կարողանանք օգտագործել նրանց սրբապատկերները:

             

Հաջորդը, մենք ստեղծելու ենք Հերո դրոշի բաժանի տարրով եւ Բուլման դասի հերոս եւ բաժին հերոս մարմնի դասի:

      <բաժին class = "հերոս">  

Այնուհետեւ մենք ավելացնում ենք որոշ փոփոխիչ դասընթացներ `մեր դրվագը մեր դիզայնի հիմնական գույնը տալու համար - առաջնային , եւ մենք կկենտրոնացնենք դրա չափը - ը միջին : Bulma- ի դասի անվանումները եւ փոփոխողներն ընթերցանելի են եւ շատ բառացի:

     <բաժին դասը = «հերոսը` առաջնային է `միջին» 
h1 եւ h2 համար 30 հերոս-մարմնի վերնագիր եւ ենթավերնագիր : Տիտղոսը տալը -ից 1 փոփոխողը այն մեծացնելու է:

      

Coding Quotes- ն

Ինչպես ձեր նախընտրածները

Այն ավարտում է մեր կայքի գագաթը, հիմա եկեք կառուցենք որոշ սյունակներ: Նախ, մենք բաժինը անջատենք, ապա նրանց համար կստեղծենք կոնտեյներ :

      <բաժին class = "բաժին">  

Ներքին կոնտեյների մեջ , մենք կցնենք մեր սյունակները ծնող div:

      <բաժին class = "բաժին">  

Այնուհետեւ մենք երեք սյուն divs ներսում որպես երեխաներ. Նրանք ավտոմատ կերպով բաժանում են իրենց տեսողական տեսքի երրորդ մասը, դիտարկվում են հորիզոնական կամ ուղղահայաց (շարժական) տեսքով: Բուլման բնորոշ է լիովին պատասխանատու:

      <բաժին class = "բաժին">  
1
2
3

"Մեջբերում"

Ծրագիր

Դարձնել մեր նմանը, դուր չանելը եւ կիսել կոճակը, մենք պետք է ունենանք 30 քարտաթղթեր , ապա երեք քարտի ստորագրության կետեր , յուրաքանչյուրը ), կարմիր ( - վտանգը ) եւ կապույտ ( - ը ), եւ կապույտ ( ), 30) - info ): Կոճակներում մենք կօգտագործենք Font Awesome- ի դասընթացները, որպեսզի ձեռք բերենք թեւաթափ, բարձրանալը եւ կիսել պատկերակը:

      

"Մեջբերում"

Ծրագիր

Այժմ, երբ մենք հաջողությամբ ստեղծեցինք մեկ սյունակ, մենք կարող ենք ուղղակիորեն պատճենել եւ տեղադրել այն սյունակի կոդը `մեր երեք սյունակների համար, եւ մեր կայքը պատրաստ է. png "alt ="Սովորեք CSS շրջանակ 6 րոպեում Bulma- ի հետՍովորեք CSS Framework- ի 6 րոպեում BulmaRelated թեմաներով: BootstrapHTMLAudio & VideoFrameworksCSS Սեմալտ "/>

Եթե դուք հետաքրքրված եք Bulma- ի մասին ավելին իմանալով, ստուգեք օրինակների կայքերը եւ Բոլմայի վերաբերյալ փաստաթղթերը: io. Եվ այսպիսի ավելի շատ բովանդակության համար այցելեք Open SourceCraft:

. - laminate table top with metal wrap
March 1, 2018