{"id":1518,"date":"2019-10-29T21:32:37","date_gmt":"2019-10-29T14:32:37","guid":{"rendered":"https:\/\/webvocuc.com\/blog\/?p=1518"},"modified":"2021-09-25T16:00:22","modified_gmt":"2021-09-25T09:00:22","slug":"bootstrap-la-gi-tai-sao-nen-su-dung-bootstrap","status":"publish","type":"post","link":"https:\/\/webvocuc.com\/blog\/bootstrap-la-gi-tai-sao-nen-su-dung-bootstrap.html","title":{"rendered":"Bootstrap l\u00e0 g\u00ec? T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng bootstrap"},"content":{"rendered":"

Bootstrap l\u00e0 g\u00ec<\/a>?<\/strong> L\u1ecbch s\u1eed Bootstrap. T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Bootstrap? Khi n\u00e0o th\u00ec ch\u00fang ta s\u1eed d\u1ee5ng bootstrap? T\u00ecm hi\u1ec3u v\u1edbi b\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y.<\/p>\n

Bootstrap l\u00e0 g\u00ec?<\/h2>\n

\"bootstrap<\/p>\n

Bootstrap<\/a> l\u00e0 g\u00ec? Bootstrap l\u00e0 m\u1ed9t front-end framework mi\u1ec5n ph\u00ed gi\u00fap qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n web \u0111\u01b0\u1ee3c nhanh v\u00e0 d\u1ec5 d\u00e0ng h\u01a1n. Bootstrap bao g\u1ed3m c\u00e1c m\u1eabu thi\u1ebft k\u1ebf d\u1ef1a tr\u00ean HTML v\u00e0 CSS nh\u01b0 typography, forms, buttons, tables, navigation, modals, image carousels\u2026 C\u0169ng nh\u01b0 c\u00e1c plugin JavaScript t\u00f9y ch\u1ecdn. Bootstrap c\u0169ng cung c\u1ea5p cho b\u1ea1n kh\u1ea3 n\u0103ng t\u1ea1o ra c\u00e1c responsive designs m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng.<\/p>\n

Responsive Web Design l\u00e0 g\u00ec?<\/h4>\n

Responsive Web Design l\u00e0 website s\u1ebd t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u1eeba v\u1eb7n tr\u00ean t\u1ea5t c\u1ea3 c\u00e1c thi\u1ebft b\u1ecb, t\u1eeb \u0111i\u1ec7n tho\u1ea1i nh\u1ecf \u0111\u1ebfn desktops l\u1edbn.<\/p>\n

L\u1ecbch s\u1eed Bootstrap l\u00e0 g\u00ec?<\/h2>\n

\"bootstrap<\/p>\n

Bootstrap \u0111\u01b0\u1ee3c ph\u00e1t tri\u1ec3n b\u1edfi Mark Otto v\u00e0 Jacob Thornton t\u1ea1i Twitter. V\u00e0 ph\u00e1t h\u00e0nh nh\u01b0 m\u1ed9t s\u1ea3n ph\u1ea9m ngu\u1ed3n m\u1edf v\u00e0o th\u00e1ng 8 n\u0103m 2011 tr\u00ean GitHub.\u00a0V\u00e0o th\u00e1ng 6 n\u0103m 2014, Bootstrap l\u00e0 No.1 project tr\u00ean GitHub.<\/p>\n

T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Bootstrap?<\/h2>\n

\"bootstrap<\/p>\n

L\u00fd do \u0111\u1ea7u ti\u00ean khi\u1ebfn Bootstrap d\u1ea7n tr\u1edf n\u00ean ph\u1ed5 bi\u1ebfn v\u00e0 x\u1ee9ng \u0111\u00e1ng \u0111\u01b0\u1ee3c l\u1ef1a chon \u0111\u00f3 l\u00e0 g\u1ea7n \u0111\u00e2y, c\u00e1c nh\u00e0 l\u1eadp tr\u00ecnh \u0111\u00e3 b\u1ed5 sung th\u00eam t\u00ednh n\u0103ng Customize (t\u00f9y ch\u1ec9nh). Ch\u1ee9c n\u0103ng n\u00e0y gi\u00fap cho c\u00e1c nh\u00e0 thi\u1ebft k\u1ebf linh ho\u1ea1t h\u01a1n trong vi\u1ec7c l\u1ef1a ch\u1ecdn nh\u1eefng thu\u1ed9c t\u00ednh, ph\u1ea7n t\u1eed ph\u00f9 h\u1ee3p v\u1edbi d\u1ef1 \u00e1n h\u1ecd \u0111ang theo \u0111u\u1ed5i. Ch\u1ee9c n\u0103ng n\u00e0y c\u0169ng cho ph\u00e9p b\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ea3i to\u00e0n b\u1ed9 m\u00e3 ngu\u1ed3n v\u1ec1 m\u00e1y.<\/p>\n

Bootstrap kh\u00f4ng \u0111\u00f2i h\u1ecfi ki\u1ebfn th\u1ee9c ph\u1ee9c t\u1ea1p. Ch\u1ec9 c\u1ea7n bi\u1ebft s\u01a1 qua HTML, CSS, Javascript, Jquery l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng n\u00f3 \u0111\u1ec3 t\u1ea1o n\u00ean m\u1ed9t website chuy\u00ean nghi\u1ec7p<\/a>. Website theo y\u00eau c\u1ea7u \u0111\u00fang nh\u01b0 mong mu\u1ed1n.<\/p>\n

Boostrap \u0111\u01b0\u1ee3c vi\u1ebft b\u1edfi nh\u1eefng b\u1ed9 n\u00e3o c\u00f4ng ngh\u1ec7 t\u00e0i n\u0103ng tr\u00ean kh\u1eafp th\u1ebf gi\u1edbi. S\u1ef1 t\u01b0\u01a1ng th\u00edch c\u1ee7a tr\u00ecnh duy\u1ec7t v\u1edbi thi\u1ebft b\u1ecb \u0111\u00e3 \u0111\u01b0\u1ee3c ki\u1ec3m tra nhi\u1ec1u l\u1ea7n tr\u01b0\u1edbc khi \u0111\u01b0a v\u00e0o s\u1eed d\u1ee5ng. N\u00ean khi l\u1ef1a ch\u1ecdn Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 tin r\u1eb1ng m\u00ecnh s\u1ebd t\u1ea1o n\u00ean nh\u1eefng s\u1ea3n ph\u1ea9m ho\u00e0n h\u1ea3o.<\/p>\n

Bootstrap s\u1eed d\u1ee5ng Grid System n\u00ean m\u1eb7c \u0111\u1ecbnh h\u1ed7 tr\u1ee3 Responsive. Bootstrap \u0111\u01b0\u1ee3c vi\u1ebft theo xu h\u01b0\u1edbng Mobile First t\u1ee9c l\u00e0 \u01b0u ti\u00ean cho vi\u1ec7c t\u01b0\u01a1ng th\u00edch v\u1edbi c\u00e1c giao di\u1ec7n tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng. S\u1eed d\u1ee5ng c\u00f4ng ngh\u1ec7 n\u00e0y cho website c\u1ee7a b\u1ea1n s\u1ebd gi\u00fap website tr\u1edf n\u00ean t\u01b0\u01a1ng th\u00edch v\u1edbi t\u1ea5t c\u1ea3 k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh. M\u1ed9t \u0111i\u1ec1u c\u1ef1c k\u00ec quan tr\u1ecdng v\u00e0 c\u1ea7n thi\u1ebft trong tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng.<\/p>\n

Bootstrap ho\u1ea1t \u0111\u1ed9ng theo xu h\u01b0\u1edbng m\u00e3 ngu\u1ed3n m\u1edf n\u00ean b\u1ea1n c\u00f3 th\u1ec3 v\u00e0o m\u00e3 ngu\u1ed3n c\u1ee7a n\u00f3 \u0111\u1ec3 thay \u0111\u1ed5i v\u00e0 ch\u1ec9nh s\u1eeda t\u00f9y \u00fd.<\/p>\n

Khi n\u00e0o th\u00ec ch\u00fang ta s\u1eed d\u1ee5ng bootstrap l\u00e0 g\u00ec?<\/h3>\n

\"bootstrap<\/p>\n

\u0110\u1ea7u ti\u00ean, \u0111\u01b0\u01a1ng nhi\u00ean l\u00e0 chuy\u1ec3n t\u1eeb psd sang html\/css.<\/p>\n

Khi l\u00e0m hi\u1ec7u \u1ee9ng cho website (c\u00e1c hi\u1ec7u \u1ee9ng \u0111\u01a1n gi\u1ea3n c\u00f3 s\u1eb5n c\u1ee7a bootstrap nh\u01b0).<\/p>\n

T\u1eeb \u0111\u00e2y, ch\u00fang ta c\u00f3 th\u1ec3 th\u1ea5y n\u1ebfu mu\u1ed1n h\u1ecdc \u0111\u01b0\u1ee3c bootstrap th\u00ec c\u1ea7n ph\u1ea3i hi\u1ec3u c\u00e1c kh\u00e1i ni\u1ec7m c\u0103n b\u1ea3n h\u01a1n n\u1eefa nh\u01b0 HTML CSS l\u00e0 g\u00ec?<\/p>\n

N\u00f3i \u0111\u01a1n gi\u1ea3n, HTML l\u00e0 ng\u00f4n ng\u1eef d\u00f9ng \u0111\u1ec3 m\u00f4 t\u1ea3 trang web. Trong vi\u1ec7c thi\u1ebft k\u1ebf web, n\u00f3 \u0111\u1ec3 m\u00f4 t\u1ea3 n\u1ed9i dung c\u1ee7a trang web.<\/p>\n

Css l\u00e0 thu\u1ed9c t\u00ednh \u0111i c\u00f9ng v\u1edbi HTMl \u0111\u1ec3 qui \u0111\u1ecbnh c\u00e1c thu\u1ed9c t\u00ednh hi\u1ec3n th\u1ecb c\u1ee7a website (v\u00ed d\u1ee5: \u0111\u1ec3 font ch\u1eef to l\u00ean ta t\u0103ng font-size. \u0110\u1ec3 t\u0103ng \u0111\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a div ta t\u0103ng width c\u1ee7a n\u00f3 l\u00ean). V\u00e0 c\u0169ng c\u00f3 th\u1ec3 t\u00ecm hi\u1ec3u th\u00eam \u1edf w3schools.<\/p>\n

Css2 th\u00f4ng th\u01b0\u1eddng bao g\u1ed3m c\u00e1c thu\u1ed9c t\u00ednh c\u01a1 b\u1ea3n.<\/p>\n

Css3 s\u1ebd c\u00f3 th\u00eam c\u00e1c thu\u1ed9c t\u00ednh l\u00ean quan \u0111\u1ebfn chuy\u1ec3n \u0111\u00f4ng, quay, zoom, …<\/p>\n

V\u1eady, ch\u00fang ta s\u1eed d\u1ee5ng bootstrap nh\u01b0 th\u1ebf n\u00e0o?<\/h2>\n

\"bootstrap<\/p>\n

Bootstrap l\u00e0 1 file css ch\u1ee9a c\u00e1c m\u00e3 css \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a d\u01b0\u1edbi c\u00e1c class \u0111\u01b0\u1ee3c quy \u0111\u1ecbnh s\u1eb5n c\u1ee7a bootstrap n\u00ean \u0111\u1ec3 h\u1ecdc bootstrap. C\u00e1c b\u1ea1n c\u1ea7n thu\u1ed9c c\u00e1c thu\u1ed9c t\u00ednh css, c\u00e1c th\u1ebb c\u1ee7a html v\u00e0 c\u00e1c class \u0111\u1ec3 c\u00f3 th\u1ec3 vi\u1ebft nhanh.<\/p>\n

T\u1ea5t nhi\u00ean, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 kh\u00f4ng h\u1ecdc thu\u1ed9c c\u0169ng \u0111\u01b0\u1ee3c. Khi \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 tra c\u1ee9u \u1edf w3schools ho\u1eb7c bootstrap.<\/p>\n

Trong bootstrap s\u1ebd c\u00f3 4 lo\u1ea1i m\u00e0n h\u00ecnh ch\u00ednh.<\/p>\n

    \n
  • \u0110\u1ea7u ti\u00ean l\u00e0 m\u00e0n h\u00ecnh xs d\u00e0nh cho \u0111i\u1ec7n tho\u1ea1i.<\/li>\n
  • Ti\u1ebfp \u0111\u1ebfn l\u00e0 m\u00e0n h\u00ecnh sm d\u00e0nh cho tablets.<\/li>\n
  • Sau \u0111\u1ea5y l\u00e0 m\u00e0n h\u00ecnh md d\u00e0nh cho m\u00e1y t\u00ednh.<\/li>\n
  • Cu\u1ed1i c\u00f9ng l\u00e0 m\u00e0n h\u00ecnh lg d\u00e0nh cho m\u00e0n h\u00ecnh l\u1edbn widescreens.<\/li>\n<\/ul>\n

    T\u1ea5t c\u1ea3 c\u00e1c lo\u1ea1i m\u00e0n h\u00ecnh n\u00e0y \u0111\u1ec1u chung 1 \u0111\u1eb7c \u0111i\u1ec3m. L\u00e0 \u0111\u01b0\u1ee3c chia th\u00e0nh 12 ph\u1ea7n c\u1ee7a l\u01b0\u1edbi c\u0103n ch\u1ec9nh.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Bootstrap l\u00e0 g\u00ec? L\u1ecbch s\u1eed Bootstrap. T\u1ea1i sao n\u00ean s\u1eed d\u1ee5ng Bootstrap? Khi n\u00e0o th\u00ec ch\u00fang ta s\u1eed d\u1ee5ng bootstrap? T\u00ecm hi\u1ec3u v\u1edbi b\u00e0i vi\u1ebft d\u01b0\u1edbi \u0111\u00e2y. Bootstrap l\u00e0 g\u00ec? Bootstrap l\u00e0 g\u00ec? Bootstrap l\u00e0 m\u1ed9t front-end framework mi\u1ec5n ph\u00ed gi\u00fap qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n web \u0111\u01b0\u1ee3c nhanh v\u00e0 d\u1ec5 d\u00e0ng h\u01a1n. Bootstrap bao g\u1ed3m […]<\/p>\n","protected":false},"author":2,"featured_media":1564,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[144],"class_list":["post-1518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thiet-ke-website","tag-bootstrap-la-gi"],"jetpack_featured_media_url":"https:\/\/webvocuc.com\/blog\/wp-content\/uploads\/2020\/10\/bootstrap-la-gi-tai-sao-nen-su-dung-bootstrap-3_q2qerx.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/comments?post=1518"}],"version-history":[{"count":3,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions"}],"predecessor-version":[{"id":4553,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/posts\/1518\/revisions\/4553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media\/1564"}],"wp:attachment":[{"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/media?parent=1518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/categories?post=1518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webvocuc.com\/blog\/wp-json\/wp\/v2\/tags?post=1518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}