Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!

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 фрэймворкийг хамтдаа судлан, вэб хөгжүүлэх ур чадвараа шинэ түвшинд гаргацгаая. Сургалтаараа эргэн уулзая.
Доорхи видеог тоглуулж эхний видео хичээлийг үзнэ үү

   Хичээлүүд :   

  1. 19:05
    Эхлэл. Bootstrap-ын тухай
  2. 29:18
    VS Code editor суулгах, тохируулах
  3. 28:57
    VS Code editor-т extention-ууд суулгах
  4. 8:25
    Bootstrap 5 framework-ийг implement хийх, тестлэх
  5. 7:18
    Bootstrap-ын grid системийн бүтэцтэй танилцацгаая
  6. 16:19
    Bootstrap-ын breakpoint-ууд, grid-ийн хэмжээ
  7. 4:48
    Col-ын өргөний талаар
  8. 5:09
    Node.js суулгах, package.json файл үүсгэх
  9. 11:39
    NPM ашиглан Bootstrap, Bootstrap icons суулгах, Sass-ын тохиргоо
  10. 4:53
    Col-ын өргөнийг доторх контентод нь тааруулан автоматаар өөрчлөх
  11. 4:16
    Col-ыг дараагийн мөр рүү шилжүүлэх өвөрмөц арга
  12. 2:59
    Col-уудыг wrap хийх
  13. 5:31
    Col-уудын дарааллыг хүссэнээрээ өөрчлөх
  14. 4:07
    Col offset гэж юу вэ?
  15. 4:34
    Col-уудыг босоо тэнхлэгийн дагуу зэрэгцүүлэх
  16. 5:04
    Col-уудыг хэвтээ тэнхлэгийн дагуу зэрэгцүүлэх
  17. 15:42
    Bootstrap-ын margin, padding классууд. Documentation-ийг хэрхэн ойлгож унших вэ?
  18. 4:19
    Row-cols класс ямар үүрэгтэй вэ?
  19. 4:49
    Grid системд gutter тавьж өгөх
  20. 4:56
    Bootstrap grid системийн Nesting гэж юу вэ?
  21. 5:52
    Responsive болон Fluid container-ууд
  22. 11:38
    Bootstrap-ын theme color-уудтай танилцая
  23. 14:16
    Bootstrap-ын component-ууд бүлэг. Alert component
  24. 12:25
    Badge component-ийг хэрэглэх зарим жишээ
  25. 9:20
    Breadcrumb component гэж юу вэ?
  26. 13:31
    Button component
  27. 14:09
    Button group component
  28. 15:05
    Card component. VS code-ийн Bootstrap code snippet-ийг хэрхэн ашиглах вэ?
  29. 4:39
    Close button component
  30. 17:37
    Carousel component ашиглан slide show хийх
  31. 11:13
    Collapse component
  32. 9:46
    Accordion component
  33. 11:15
    Үндсэн Nav component
  34. 14:23
    Tabs, Pills төрлийн Nav component-ийг Javascript plugin ашиглан ажиллуулж үзэх
  35. 12:53
    Dropdown цэс хийх
  36. 11:05
    List-group component
  37. 16:41
    Modal component
  38. 21:34
    Navbar component ашиглан үндсэн цэсийг хийх
  39. 8:59
    Pagination component
  40. 7:49
    Popover component. Tooltip болон Popover юугаараа ялгаатай вэ?
  41. 9:59
    Progress bar-ыг хэрхэн хийх вэ?
  42. 8:58
    Placeholder-ийн хэрэглээ
  43. 14:02
    Scrollspy component
  44. 5:57
    Spinner component
  45. 7:25
    Tooltip component
  46. 16:57
    Toast component
  47. 12:56
    Bootstrap 5-ын шинэ component Offcanvas
  48. 30:59
    Төсөл 1. Компанийн Landing page. Ажлын орчноо бэлдэх. Node-sass тохируулах. Bootstrap-ыг customize хийх тухай дэлгэрэнгүй ярилцая
  49. 5:57
    Display классуудын тухай
  50. 15:16
    Flex utility класс
  51. 15:44
    Үндсэн цэсийг хийх
  52. 10:28
    Bootstrap-ын Typography
  53. 18:19
    Text-ийн хэлбэр хэмжээг хэрхэн өөрчлөх вэ? Text utility классууд
  54. 17:17
    HTML элементийг вэб хуудсын хүссэн хэсэгт байршуулах Position utility классууд
  55. 21:29
    Нүүр хуудасны Hero section-ийг хийх
  56. 17:01
    Нүүр хуудасны Бүтээгдэхүүн section-ийг хийх. Нэгдүгээр хэсэг
  57. 16:48
    Нүүр хуудасны Бүтээгдэхүүн section-ийг хийх. Хоёрдугаар хэсэг
  58. 20:17
    Нүүр хуудасны Бидний давуу тал section-ийг хийх
  59. 28:36
    Footer section-ыг хийх
  60. 10:56
    Copyright bar
  61. 20:35
    Bootstrap-ын Utility API гэж юу вэ?
  62. 15:46
    Тодорхой нэг өнгийн utility class-уудыг utility API ашиглан хэрхэн generate хийх вэ?
  63. 20:36
    Bootstrap-ын өнгөний utility class-уудыг бүгдийг generate хийх
  64. 22:53
    Бидний тухай хуудас. Нэгдүгээр хэсэг. Удирдлагын баг section
  65. 19:38
    Бидний тухай хуудас. Хоёрдугаар хэсэг. Захиралууд section
  66. 23:08
    Бидний тухай хуудас. Гуравдугаар хэсэг. CTA section. Өөрсдийн фонтын хэмжээг нэмэх, width классын responsive хувилбаруудыг generate хийх

Сагсанд хийх

1234.mn платформоос програмчлалын сургалт үзэх дараалал
Нэгдүгээр хэсэг

1234.mn платформоос програмчлалын сургалт үзэх дараалал
Хоёрдугаар хэсэг