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

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 хийх
  67. 16:46
    Өндөр өргөний хэмжээ тавих utility классуудыг илүү олныг нэмж үүсгэе
  68. 21:25
    Бүтээгдэхүүн үйлчилгээ хуудас. Нэгдүгээр хэсэг
  69. 13:57
    Бүтээгдэхүүн үйлчилгээ хуудас. Хоёрдугаар хэсэг
  70. 11:59
    Завсарлага. Bootstrap-ын form классуудтай танилцацгаая. Form-control
  71. 9:38
    Form-select класс
  72. 15:02
    Checkbox болон Radio button
  73. 5:14
    Файл upload хийх форм. Файл хуулах товчлуурыг өөрсдийн аргаар хийж үзэх
  74. 6:40
    Range төрлийн input element
  75. 9:47
    Input group гэж юу вэ? Түүнийг хэрхэн ашиглах вэ?
  76. 9:41
    Bootstrap-ын form layout-ын тухай товчхон
  77. 14:33
    Form validation гэж юу вэ? Default алдааны мессежийг өөрсдийнхөөр солих
  78. 20:11
    Харилцагчдын сэтгэгдэл хуудас
  79. 16:14
    Холбоо барих хуудас. Эхний хэсэг
  80. 17:32
    Холбоо барих хуудас. Төгсгөл хэсэг
  81. 10:15
    NPM package-уудыг глобал байдлаар яаж суулгах вэ? Үүний давуу тал. Float utility класс
  82. 7:54
    Interactions utility классуудын тухай
  83. 5:04
    Overflow utility классууд
  84. 5:05
    Shadow utility классууд
  85. 8:16
    Элементийг босоо тэнхлэгийн дагуу зэрэгцүүлэхэд ямар utility класс ашиглах вэ?
  86. 4:31
    visible болон invisible классууд. invisible класс нь d-none классаас юугаараа ялгаатай вэ?
  87. 6:44
    Clearfix классын зориулалт
  88. 4:04
    Colored links. Вэб дээрх линкийн өнгийг text-color классаар өөрчлөх нь зөв үү, буруу юу? Хариултыг нь олцгооё
  89. 6:05
    Элементийн харьцааг хадгалах Ratio helper класс. Хэдэн төрлийн харьцаа байдаг вэ?
  90. 7:44
    Position helper классууд
  91. 4:01
    Босоо хязгаарлагч зураас зурах vr helper класс
  92. 8:47
    Bootstrap-ын stack класс гэж юу вэ? Stack-ийн зориулалт
  93. 5:17
    Дурын элемент, компонентийг линк болгон хувиргах
  94. 5:08
    Урт контентыг хураангуйлж харуулах text-truncate класс

Та зөвхөн өнөөдөр бүртгүүлснээр энэ сургалтыг 49,000₮ болгож хямдруулж аваарай!
 
Энэ сургалтын өмнө үзсэн байвал зохих сургалтууд
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 1839 | Үнэ: 49,000₮
BULMA Орчин үеийн CSS framework
Хугацаа: 22 цаг 29 мин | Сурагчид: 166 | Үнэ: 49,000₮
 
Энэ сургалтын дараа үргэлжлүүлэн үздэг сургалтууд
Ахисан төвшний HTML CSS, FRONT-END мастерын нууц
Хугацаа: 30 цаг 49 мин | Сурагчид: 863 | Үнэ: 49,000₮
Tailwind - Дэлхийн хамгийн шилдэг CSS framework
Хугацаа: 14 цаг 59 мин | Сурагчид: 330 | Үнэ: 49,000₮
CSS animation супер хийж сурцгаая
Хугацаа: 26 цаг 3 мин | Сурагчид: 204 | Үнэ: 49,000₮

== Сурагчдын сэтгэгдлүүд ==

Баярлалаа үнэхээр ойлгомжтой, хэрэгтэй байж чадлаа, дараагийн шинэ хичээлүүдийг хүлээж байна.
2022-03-04 18:16:56
Bootstrap 3 мэдлэгийг 5-руу шилжүүлж өгсөнд баярлалаа.
2022-01-20 02:29:16
сургалтын тохиргоо file хаанаас датах вэ?
2022-01-08 13:41:50
Mach sain curgalt bailaa. Ta bukhend ajil iin undur amjilt xusie
2022-01-07 15:53:33
Сайн байна уу?

Хичээлийн татаж авах хэсэг хаана байгаа юм бол?
2021-12-02 15:39:29