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:
- Learn Webpack – Tutorial complet pentru începători
- Învață Bootstrap 5 și SASS prin construirea unui site web de portofoliu – Curs complet
- Tutorial Sass pentru începători – CSS cu superputeri
- Tutorial aplicație web – JavaScript, Mobile First, Accesibilitate, Date persistente, Sass
- Folosind Parcel Bundler cu React
- Tutorial JavaScript – Creați un joc de cărți 🃏
- Tutorial HTML – Cum să faci un site web super simplu
- Învață JavaScript interactiv în NOUL Curriculum freeCodeCamp.org
- Cod Tetris: Tutorial JavaScript pentru începători
- Cum se creează o temă WordPress personalizată – Curs complet