Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
2010 онд Twitter-т ажилладаг 2 залуу нийлж, тухайн үед жинхэнэ толгойны өвчин болоод байсан вэбийн интерфэйс хөгжүүлэх үйл явцыг хөнгөвчлөх зорилготой бяцхан төсөл эхлүүлсэн нь өдгөө дэлхий дээрх хамгийн олон хэрэглэгчидтэй, хамгийн өргөн ашиглагддаг CSS фрэймворк болох Bootstrap байсан юм.
Өнөөдөр тэрхүү бяцхан төсөл цар хүрээгээрээ асар том болж хөгжжээ. Анх Twitter Blueprint нэртай байсан Bootstrap нь дэлхий дээрх хамгийн анхны CSS фрэймворкуудын нэг билээ. Бусдаас ялгарах гол давуу тал нь илүү найдвартай ажиллагаа, тасралтгүй хөгжүүлэлт байв. Одоо ч гэсэн хамгийн их хөгжүүлэлт хийгддэг, support сайтай фрэймворк хэвээрээ байна.
BuiltWith сайтын судалгаанаас харахад интернэтэд одоо ашиглагдаж буй нийт вэб сайтуудын 20.6%, Javascript library-бүхий вэбүүдийн 26.9%-ийг Bootstrap ашиглан хийсэн байдаг бөгөөд нийт фрэймворкийн зах зээлийн 72%-ийг дангаараа эзэлсээр. Мянган мянган алдартай компаниуд энэхүү фрэймворкийг ашигладаг бөгөөд тэдний тоонд Linkedin, Twitter, Spotify, Snapchat, Udemy, Baidu, Zoom, Netflix компаниуд ч багтаж байгаа нь гайхалтай. Энэ нь юуг илэрхийлж байна вэ гэхээр хэдийгээр дэлхийн шилдэг CSS фрэймворк гэсэн байр сууриа Tailwind-д алдсан ч гэсэн зах зээлд эзлэх хувь хэмжээгээрээ хамгийн супер нь хэвээрээ байна гэсэн үг. Тиймээс та вэб хөгжүүлэгч болоод, ямар ч ажлын байранд очсон бай Bootstrap-аар хийсэн вэбтэй үргэлж нүүр тулах болно. Bootstrap-ыг мэддэггүй бол та бусдаас нэг алхам хойно явна гэсэн үг.
Тэгвэл бид таныг бусадтай мөр зэрэгцэн явахад чинь туслахаар Bootstrap 5-ын шинэхэн сургалтыг нээж байгаагаа дуулгахад таатай байна. Манай сайт дээр байгаа Tailwind, Bulma, Bootstrap гэсэн CSS фрэймворкуудын сургалтыг үзсэнээр та жинхэнэ орчин үеийн front-end developer болон хөгжих юм.
Та энэ сургалтаар юу сурч мэдэх вэ?
• Boostrap-ийн бүх классууд, component-уудтай танилцаж, тэдгээрийг хэрхэн үр дүнтэй зөв ашиглах арга барилд суралцана.
• Бүх төрлийн вэб сайтыг mobile-first философийн дагуу хийж сурна.
• Bootstrap-ын үндсэн style-уудыг өөрийн бичсэн custom style-уудаар өргөтгөн ажиллуулж сурна.
• Мөн Bootstrap 5 CSS framework-оо ашиглан 5 ширхэг бүрэн responsive вэб сайтуудыг эхнээс нь дуустал өөрсдөө хийж үзнэ.
Энэ сургалтыг үзэхэд ямар мэдлэг шаардлагатай вэ?
- Танаас HTML, CSS-ийн анхан шатны мэдлэгүүд шаардагдана. Хэрэв та эдгээрийг сайн мэдэхгүй, судлах шаардлагатай бол 1234.mn дээр байгаа “HTML5, CSS3-ыг эхнээс нь дуустал” болон “Ахисан төвшний HTML CSS, Front-End мастерын нууц” сургалтуудыг нэмж үзвэл илүү тохиромжтой. Та уг хоёр сургалтыг урьдчилан үзсэнээр HTML, CSS-ийг бүрэн мэддэг болох юм. Хэрэв HTML, CSS-ийн тодорхой мэдлэгтэй бол шууд Bootstrap-аа судлаж эхлэхэд бэлэн гэсэн үг.
Энэ сургалт хэнд зориулагдсан бэ?
- Найдвартай ажиллагаатай, бүрэн responsive вэб сайтуудыг маш богино хугацаанд, хялбархан хийж сурахаас гадна CSS фрэймворкуудын үйл ажиллагаа, зарчмыг гүнзгий судлахыг хүссэн бүх хүмүүст зориулагдсан.
Энэхүү сургалт нь урьдчилсан захиалгаар нээгдэж байгаа билээ. Урьдчилсан захиалгын давуу тал нь тухайн сургалтыг илүү хямд үнээр худалдан авч, яг хийгдэж байх явцад нь дагаж үзэх юм. Багш өдөрт 1-5 хичээлийг нэмэх байдлаар явдаг. Сургалт бүрэн хийгдэж дууссаны дараа бусад сургалтуудтай ижил үнэтэй болж үнэ нь нэмэгдэх болно.
За ингээд хамгийн түгээмэл ашиглагддаг CSS фрэймворкийг хамтдаа судлан, вэб хөгжүүлэх ур чадвараа шинэ түвшинд гаргацгаая. Сургалтаараа эргэн уулзая.
Хичээлүүд :
-
19:05Эхлэл. Bootstrap-ын тухай
-
29:18VS Code editor суулгах, тохируулах
-
28:57VS Code editor-т extention-ууд суулгах
-
8:25Bootstrap 5 framework-ийг implement хийх, тестлэх
-
7:18Bootstrap-ын grid системийн бүтэцтэй танилцацгаая
-
16:19Bootstrap-ын breakpoint-ууд, grid-ийн хэмжээ
-
4:48Col-ын өргөний талаар
-
5:09Node.js суулгах, package.json файл үүсгэх
-
11:39NPM ашиглан Bootstrap, Bootstrap icons суулгах, Sass-ын тохиргоо
-
4:53Col-ын өргөнийг доторх контентод нь тааруулан автоматаар өөрчлөх
-
4:16Col-ыг дараагийн мөр рүү шилжүүлэх өвөрмөц арга
-
2:59Col-уудыг wrap хийх
-
5:31Col-уудын дарааллыг хүссэнээрээ өөрчлөх
-
4:07Col offset гэж юу вэ?
-
4:34Col-уудыг босоо тэнхлэгийн дагуу зэрэгцүүлэх
-
5:04Col-уудыг хэвтээ тэнхлэгийн дагуу зэрэгцүүлэх
-
15:42Bootstrap-ын margin, padding классууд. Documentation-ийг хэрхэн ойлгож унших вэ?
-
4:19Row-cols класс ямар үүрэгтэй вэ?
-
4:49Grid системд gutter тавьж өгөх
-
4:56Bootstrap grid системийн Nesting гэж юу вэ?
-
5:52Responsive болон Fluid container-ууд
-
11:38Bootstrap-ын theme color-уудтай танилцая
-
14:16Bootstrap-ын component-ууд бүлэг. Alert component
-
12:25Badge component-ийг хэрэглэх зарим жишээ
-
9:20Breadcrumb component гэж юу вэ?
-
13:31Button component
-
14:09Button group component
-
15:05Card component. VS code-ийн Bootstrap code snippet-ийг хэрхэн ашиглах вэ?
-
4:39Close button component
-
17:37Carousel component ашиглан slide show хийх
-
11:13Collapse component
-
9:46Accordion component
-
11:15Үндсэн Nav component
-
14:23Tabs, Pills төрлийн Nav component-ийг Javascript plugin ашиглан ажиллуулж үзэх
-
12:53Dropdown цэс хийх
-
11:05List-group component
-
16:41Modal component
-
21:34Navbar component ашиглан үндсэн цэсийг хийх
-
8:59Pagination component
-
7:49Popover component. Tooltip болон Popover юугаараа ялгаатай вэ?
-
9:59Progress bar-ыг хэрхэн хийх вэ?
-
8:58Placeholder-ийн хэрэглээ
-
14:02Scrollspy component
-
5:57Spinner component
-
7:25Tooltip component
-
16:57Toast component
-
12:56Bootstrap 5-ын шинэ component Offcanvas
-
30:59Төсөл 1. Компанийн Landing page. Ажлын орчноо бэлдэх. Node-sass тохируулах. Bootstrap-ыг customize хийх тухай дэлгэрэнгүй ярилцая
-
5:57Display классуудын тухай
-
15:16Flex utility класс
-
15:44Үндсэн цэсийг хийх
-
10:28Bootstrap-ын Typography
-
18:19Text-ийн хэлбэр хэмжээг хэрхэн өөрчлөх вэ? Text utility классууд
-
17:17HTML элементийг вэб хуудсын хүссэн хэсэгт байршуулах Position utility классууд
-
21:29Нүүр хуудасны Hero section-ийг хийх
-
17:01Нүүр хуудасны Бүтээгдэхүүн section-ийг хийх. Нэгдүгээр хэсэг
-
16:48Нүүр хуудасны Бүтээгдэхүүн section-ийг хийх. Хоёрдугаар хэсэг
-
20:17Нүүр хуудасны Бидний давуу тал section-ийг хийх
-
28:36Footer section-ыг хийх
-
10:56Copyright bar
-
20:35Bootstrap-ын Utility API гэж юу вэ?
-
15:46Тодорхой нэг өнгийн utility class-уудыг utility API ашиглан хэрхэн generate хийх вэ?
-
20:36Bootstrap-ын өнгөний utility class-уудыг бүгдийг generate хийх
-
22:53Бидний тухай хуудас. Нэгдүгээр хэсэг. Удирдлагын баг section
-
19:38Бидний тухай хуудас. Хоёрдугаар хэсэг. Захиралууд section
-
23:08Бидний тухай хуудас. Гуравдугаар хэсэг. CTA section. Өөрсдийн фонтын хэмжээг нэмэх, width классын responsive хувилбаруудыг generate хийх
-
16:46Өндөр өргөний хэмжээ тавих utility классуудыг илүү олныг нэмж үүсгэе
-
21:25Бүтээгдэхүүн үйлчилгээ хуудас. Нэгдүгээр хэсэг
-
13:57Бүтээгдэхүүн үйлчилгээ хуудас. Хоёрдугаар хэсэг
-
11:59Завсарлага. Bootstrap-ын form классуудтай танилцацгаая. Form-control
-
9:38Form-select класс
-
15:02Checkbox болон Radio button
-
5:14Файл upload хийх форм. Файл хуулах товчлуурыг өөрсдийн аргаар хийж үзэх
-
6:40Range төрлийн input element
-
9:47Input group гэж юу вэ? Түүнийг хэрхэн ашиглах вэ?
-
9:41Bootstrap-ын form layout-ын тухай товчхон
-
14:33Form validation гэж юу вэ? Default алдааны мессежийг өөрсдийнхөөр солих
-
20:11Харилцагчдын сэтгэгдэл хуудас
-
16:14Холбоо барих хуудас. Эхний хэсэг
-
17:32Холбоо барих хуудас. Төгсгөл хэсэг
-
10:15NPM package-уудыг глобал байдлаар яаж суулгах вэ? Үүний давуу тал. Float utility класс
-
7:54Interactions utility классуудын тухай
-
5:04Overflow utility классууд
-
5:05Shadow utility классууд
-
8:16Элементийг босоо тэнхлэгийн дагуу зэрэгцүүлэхэд ямар utility класс ашиглах вэ?
-
4:31visible болон invisible классууд. invisible класс нь d-none классаас юугаараа ялгаатай вэ?
-
6:44Clearfix классын зориулалт
-
4:04Colored links. Вэб дээрх линкийн өнгийг text-color классаар өөрчлөх нь зөв үү, буруу юу? Хариултыг нь олцгооё
-
6:05Элементийн харьцааг хадгалах Ratio helper класс. Хэдэн төрлийн харьцаа байдаг вэ?
-
7:44Position helper классууд
-
4:01Босоо хязгаарлагч зураас зурах vr helper класс
-
8:47Bootstrap-ын stack класс гэж юу вэ? Stack-ийн зориулалт
-
5:17Дурын элемент, компонентийг линк болгон хувиргах
-
5:08Урт контентыг хураангуйлж харуулах text-truncate класс
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын
хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2824 | Үнэ:
49,900₮
|
|
BULMA Орчин үеийн CSS framework
Хугацаа: 22 цаг 29 мин | Сурагчид: 310 | Үнэ:
49,900₮
|
|
Ахисан төвшний HTML CSS, FRONT-END мастерын
нууц
Хугацаа: 30 цаг 49 мин | Сурагчид: 1389 | Үнэ:
49,900₮
|
|
Tailwind - Дэлхийн хамгийн шилдэг CSS
framework
Хугацаа: 14 цаг 59 мин | Сурагчид: 646 | Үнэ:
49,900₮
|
|
CSS animation супер хийж сурцгаая
Хугацаа: 26 цаг 3 мин | Сурагчид: 464 | Үнэ:
49,900₮
|
|
== Сурагчдын сэтгэгдлүүд ==
Хичээлийн татаж авах хэсэг хаана байгаа юм бол?