Skip to content

Învață Bootstrap creând o temă de administrare personalizată – Tutorial intermediar

Învață Bootstrap creând o temă de administrare personalizată – Tutorial intermediar

Aflați cadrul CSS Bootstrap cu acest tutorial complet. În acest curs intermediar, veți învăța Bootstrap creând o temă bootstrap personalizată de la zero folosind webpack. Vom crea o temă de administrare.

Mai întâi, vom configura npm și webpack, astfel încât să putem configura fișierele sursă ale Bootstrap care sunt scrise în SASS. În continuare, vom acoperi elementele de bază ale Bootstrap și vom crea câteva șabloane Bootstrap de bază care sunt comune în formularele de administrare. În cele din urmă, vom personaliza tema scriind stiluri personalizate și suprascriind o parte din JavaScript Bootstrap

💻 Cod: https://github.com/wilsmex/hq-admin

🎥 Videoclip de Andrew Wilson. Urmăriți canalul său de YouTube: https://www.youtube.com/channel/UCETveVX7TPauIupxYz6sFtA

⭐️ Conținutul cursului ⭐️
Partea 1
⌨️ (2:03) inițializați git
⌨️ (2:15) inițializați npm
⌨️ (5:06) inițializați pachetul web
⌨️ (6:52) inițializați fontul minunat
⌨️ (7:39) fișier de configurare a pachetului web
⌨️ (9:04) inițializați bootstrap sass și fișierele necesare asociate
⌨️ (15:10) configurați directorul și structura proiectului src
⌨️ (22:40) configurați webpack.config.js
⌨️ (38:50) configurați fișierul index.html
⌨️ (52:40) configurați fișierele noastre Sass și importați fișierele Bootstrap Sass

Partea 2
⌨️ (1:04:33) Elementele de bază ale grilei Bootstrap
⌨️ (1:11:20) Noțiuni de bază pentru formularul Bootstrap
⌨️ (1:25:00) Noțiuni de bază pentru tabelul Bootstrap
⌨️ (1:31:03) Elementele de bază ale cardului Bootstrap
⌨️ (1:38:20) Butoane de bootstrap, alerte, dialoguri

Partea 3
⌨️ (1:41:50) configurați structura HTML a aplicației
⌨️ (1:55:03) CSS pentru antetul de navigare
⌨️ (2:08:35) CSS pentru bara laterală
⌨️ (2:19:35) Ignorați valorile implicite de bootstrap
⌨️ (2:26:20) Adăugați capacitatea de răspuns și ascunderea automată a barei laterale
⌨️ (2:39:16) Adăugați comutatorul mobil prin CSS
⌨️ (2:43:45) Adăugați javascript de comutare mobil

Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org

Citiți sute de articole despre programare: https://www.freecodecamp.org/news

Cursuri interesante:

Leave a Reply

Your email address will not be published. Required fields are marked *