{"id":88804,"date":"2025-07-01T15:53:04","date_gmt":"2025-07-01T08:53:04","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=88804"},"modified":"2025-07-10T11:33:30","modified_gmt":"2025-07-10T04:33:30","slug":"dropdown-bootstrap-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/","title":{"rendered":"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Tong_quan_ve_Dropdown_trong_Bootstrap\" >T\u1ed5ng quan v\u1ec1 Dropdown trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Cac_loai_dropdown_trong_Bootstrap\" >C\u00e1c lo\u1ea1i dropdown trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Cac_cach_dinh_dang_dropdown_Bootstrap\" >C\u00e1c c\u00e1ch \u0111\u1ecbnh d\u1ea1ng dropdown Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#So_sanh_dropdown_va_select_trong_Bootstrap\" >So s\u00e1nh dropdown v\u00e0 select trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Nhung_luu_y_khi_su_dung_dropdown_trong_Bootstrap\" >Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng dropdown trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Bai_tap_luyen_tap_su_dung_dropdown_va_select_trong_Bootsrap\" >B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng dropdown v\u00e0 select trong Bootsrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Cau_hoi_thuong_gap_ve_dropdown_va_select_trong_Bootstrap\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 dropdown v\u00e0 select trong Bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#Tong_ket\" >T\u1ed5ng k\u1ebft<\/a><\/li><\/ul><\/nav><\/div>\n\n<p><strong><em>Trong l\u1eadp tr\u00ecnh giao di\u1ec7n web, danh s\u00e1ch t\u00f9y ch\u1ecdn l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn nhanh ch\u00f3ng v\u00e0 ch\u00ednh x\u00e1c gi\u1eefa c\u00e1c ph\u01b0\u01a1ng \u00e1n c\u00f3 s\u1eb5n. Bootstrap h\u1ed7 tr\u1ee3 hai c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 t\u1ea1o danh s\u00e1ch t\u00f9y ch\u1ecdn l\u00e0 select v\u00e0 dropdown. D\u00f9 tr\u00f4ng gi\u1ed1ng nhau, nh\u01b0ng ch\u00fang c\u00f3 m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng, kh\u1ea3 n\u0103ng t\u00f9y bi\u1ebfn v\u00e0 c\u01a1 ch\u1ebf ho\u1ea1t \u0111\u1ed9ng r\u1ea5t kh\u00e1c bi\u1ec7t.&nbsp;<\/em><\/strong><\/p>\n\n\n\n<p>\u0110\u1ecdc b\u00e0i vi\u1ebft n\u00e0y \u0111\u1ec3 hi\u1ec3u r\u00f5:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Dropdown trong Bootstrap l\u00e0 g\u00ec? C\u00f3 g\u00ec kh\u00e1c v\u1edbi Select Bootstrap?<\/li>\n\n\n\n<li>C\u00e1ch s\u1eed d\u1ee5ng dropdown trong Bootstrap v\u00e0 c\u00e1c l\u01b0u \u00fd c\u1ea7n bi\u1ebft<\/li>\n\n\n\n<li>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng select v\u00e0 dropdown trong Bootstrap<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-quan-v\u1ec1-dropdown-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Tong_quan_ve_Dropdown_trong_Bootstrap\"><\/span><strong>T\u1ed5ng quan v\u1ec1 Dropdown trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Dropdown<\/strong> l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n giao di\u1ec7n trong <a href=\"https:\/\/itviec.com\/blog\/bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> cho ph\u00e9p hi\u1ec3n th\u1ecb c\u00e1c l\u1edbp ph\u1ee7 theo ng\u1eef c\u1ea3nh, th\u01b0\u1eddng l\u00e0 danh s\u00e1ch c\u00e1c li\u00ean k\u1ebft ho\u1eb7c n\u00fat h\u00e0nh \u0111\u1ed9ng. Dropdown \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf \u0111\u1ec3 c\u00f3 th\u1ec3 b\u1eadt\/t\u1eaft th\u00f4ng qua thao t\u00e1c nh\u1ea5p chu\u1ed9t.&nbsp;<\/p>\n\n\n\n<p>V\u00ed d\u1ee5 m\u1ed9t dropdown c\u01a1 b\u1ea3n:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf4YJq_BTQWRsk3HGqAjseGS8g1H-5RS7HMZPvYj0xL8CZy_gg4YMyV_XjMmfFD5Ghs7fYvdA2AMGjJRfltqfUViDKBA0kXhTGh7jz_-M2z--3Ohu1ayEh1tczlrvD9Cf3bkZGk?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p>Kh\u1ea3 n\u0103ng t\u01b0\u01a1ng t\u00e1c c\u1ee7a dropdown \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t b\u1edfi plugin JavaScript c\u1ee7a Bootstrap, gi\u00fap x\u1eed l\u00fd vi\u1ec7c hi\u1ec3n th\u1ecb, \u1ea9n v\u00e0 \u0111\u1ecbnh v\u1ecb dropdown m\u1ed9t c\u00e1ch m\u01b0\u1ee3t m\u00e0. \u0110\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c \u0111i\u1ec1u \u0111\u00f3, Bootstrap s\u1eed d\u1ee5ng m\u1ed9t th\u01b0 vi\u1ec7n m\u1ea1nh m\u1ebd c\u00f3 t\u00ean l\u00e0 Popper.js, th\u01b0 vi\u1ec7n n\u00e0y cung c\u1ea5p t\u00ednh n\u0103ng \u0111\u1ecbnh v\u1ecb \u0111\u1ed9ng v\u00e0 \u0111\u1ea3m b\u1ea3o dropdown kh\u00f4ng b\u1ecb tr\u00e0n ra ngo\u00e0i khung nh\u00ecn (viewport).<\/p>\n\n\n\n<p><em>L\u01b0u \u00fd: N\u1ebfu b\u1ea1n d\u00f9ng Bootstrap \u1edf d\u1ea1ng t\u00e1ch r\u1eddi, h\u00e3y \u0111\u1ea3m b\u1ea3o th\u00eam popper.min.js tr\u01b0\u1edbc bootstrap.min.js. Ho\u1eb7c \u0111\u01a1n gi\u1ea3n h\u01a1n, d\u00f9ng b\u1ea3n bootstrap.bundle.min.js v\u00ec \u0111\u00e3 t\u00edch h\u1ee3p s\u1eb5n Popper.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-lo\u1ea1i-dropdown-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_loai_dropdown_trong_Bootstrap\"><\/span><strong>C\u00e1c lo\u1ea1i dropdown trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-single-button-dropdown\"><strong>Single button dropdown<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 lo\u1ea1i dropdown \u0111\u01a1n gi\u1ea3n nh\u1ea5t, ch\u1ec9 s\u1eed d\u1ee5ng m\u1ed9t n\u00fat \u0111\u1ec3 m\u1edf menu. V\u00ed d\u1ee5 v\u1ec1 c\u00fa ph\u00e1p:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Action&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Another action&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Something else here&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcBUbsdAEvBETVopCZn6ahV4q7HZgMDGMJGo2CCj7nwariNEYsEgIOmF7xUc8CAt7m9yxfGzl8rIxK-yXLdHK7Z8M8vhePUhN91EFNHpqk68JpxUjdjwtEwOZbaI8eXNSBA3nqoPA?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-split-button-dropdown\"><strong>Split button dropdown<\/strong><\/h3>\n\n\n\n<p>\u0110\u00e2y l\u00e0 m\u1ed9t d\u1ea1ng bi\u1ebfn th\u1ec3 c\u1ee7a dropdown. Kh\u00e1c v\u1edbi dropdown th\u00f4ng th\u01b0\u1eddng, n\u00fat ch\u00ednh ch\u1ec9 d\u00f9ng \u0111\u1ec3 m\u1edf menu, Split button cho ph\u00e9p c\u1ea5u h\u00ecnh s\u1ef1 ki\u1ec7n click cho c\u1ea3 n\u00fat ch\u00ednh. C\u1ea5u t\u1ea1o c\u1ee7a Split button dropdown g\u1ed3m 2 ph\u1ea7n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>M\u1ed9t n\u00fat ch\u00ednh (th\u1ef1c hi\u1ec7n h\u00e0nh \u0111\u1ed9ng)<\/li>\n\n\n\n<li>M\u1ed9t n\u00fat nh\u1ecf b\u00ean ph\u1ea3i \u0111\u1ec3 m\u1edf menu<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"btn-group\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button type=\"button\" class=\"btn btn-danger\"&gt;N\u00fat ch\u00ednh&lt;\/button&gt;\n&nbsp;&nbsp;&nbsp;&lt;button type=\"button\" class=\"btn btn-danger dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"visually-hidden\"&gt;Toggle Dropdown&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcSASQeNQJoKUZIHQhJoZtCpxI6wJ4iN0At3E09V2KSW-BB4ADdQQ648zmBsGuj9X0f6BbdRgLJ06XTz21g7zvwM80ye2-l-rZCFELFuq1C_0jTjPoMcSf3NCrEx22deMVQ0395FA?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Dropdown trong Navbar<\/strong><\/p>\n\n\n\n<p>Dropdown c\u00f3 th\u1ec3 t\u00edch h\u1ee3p tr\u1ef1c ti\u1ebfp trong thanh \u0111i\u1ec1u h\u01b0\u1edbng (navbar), th\u01b0\u1eddng d\u00f9ng \u0111\u1ec3 nh\u00f3m c\u00e1c m\u1ee5c \u0111i\u1ec1u h\u01b0\u1edbng ph\u1ee5. \u0110\u1eb7c bi\u1ec7t, c\u00e1c dropdown trong navbar kh\u00f4ng s\u1eed d\u1ee5ng Popper.js v\u00ec kh\u00f4ng c\u1ea7n \u0111\u1ecbnh v\u1ecb \u0111\u1ed9ng. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar navbar-expand-lg navbar-light bg-light\"&gt;\n&nbsp;&nbsp;&nbsp;&lt;div class=\"container-fluid\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"navbar-brand\" href=\"#\"&gt;Logo&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"collapse navbar-collapse\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"navbar-nav me-auto\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"nav-item dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"nav-link dropdown-toggle\" href=\"#\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Menu\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Trang con 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Trang con 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&lt;\/nav&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfzGt0ZFD95jkyhVDlSWBotryu1AUnICxX2Cp2ZOpzfSTqQ6wg6XLFolRNQJz2GnDRjSO9OjXrrsdQawk_9GWI_ehKHwhRbMzQLz5D-c5Yb7NQblZY6wrpkLKHNupDUP-AppYbItw?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cac-cach-d\u1ecbnh-d\u1ea1ng-dropdown-bootstrap\"><span class=\"ez-toc-section\" id=\"Cac_cach_dinh_dang_dropdown_Bootstrap\"><\/span><strong>C\u00e1c c\u00e1ch \u0111\u1ecbnh d\u1ea1ng dropdown Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Dropdown l\u00e0 m\u1ed9t component UI \u0111\u1ed9c l\u1eadp trong Bootstrap, th\u01b0\u1eddng d\u00f9ng cho menu, \u0111i\u1ec1u h\u01b0\u1edbng, ho\u1eb7c c\u00e1c h\u00e0nh \u0111\u1ed9ng li\u00ean quan. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 \u0111\u1ecbnh d\u1ea1ng cho dropdown trong Bootstrap.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-di\u1ec1u-ch\u1ec9nh-h\u01b0\u1edbng-c\u1ee7a-dropdown\"><strong>\u0110i\u1ec1u ch\u1ec9nh h\u01b0\u1edbng c\u1ee7a dropdown<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c \u0111\u1ecbnh, dropdown s\u1ebd m\u1edf h\u01b0\u1edbng xu\u1ed1ng d\u01b0\u1edbi. Tuy nhi\u00ean, Bootstrap cho ph\u00e9p b\u1ea1n thay \u0111\u1ed5i h\u01b0\u1edbng hi\u1ec3n th\u1ecb dropdown b\u1eb1ng c\u00e1ch th\u00eam c\u00e1c class v\u00e0o ph\u1ea7n t\u1eed cha. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c t\u00f9y ch\u1ecdn ph\u1ed5 bi\u1ebfn:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropdown-hi\u1ec3n-th\u1ecb-\u1edf-gi\u1eefa-centered-dropdown\"><strong>Dropdown hi\u1ec3n th\u1ecb \u1edf gi\u1eefa (centered dropdown)<\/strong><\/h4>\n\n\n\n<p>Th\u00eam <strong><code>.dropdown-center<\/code><\/strong> v\u00e0o ph\u1ea7n t\u1eed cha \u0111\u1ec3 menu dropdown hi\u1ec3n th\u1ecb ngay gi\u1eefa b\u00ean d\u01b0\u1edbi n\u00fat:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown-center\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdXehTGCR9yeB6jmTZ79t9OObb_IeDFXAzEMtV8E7rDG1X_OxrE1jvZXC1-zCWCuJbfb0nCXMyuaMD9xgb-CK4YDeEN4_Yumj5n2CD7Ke_Pyb8f-aAPna5apohKKdmakVgUP2H0qQ?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropup-hi\u1ec3n-th\u1ecb-menu-phia-tren\"><strong>Dropup \u2013 Hi\u1ec3n th\u1ecb menu ph\u00eda tr\u00ean<\/strong><\/h4>\n\n\n\n<p>Bootstrap cung c\u1ea5p class<strong> <code>.dropup<\/code> <\/strong>k\u1ebft h\u1ee3p v\u1edbi class <strong><code>.btn-group<\/code><\/strong> \u0111\u1ec3 menu hi\u1ec3n th\u1ecb ph\u00eda tr\u00ean n\u00fat thay v\u00ec ph\u00eda d\u01b0\u1edbi:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"btn-group dropup\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeIKwnZi-Lr-s8qLpo8HddqyPni-j61YJKSLPP2KCBTeIFUVvjI8rHvxph7zJebByJxCWuboXJNc6dDe5dYXYcCqpc6XgvuYLR3qU7x_rgD5uGFYCiv6Xg4g1lkhzQecS2P_yvyZA?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropend-hi\u1ec3n-th\u1ecb-menu-ben-ph\u1ea3i\"><strong>Dropend \u2013 Hi\u1ec3n th\u1ecb menu b\u00ean ph\u1ea3i<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 \u0111i\u1ec1u ch\u1ec9nh dropdown hi\u1ec3n th\u1ecb \u1edf b\u00ean ph\u1ea3i, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng class <strong><code>.dropend<\/code><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"btn-group dropend\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdD0kG8zSzVdLYX0qoNfo9Szbm9uTfzVTVI5b1ATrt4d9hrChCtbs00EyqUenjy2TUXvoEAWRPKayjLu7uGllQdljm9XsRDNVzdD3yPR9w2u98tRwG54jX0rSc5wcyUWa5qBFe7dA?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropstart-hi\u1ec3n-th\u1ecb-menu-ben-trai\"><strong>Dropstart \u2013 Hi\u1ec3n th\u1ecb menu b\u00ean tr\u00e1i<\/strong><\/h4>\n\n\n\n<p>\u0110\u1ec3 dropdown hi\u1ec3n th\u1ecb menu ph\u00eda b\u00ean tr\u00e1i trong thi\u1ebft k\u1ebf LTR (Left to Right) ho\u1eb7c ph\u00eda b\u00ean ph\u1ea3i trong thi\u1ebft k\u1ebf RTL, ch\u00fang ta s\u1eed d\u1ee5ng class <strong><code>.dropstart<\/code><\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"btn-group dropstart\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeLbqSx4IrzKDDTE45jfP2jvHhzGj1_hAjpF_yKAIAS0ICzeVNSwFlr2Rj074vhpuybSsOobC9JLhxCVhUYndUNN93sbMFS4SxwD1cafZZzlY-NWVxk9Frxcg8XXu-jQXATu5Xx?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tuy-ch\u1ecdn-mau-s\u1eafc-ch\u1ee7-d\u1ec1-c\u1ee7a-dropdown\"><strong>T\u00f9y ch\u1ecdn m\u00e0u s\u1eafc ch\u1ee7 \u0111\u1ec1 c\u1ee7a dropdown<\/strong><\/h3>\n\n\n\n<p>Bootstrap kh\u00f4ng c\u00f3 class ri\u00eang \u0111\u1ec3 \u0111\u1ed5i m\u00e0u n\u1ec1n cho <code>dropdown-menu<\/code> theo ch\u1ee7 \u0111\u1ec1 nh\u01b0 background hay button, nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 thay \u0111\u1ed5i m\u00e0u n\u00fat c\u1ee7a dropdown \u0111\u1ec3 th\u1ec3 hi\u1ec7n c\u00e1c ch\u1ee7 \u0111\u1ec1 kh\u00e1c nhau.<\/p>\n\n\n\n<p>S\u1eed d\u1ee5ng c\u00e1c l\u1edbp <code>btn-*<\/code> c\u1ee7a Bootstrap \u0111\u1ec3 \u0111\u1ed5i m\u00e0u n\u00fat ch\u00ednh c\u1ee7a dropdown. V\u00ed d\u1ee5 \u0111\u1ec3 t\u1ea1o dropdown v\u1edbi ch\u1ee7 \u0111\u1ec1 primary:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdppVD7ZBVeyq4lHSgtSoAecuzxbswrSoEtJUC9hyCxR-I6kk3oHoAODE81Cqx8i_LWTXEsR9ZxqHYO3MaT0hk9HSXu9HuLzOqSwJD-cyVf-CezMyk2I9PRxsNgxysWI6uCXnZqNw?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p>Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c theme ch\u1ee7 \u0111\u1ec1 kh\u00e1c c\u1ee7a button nh\u01b0:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdWXXmvhyelOxZ0GTA7Z9ey-vNXQW2KxWVsDrVyxUDfOv21cj5Wh5apYcGbu42WSliReTuPJUniNOfLdaAGyA0Q2cb37gF2sllbiatG4TPyeJWtn3vxWFZiYxkOMUhgaywqcPnTeQ?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Tham kh\u1ea3o th\u00eam b\u00e0i vi\u1ebft h\u01b0\u1edbng d\u1eabn chi ti\u1ebft <strong><a href=\"https:\/\/itviec.com\/blog\/button-bootstrap-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">C\u00e1ch s\u1eed d\u1ee5ng Button trong Bootstrap.<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-di\u1ec1u-ch\u1ec9nh-kich-th\u01b0\u1edbc-c\u1ee7a-dropdown\"><strong>\u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a dropdown<\/strong><\/h3>\n\n\n\n<p>T\u01b0\u01a1ng t\u1ef1 nh\u01b0 m\u00e0u s\u1eafc, vi\u1ec7c thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a dropdown c\u0169ng \u0111\u1ebfn t\u1eeb vi\u1ec7c thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc n\u00fat c\u1ee7a dropdown. B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c l\u1edbp <strong><code>.btn-sm<\/code><\/strong> (k\u00edch th\u01b0\u1edbc nh\u1ecf), v\u00e0 <strong><code>.btn-lg<\/code><\/strong> (d\u00e0nh cho k\u00edch th\u01b0\u1edbc l\u1edbn) c\u1ee7a Bootstrap \u0111\u1ec3 \u0111\u1ed5i k\u00edch c\u1ee1 c\u1ee7a n\u00fat ch\u00ednh c\u1ee7a dropdown.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropdown-co-kich-th\u01b0\u1edbc-nh\u1ecf-s\u1eed-d\u1ee5ng-btn-sm\"><strong>Dropdown c\u00f3 k\u00edch th\u01b0\u1edbc nh\u1ecf (s\u1eed d\u1ee5ng btn-sm)<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown mb-2\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary btn-sm dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown nh\u1ecf\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXetFPlHzd6pfXJ_sU67HDmnDF4InEti0SR1V5pFXnR1MxOSHVnUqDfwk_UsA11DPKWf2PW77VF1uq5BWCNuQX3BUdy1kksTlW6gWK75FFGJuQoitNtbyJ0epBsQTN9tGyYm_bWs?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-dropdown-co-kich-th\u01b0\u1edbc-l\u1edbn-s\u1eed-d\u1ee5ng-btn-lg\"><strong>Dropdown c\u00f3 k\u00edch th\u01b0\u1edbc l\u1edbn (s\u1eed d\u1ee5ng btn-lg)<\/strong><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown mb-2\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary btn-lg dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown l\u1edbn\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeOYj-_RZeUMjjRm52rOIz0NPmI95opR2CZb3ca3tbiSUppPG5OR4T8UUAxQKHb3vSMiuzLGqLIO7tq52s-8GdJZOKXwtORSK9k_mMuD_YdyCD4yo-_DGcGUttb7kqoRtCMMuPq?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-vo-hi\u1ec7u-hoa-disable-dropdown\"><strong>V\u00f4 hi\u1ec7u h\u00f3a (disable) dropdown<\/strong><\/h3>\n\n\n\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n v\u00f4 hi\u1ec7u h\u00f3a (disable) m\u1ed9t m\u1ee5c trong dropdown, ch\u1ec9 c\u1ea7n th\u00eam l\u1edbp <strong><code>.disabled<\/code><\/strong> v\u00e0o ph\u1ea7n t\u1eed trong menu. \u0110i\u1ec1u n\u00e0y s\u1ebd l\u00e0m m\u1ee5c \u0111\u00f3 kh\u00f4ng t\u01b0\u01a1ng t\u00e1c \u0111\u01b0\u1ee3c v\u00e0 \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u1edbi m\u00e0u m\u1edd h\u01a1n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"dropdown\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dropdown button\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 1&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item disabled\" aria-disabled=\"true\"&gt;T\u00f9y ch\u1ecdn 2&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;T\u00f9y ch\u1ecdn 3&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p>K\u1ebft qu\u1ea3:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcETSBoRiO-DnKP3mUjMJD8ALRdDRUnfUBJGsUgXXR7FSDdQd7bZTlcR8UtbS3zYfZf62wWyLED0XkkGMBB4jXB9HDfm7P6DvvXZSsrU_4Bq73mX6M3l0bYhoLccXAd3I9PzZHO2g?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p>Trong \u0111\u00f3, ph\u1ea7n t\u1eed \u201cT\u00f9y ch\u1ecdn 2\u201d \u0111\u00e3 b\u1ecb v\u00f4 hi\u1ec7u h\u00f3a, khi\u1ebfn ph\u1ea7n t\u1eed n\u00e0y kh\u00f4ng th\u1ec3 b\u1ea5m \u0111\u01b0\u1ee3c. Thu\u1ed9c t\u00ednh <code>aria-disabled=\u201ctrue\u201d<\/code> gi\u00fap h\u1ed7 tr\u1ee3 tr\u00ecnh \u0111\u1ecdc m\u00e0n h\u00ecnh (accessibility).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-so-sanh-dropdown-va-select-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"So_sanh_dropdown_va_select_trong_Bootstrap\"><\/span><strong>So s\u00e1nh dropdown v\u00e0 select trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-quan-v\u1ec1-select-trong-bootstrap\"><strong>T\u1ed5ng quan v\u1ec1 select trong Bootstrap<\/strong><\/h3>\n\n\n\n<p>Trong HTML, <strong><code>select<\/code><\/strong> l\u00e0 m\u1ed9t ph\u1ea7n t\u1eed chu\u1ea9n \u0111\u1ec3 t\u1ea1o ra danh s\u00e1ch c\u00e1c t\u00f9y ch\u1ecdn trong m\u1ed9t form. V\u00ed d\u1ee5 m\u1ed9t select v\u1edbi ki\u1ec3u d\u00e1ng m\u1eb7c \u0111\u1ecbnh trong HTML s\u1ebd hi\u1ec3n th\u1ecb nh\u01b0 n\u00e0y:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe6JFvF6Py91mgn26dxFuDEcWG9ABiYf1aaFLmjSD8fa-cdhQAX2s7_W533nMGK_Ulr-RonnvsTTzNvd0RWI6CXw79XcojiAZQ3MHZ536ZHj3Mjnb3s9Y2N5SKjb6KuvUCWpV9DNg?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p>Bootstrap kh\u00f4ng cung c\u1ea5p component ri\u00eang cho select, nh\u01b0ng n\u00f3 c\u00f3 c\u00e1c styling h\u1ed7 tr\u1ee3 \u0111\u1ec3 gi\u00fap b\u1ea1n c\u1ea3i thi\u1ec7n giao di\u1ec7n m\u1eb7c \u0111\u1ecbnh c\u1ee7a select, n\u00e2ng cao tr\u1ea3i nghi\u1ec7m c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Tham kh\u1ea3o th\u00eam v\u1ec1 <\/em><a href=\"https:\/\/itviec.com\/blog\/the-select-html-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><em>C\u00e1ch s\u1eed d\u1ee5ng Select HTML<\/em><\/strong><\/a><\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-d\u1ecbnh-d\u1ea1ng-c\u1ee7a-select-trong-bootstrap\"><strong>\u0110\u1ecbnh d\u1ea1ng c\u1ee7a select trong Bootstrap<\/strong><\/h4>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 v\u00ed d\u1ee5 c\u01a1 b\u1ea3n v\u1ec1 <code>select<\/code> trong Bootstrap:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\u00a0\u00a0\u00a0&lt;div class=\"d-flex align-items-center m-5\">\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label for=\"fruit\" class=\"form-label me-3 mb-0\">Ch\u1ecdn lo\u1ea1i tr\u00e1i c\u00e2y:&lt;\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;select class=\"form-select w-auto\" id=\"fruit\" name=\"fruit\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"apple\">T\u00e1o&lt;\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"banana\">Chu\u1ed1i&lt;\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"orange\">Cam&lt;\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;option value=\"mango\">Xo\u00e0i&lt;\/option>\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/select>\n\n\u00a0\u00a0\u00a0&lt;\/div><\/code><\/pre>\n\n\n\n<p>Trong \u0111o\u1ea1n code tr\u00ean, vi\u1ec7c \u00e1p d\u1ee5ng class <strong><code>.form-select<\/code> <\/strong>gi\u00fap select c\u00f3 ki\u1ec3u d\u00e1ng \u0111\u01b0\u1ee3c c\u1ea3i ti\u1ebfn v\u1edbi border bo tr\u00f2n, padding \u0111\u1eb9p, hover\/focus r\u00f5 r\u00e0ng. Ngo\u00e0i ra n\u00f3 c\u00f3 gi\u00fap t\u01b0\u01a1ng th\u00edch ho\u00e0n h\u1ea3o v\u1edbi responsive layout v\u00e0 c\u00e1c form control kh\u00e1c c\u1ee7a Bootstrap.<\/p>\n\n\n\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfm8is80R0qXl10eNqHemGUe0WCviDIc4FuGA12T-wrtRQ62DKWrlwDqAB5kouk0tpEYSnNA9xgI8IBPsMRPoNiKHQYFkfYrRR8ZISoPLcJIPplrVzMhFho9vOQ_aXrZcVh-q8S?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-di\u1ec1u-ch\u1ec9nh-kich-th\u01b0\u1edbc-select\"><strong>\u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc select<\/strong><\/h4>\n\n\n\n<p>Trong Bootstrap, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc c\u1ee7a select m\u1ed9t c\u00e1ch nhanh ch\u00f3ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c l\u1edbp ti\u1ec7n \u00edch m\u00e0 Bootstrap cung c\u1ea5p. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng c\u0103n ch\u1ec9nh giao di\u1ec7n cho ph\u00f9 h\u1ee3p v\u1edbi ng\u1eef c\u1ea3nh s\u1eed d\u1ee5ng.<\/p>\n\n\n\n<p><strong><code>.form-select<\/code><\/strong> : k\u00edch th\u01b0\u1edbc ti\u00eau chu\u1ea9n<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfm8is80R0qXl10eNqHemGUe0WCviDIc4FuGA12T-wrtRQ62DKWrlwDqAB5kouk0tpEYSnNA9xgI8IBPsMRPoNiKHQYFkfYrRR8ZISoPLcJIPplrVzMhFho9vOQ_aXrZcVh-q8S?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong><code>.form-select-sm<\/code><\/strong> : k\u00edch th\u01b0\u1edbc nh\u1ecf h\u01a1n (s\u1eed d\u1ee5ng trong c\u00e1c giao di\u1ec7n g\u1ecdn nh\u1eb9)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd4y1OGCyH5HuaQbo9T89D4aUaX4q3MTPgrwePZMPo5DaZOaod87aOyuLtiUJdo1DWF6v7zSWwNgn5_-tRlp-A1Z1xTqX8E2Tx4OcohvCQqV_lnPj8FDznRtD9TfByCyWNzsYmS7Q?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong><code>.form-select-lg<\/code><\/strong> : k\u00edch th\u01b0\u1edbc l\u1edbn, d\u00f9ng cho c\u00e1c ti\u00eau \u0111\u1ec1 l\u1edbn<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfxlfHnN5L1wA3yjM2JQRaSsRg1tibBC0Twwv7b_Vw_LEwrOEX9orsDrPGUJxl1eJSleduyVUUj5Qzn2nnrE2uwmgWP8GuRRYbF2nxtXXUYUHaUhNc_9VPpPdWsg-z5j6_acNmRnA?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<p>M\u1eb7c d\u00f9 <strong><code>select<\/code><\/strong> v\u00e0 <strong><code>dropdown<\/code><\/strong> \u0111\u1ec1u hi\u1ec3n th\u1ecb danh s\u00e1ch t\u00f9y ch\u1ecdn, nh\u01b0ng ch\u00fang ph\u1ee5c v\u1ee5 m\u1ee5c \u0111\u00edch kh\u00e1c nhau v\u00e0 c\u00f3 c\u00e1ch ho\u1ea1t \u0111\u1ed9ng ri\u00eang. B\u1ea3ng d\u01b0\u1edbi \u0111\u00e2y gi\u00fap b\u1ea1n ph\u00e2n bi\u1ec7t r\u00f5 hai th\u00e0nh ph\u1ea7n n\u00e0y \u0111\u1ec3 s\u1eed d\u1ee5ng \u0111\u00fang ng\u1eef c\u1ea3nh.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>Select<\/strong><\/td><td><strong>Dropdown<\/strong><\/td><\/tr><tr><td>M\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng<\/td><td>Thu th\u1eadp d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng trong bi\u1ec3u m\u1eabu (form)<\/td><td>Hi\u1ec3n th\u1ecb danh s\u00e1ch li\u00ean k\u1ebft ho\u1eb7c h\u00e0nh \u0111\u1ed9ng UI<\/td><\/tr><tr><td>Th\u00e0nh ph\u1ea7n HTML ch\u00ednh<\/td><td>&lt;select&gt; + &lt;option&gt;<\/td><td>&lt;button&gt; + &lt;ul class=&#8221;dropdown-menu&#8221;&gt;<\/td><\/tr><tr><td>G\u1eedi d\u1eef li\u1ec7u form<\/td><td>C\u00f3 (khi submit form)<\/td><td>Kh\u00f4ng, tr\u1eeb khi t\u1ef1 x\u1eed l\u00fd b\u1eb1ng JavaScript<\/td><\/tr><tr><td>T\u00ednh n\u0103ng n\u00e2ng cao<\/td><td>C\u1ea7n th\u01b0 vi\u1ec7n ngo\u00e0i (v\u00ed d\u1ee5: Select2, Choices.js)<\/td><td>H\u1ed7 tr\u1ee3 nhi\u1ec1u ki\u1ec3u menu, h\u01b0\u1edbng hi\u1ec3n th\u1ecb, chia nh\u00f3m<\/td><\/tr><tr><td>C\u00f3 th\u1ec3 ch\u1ecdn nhi\u1ec1u m\u1ee5c<\/td><td>C\u00f3 (multiple)<\/td><td>Kh\u00f4ng ph\u1ea3i l\u1ef1a ch\u1ecdn (ch\u1ec9 thao t\u00e1c)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>T\u1eeb nh\u1eefng so s\u00e1nh tr\u00ean, c\u00f3 th\u1ec3 th\u1ea5y s\u1ef1 kh\u00e1c bi\u1ec7t c\u1ed1t l\u00f5i gi\u1eefa Dropdown v\u00e0 Select n\u1eb1m \u1edf m\u1ee5c \u0111\u00edch s\u1eed d\u1ee5ng. Trong khi Select l\u00e0 l\u1ef1a ch\u1ecdn l\u00fd t\u01b0\u1edfng cho c\u00e1c bi\u1ec3u m\u1eabu c\u1ea7n thu th\u1eadp v\u00e0 g\u1eedi d\u1eef li\u1ec7u ng\u01b0\u1eddi d\u00f9ng, th\u00ec Dropdown l\u1ea1i ph\u00e1t huy hi\u1ec7u qu\u1ea3 trong vi\u1ec7c hi\u1ec3n th\u1ecb menu thao t\u00e1c ho\u1eb7c c\u00e1c li\u00ean k\u1ebft \u0111i\u1ec1u h\u01b0\u1edbng.<\/p>\n\n\n\n<p>V\u00ec v\u1eady b\u1ea1n h\u00e3y d\u00f9ng Select khi b\u1ea1n c\u1ea7n l\u1ea5y d\u1eef li\u1ec7u t\u1eeb ng\u01b0\u1eddi d\u00f9ng, v\u00e0 d\u00f9ng Dropdown khi b\u1ea1n mu\u1ed1n t\u1ea1o c\u00e1c t\u00f9y ch\u1ecdn h\u00e0nh \u0111\u1ed9ng ho\u1eb7c hi\u1ec3n th\u1ecb menu ph\u1ee5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-nh\u1eefng-l\u01b0u-y-khi-s\u1eed-d\u1ee5ng-dropdown-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Nhung_luu_y_khi_su_dung_dropdown_trong_Bootstrap\"><\/span><strong>Nh\u1eefng l\u01b0u \u00fd khi s\u1eed d\u1ee5ng dropdown trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Khi d\u00f9ng dropdown trong d\u1ef1 \u00e1n Bootstrap, b\u1ea1n n\u00ean ch\u00fa \u00fd m\u1ed9t s\u1ed1 \u0111i\u1ec3m sau \u0111\u1ec3 tr\u00e1nh l\u1ed7i giao di\u1ec7n ho\u1eb7c h\u00e0nh vi kh\u00f4ng mong mu\u1ed1n:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dropdown kh\u00f4ng g\u1eedi d\u1eef li\u1ec7u form<\/strong>: Dropdown trong Bootstrap kh\u00f4ng ph\u1ea3i l\u00e0 <code>&lt;select&gt;<\/code>, n\u00ean s\u1ebd kh\u00f4ng g\u1eedi d\u1eef li\u1ec7u khi submit form. N\u1ebfu c\u1ea7n, b\u1ea1n ph\u1ea3i d\u00f9ng JavaScript \u0111\u1ec3 l\u1ea5y gi\u00e1 tr\u1ecb v\u00e0 g\u00e1n v\u00e0o m\u1ed9t input \u1ea9n.<\/li>\n\n\n\n<li><strong>Kh\u00f4ng d\u00f9ng hover \u0111\u1ec3 k\u00edch ho\u1ea1t<\/strong>: Dropdown Bootstrap ch\u1ec9 m\u1edf khi click, kh\u00f4ng h\u1ed7 tr\u1ee3 hover (tr\u1eeb khi t\u1ef1 vi\u1ebft th\u00eam JS). \u0110i\u1ec1u n\u00e0y gi\u00fap \u0111\u1ea3m b\u1ea3o t\u01b0\u01a1ng th\u00edch t\u1ed1t tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng.<\/li>\n\n\n\n<li><strong>Tr\u00e1nh \u0111\u1eb7t dropdown trong v\u00f9ng b\u1ecb gi\u1edbi h\u1ea1n chi\u1ec1u cao<\/strong>: \u0111i\u1ec1u n\u00e0y c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn vi\u1ec7c menu b\u1ecb che m\u1ea5t m\u1ed9t ph\u1ea7n ho\u1eb7c ho\u00e0n to\u00e0n.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-luy\u1ec7n-t\u1eadp-s\u1eed-d\u1ee5ng-dropdown-va-select-trong-bootsrap\"><span class=\"ez-toc-section\" id=\"Bai_tap_luyen_tap_su_dung_dropdown_va_select_trong_Bootsrap\"><\/span><strong>B\u00e0i t\u1eadp luy\u1ec7n t\u1eadp s\u1eed d\u1ee5ng dropdown v\u00e0 select trong Bootsrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-1-c\u01a1-b\u1ea3n\"><strong>B\u00e0i t\u1eadp 1 (C\u01a1 b\u1ea3n)<\/strong><\/h3>\n\n\n\n<p><strong>T\u1ea1o m\u1ed9t form ch\u1ecdn m\u00f4n h\u1ecdc s\u1eed d\u1ee5ng select theo h\u00ecnh minh h\u1ecda sau:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf1bpWhuPHa98PCtZzKU3AILvY2twgKWZ4n9gtwGeaJgD7kt-8cd4R19PNr5nLD6XWrE8_RvCSzpPIj3DKLxi5h6ZbiVCaTKegF-FxJ_k0q5QL9ZvZkQCcNJa1JWoUv4D2Ncw3qxQ?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 1<\/summary>\n<ul class=\"wp-block-list\">\n<li>S\u1eed d\u1ee5ng <strong>&lt;select&gt;<\/strong> k\u1ebft h\u1ee3p v\u1edbi <strong>&lt;option&gt;<\/strong> \u0111\u1ec3 t\u1ea1o ra danh s\u00e1ch c\u00e1c m\u00f4n h\u1ecdc<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng class <strong>.form-select<\/strong> v\u00e0 <strong>.form-select-sm<\/strong> \u0111\u1ec3 th\u00eam styling cho select, t\u0103ng c\u01b0\u1eddng kh\u1ea3 n\u0103ng t\u01b0\u01a1ng th\u00edch.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form class=\"w-50 p-3 border rounded\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;h5&gt;Th\u00f4ng tin c\u00e1 nh\u00e2n&lt;\/h5&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;div class=\"mb-3\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=\"country\" class=\"form-label\"&gt;Ch\u1ecdn m\u00f4n h\u1ecdc&lt;\/label&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;select class=\"form-select form-select-sm\" id=\"country\" name=\"country\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=\"toan\"&gt;To\u00e1n&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=\"ly\"&gt;L\u00fd&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=\"hoa\"&gt;H\u00f3a&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;option value=\"van\"&gt;V\u0103n&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/select&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&lt;\/form&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-2-trung-binh\"><strong>B\u00e0i t\u1eadp 2 (Trung b\u00ecnh)<\/strong><\/h3>\n\n\n\n<p><strong>T\u1ea1o m\u1ed9t dropdown v\u1edbi n\u00fat \u201cThao t\u00e1c\u201d. Menu g\u1ed3m 3 l\u1ef1a ch\u1ecdn: Xem, S\u1eeda, X\u00f3a. Khi ch\u1ecdn \u201cX\u00f3a\u201d, hi\u1ec3n th\u1ecb alert(&#8220;B\u1ea1n \u0111\u00e3 ch\u1ecdn x\u00f3a!&#8221;).<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcdn4lJKfv7eEKMad8Rk_HYWo6jbpxoo_z_kJ1K-rm0YVdXls7WcGdOTWc2tjeSPFqEG0gTbeWhAdyiEDSGH-w9qdPRb5C6HxCsHExAEmlYIh-JkQTcniJ2QHh8-LUkz9C20aWNqg?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 2<\/summary>\n<p>S\u1eed d\u1ee5ng component dropdown c\u1ee7a Bootstrap \u0111\u1ec3 t\u1ea1o ra danh s\u00e1ch t\u00f9y ch\u1ecdn, trong \u0111\u00f3 s\u1eed d\u1ee5ng<strong> onclick=\u201c&#8230;\u201d<\/strong> \u0111\u1ec3 k\u00edch ho\u1ea1t s\u1ef1 ki\u1ec7n cho ph\u1ea7n t\u1eed \u201cX\u00f3a\u201d:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;div class=\"dropdown mb-3\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-primary dropdown-toggle\" type=\"button\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Thao t\u00e1c\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Xem chi ti\u1ebft&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;S\u1eeda&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\" onclick=\"alert('B\u1ea1n \u0111\u00e3 ch\u1ecdn x\u00f3a!')\"&gt;X\u00f3a&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-bai-t\u1eadp-3-nang-cao\"><strong>B\u00e0i t\u1eadp 3 (N\u00e2ng cao)<\/strong><\/h3>\n\n\n\n<p><strong>T\u1ea1o navbar \u0111\u01a1n gi\u1ea3n c\u00f3 logo v\u00e0 menu. Th\u00eam m\u1ed9t dropdown trong navbar v\u1edbi ti\u00eau \u0111\u1ec1 \u201cT\u00e0i kho\u1ea3n\u201d. Menu g\u1ed3m: Th\u00f4ng tin c\u00e1 nh\u00e2n, \u0110\u1ed5i m\u1eadt kh\u1ea9u, \u0110\u0103ng xu\u1ea5t.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeuYF5sXagLqkyic7MF7YsBm1MR-DKJ9mCzJ8alCTlKZt4xumg5m2yhVh7HTPkDMHFGoZON_RKNW2fmFQuPM6ZQbhw5tSSTfZmQKSkukyuIvOAjTOBYfj0PsBmIfWfNYo4dzt83aA?key=uLzuE4-tVlWY0-XaKwUtag\" alt=\"\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>L\u1eddi gi\u1ea3i B\u00e0i t\u1eadp 3<\/summary>\n<ul class=\"wp-block-list\">\n<li>Kh\u1edfi t\u1ea1o thanh navbar c\u01a1 b\u1ea3n v\u1edbi c\u00e1c class ti\u1ec7n \u00edch <strong>.navbar<\/strong><\/li>\n\n\n\n<li>T\u1ea1o n\u00fat toggle (hamburger) cho responsive: Gi\u00fap \u1ea9n\/hi\u1ec7n menu tr\u00ean thi\u1ebft b\u1ecb nh\u1ecf (mobile, tablet), data-bs-toggle=&#8221;collapse&#8221; cho ph\u00e9p \u0111i\u1ec1u khi\u1ec3n ph\u1ea7n #navbarContent.<\/li>\n\n\n\n<li>S\u1eed d\u1ee5ng component dropdown \u0111\u1ec3 t\u1ea1o c\u00e1c menu trong m\u1ee5c \u201cT\u00e0i kho\u1ea3n\u201d<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav class=\"navbar navbar-expand-lg navbar-light bg-light\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;div class=\"container-fluid\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Logo --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"navbar-brand\" href=\"#\"&gt;MySite&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Toggle button cho mobile --&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarContent\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span class=\"navbar-toggler-icon\"&gt;&lt;\/span&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Menu ch\u00ednh --&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=\"collapse navbar-collapse\" id=\"navbarContent\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"navbar-nav ms-auto\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Dropdown T\u00e0i kho\u1ea3n --&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=\"nav-item dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a class=\"nav-link dropdown-toggle\" href=\"#\" role=\"button\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;T\u00e0i kho\u1ea3n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/a&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu dropdown-menu-end\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;Th\u00f4ng tin c\u00e1 nh\u00e2n&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;\u0110\u1ed5i m\u1eadt kh\u1ea9u&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;hr class=\"dropdown-divider\"&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\"&gt;\u0110\u0103ng xu\u1ea5t&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&lt;\/nav&gt;<\/code><\/pre>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cau-h\u1ecfi-th\u01b0\u1eddng-g\u1eb7p-v\u1ec1-dropdown-va-select-trong-bootstrap\"><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_dropdown_va_select_trong_Bootstrap\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 dropdown v\u00e0 select trong Bootstrap<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-co-th\u1ec3-dung-bootstrap-d\u1ec3-thay-d\u1ed5i-mau-n\u1ec1n-cho-select-khong\"><strong>C\u00f3 th\u1ec3 d\u00f9ng Bootstrap \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u n\u1ec1n cho Select kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Bootstrap kh\u00f4ng h\u1ed7 tr\u1ee3 tr\u1ef1c ti\u1ebfp vi\u1ec7c \u0111\u1ed5i m\u00e0u n\u1ec1n cho Select. Nh\u01b0ng b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng CSS t\u00f9y ch\u1ec9nh k\u1ebft h\u1ee3p v\u1edbi Bootstrap \u0111\u1ec3 thay \u0111\u1ed5i m\u00e0u n\u1ec1n c\u1ee7a select. V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;style&gt;\n&nbsp;&nbsp;&nbsp;.form-select.custom-bg {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f8f9fa; \/* m\u00e0u x\u00e1m nh\u1ea1t *\/\n&nbsp;&nbsp;&nbsp;}\n&nbsp;&lt;\/style&gt;\n\n&nbsp;&lt;select class=\"form-select custom-bg\"&gt;\n&nbsp;&nbsp;&nbsp;&lt;option&gt;Ch\u1ecdn m\u1ee5c&lt;\/option&gt;\n&nbsp;&nbsp;&nbsp;...\n&nbsp;&lt;\/select&gt;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>\u0110\u1ecdc th\u00eam: <strong><a href=\"https:\/\/itviec.com\/blog\/bootstrap-color-la-gi\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap Color: C\u00e1ch s\u1eed d\u1ee5ng h\u1ec7 th\u1ed1ng m\u00e0u trong Bootstrap<\/a><\/strong><\/em><\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dropdown-co-thay-th\u1ebf-d\u01b0\u1ee3c-select-khong\"><strong>Dropdown c\u00f3 thay th\u1ebf \u0111\u01b0\u1ee3c Select kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>M\u1eb7c d\u00f9 dropdown v\u00e0 select \u0111\u1ec1u hi\u1ec3n th\u1ecb danh s\u00e1ch l\u1ef1a ch\u1ecdn, nh\u01b0ng &lt;select&gt; d\u00f9ng \u0111\u1ec3 nh\u1eadp li\u1ec7u trong form v\u00e0 g\u1eedi gi\u00e1 tr\u1ecb v\u1ec1 server, c\u00f2n Dropdown l\u00e0 menu h\u00e0nh \u0111\u1ed9ng, kh\u00f4ng t\u1ef1 \u0111\u1ed9ng g\u1eedi d\u1eef li\u1ec7u.<\/p>\n\n\n\n<p>N\u1ebfu b\u1ea1n c\u1ea7n dropdown c\u00f3 ch\u1ee9c n\u0103ng gi\u1ed1ng select, h\u00e3y d\u00f9ng c\u00e1c th\u01b0 vi\u1ec7n JavaScript nh\u01b0 Select2, Choices.js, ho\u1eb7c Bootstrap Select,&nbsp; ch\u00fang k\u1ebft h\u1ee3p gi\u1eefa giao di\u1ec7n \u0111\u1eb9p v\u00e0 t\u00ednh n\u0103ng nh\u1eadp li\u1ec7u.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-dropdown-co-th\u1ec3-s\u1eed-d\u1ee5ng-v\u1edbi-form-khong\"><strong>Dropdown c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng v\u1edbi form kh\u00f4ng?<\/strong><\/h3>\n\n\n\n<p>Dropdown kh\u00f4ng ph\u1ea3i l\u00e0 form input, nh\u01b0ng n\u1ebfu b\u1ea1n mu\u1ed1n d\u00f9ng dropdown \u0111\u1ec3 ch\u1ecdn v\u00e0 g\u1eedi d\u1eef li\u1ec7u trong form, b\u1ea1n v\u1eabn c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c. Tuy nhi\u00ean c\u1ea7n ph\u1ea3i:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>G\u00e1n gi\u00e1 tr\u1ecb dropdown \u0111\u01b0\u1ee3c ch\u1ecdn v\u00e0o 1 <code>&lt;input type=\"hidden\"&gt;<\/code><\/li>\n\n\n\n<li>D\u00f9ng JavaScript \u0111\u1ec3 c\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb khi ng\u01b0\u1eddi d\u00f9ng ch\u1ecdn m\u1ee5c<\/li>\n<\/ul>\n\n\n\n<p>V\u00ed d\u1ee5:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;input type=\"hidden\" name=\"action\" id=\"actionInput\"&gt;\n\n&nbsp;&lt;div class=\"dropdown\"&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;button class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ch\u1ecdn h\u00e0nh \u0111\u1ed9ng\n&nbsp;&nbsp;&nbsp;&lt;\/button&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;ul class=\"dropdown-menu\"&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\" onclick=\"selectAction('view')\"&gt;Xem&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class=\"dropdown-item\" href=\"#\" onclick=\"selectAction('edit')\"&gt;S\u1eeda&lt;\/a&gt;&lt;\/li&gt;\n&nbsp;&nbsp;&nbsp;&lt;\/ul&gt;\n\n&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&lt;script&gt;\n&nbsp;&nbsp;&nbsp;function selectAction(value) {\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('actionInput').value = value;\n&nbsp;&nbsp;&nbsp;}\n&nbsp;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-t\u1ed5ng-k\u1ebft\"><span class=\"ez-toc-section\" id=\"Tong_ket\"><\/span><strong>T\u1ed5ng k\u1ebft<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Select v\u00e0 Dropdown l\u00e0 hai th\u00e0nh ph\u1ea7n th\u01b0\u1eddng g\u1eb7p khi x\u00e2y d\u1ef1ng giao di\u1ec7n, nh\u01b0ng ph\u1ee5c v\u1ee5 m\u1ee5c \u0111\u00edch kh\u00e1c nhau: select d\u00f9ng trong form \u0111\u1ec3 thu th\u1eadp d\u1eef li\u1ec7u, c\u00f2n dropdown ph\u00f9 h\u1ee3p cho menu thao t\u00e1c ho\u1eb7c \u0111i\u1ec1u h\u01b0\u1edbng. Hy v\u1ecdng qua b\u00e0i vi\u1ebft n\u00e0y, b\u1ea1n \u0111\u00e3 hi\u1ec3u r\u00f5 c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 ph\u00e2n bi\u1ec7t select v\u00e0 dropdown, t\u1eeb \u0111\u00f3 \u00e1p d\u1ee5ng hi\u1ec7u qu\u1ea3 v\u00e0o c\u00e1c d\u1ef1 \u00e1n front-end Bootstrap.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Trong l\u1eadp tr\u00ecnh giao di\u1ec7n web, danh s\u00e1ch t\u00f9y ch\u1ecdn l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn nhanh ch\u00f3ng v\u00e0 ch\u00ednh x\u00e1c gi\u1eefa c\u00e1c ph\u01b0\u01a1ng \u00e1n c\u00f3 s\u1eb5n. Bootstrap h\u1ed7 tr\u1ee3 hai c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 t\u1ea1o danh s\u00e1ch t\u00f9y ch\u1ecdn l\u00e0 select v\u00e0 dropdown. D\u00f9 tr\u00f4ng gi\u1ed1ng nhau, nh\u01b0ng ch\u00fang c\u00f3 [&hellip;]<\/p>\n","protected":false},"author":235,"featured_media":88833,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-88804","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi - ITviec Blog<\/title>\n<meta name=\"description\" content=\"T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 dropdown Bootstrap bao g\u1ed3m c\u00fa ph\u00e1p, v\u00ed d\u1ee5 minh h\u1ecda, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 so s\u00e1nh v\u1edbi Select trong l\u1eadp tr\u00ecnh giao di\u1ec7n web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi\" \/>\n<meta property=\"og:description\" content=\"Trong l\u1eadp tr\u00ecnh giao di\u1ec7n web, danh s\u00e1ch t\u00f9y ch\u1ecdn l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn nhanh ch\u00f3ng v\u00e0 ch\u00ednh x\u00e1c gi\u1eefa c\u00e1c ph\u01b0\u01a1ng \u00e1n c\u00f3 s\u1eb5n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-01T08:53:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-10T04:33:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/dropdown-bootstrap-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1077\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ph\u1ea1m H\u1eefu Ng\u1ecdc\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi - ITviec Blog","description":"T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 dropdown Bootstrap bao g\u1ed3m c\u00fa ph\u00e1p, v\u00ed d\u1ee5 minh h\u1ecda, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 so s\u00e1nh v\u1edbi Select trong l\u1eadp tr\u00ecnh giao di\u1ec7n web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi","og_description":"Trong l\u1eadp tr\u00ecnh giao di\u1ec7n web, danh s\u00e1ch t\u00f9y ch\u1ecdn l\u00e0 th\u00e0nh ph\u1ea7n quen thu\u1ed9c gi\u00fap ng\u01b0\u1eddi d\u00f9ng l\u1ef1a ch\u1ecdn nhanh ch\u00f3ng v\u00e0 ch\u00ednh x\u00e1c gi\u1eefa c\u00e1c ph\u01b0\u01a1ng \u00e1n c\u00f3 s\u1eb5n.","og_url":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2025-07-01T08:53:04+00:00","article_modified_time":"2025-07-10T04:33:30+00:00","og_image":[{"width":2048,"height":1077,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/dropdown-bootstrap-vippro.jpg","type":"image\/jpeg"}],"author":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"15 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/"},"author":{"name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad"},"headline":"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi","datePublished":"2025-07-01T08:53:04+00:00","dateModified":"2025-07-10T04:33:30+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/"},"wordCount":2882,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/dropdown-bootstrap-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/","url":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/","name":"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/dropdown-bootstrap-vippro.jpg","datePublished":"2025-07-01T08:53:04+00:00","dateModified":"2025-07-10T04:33:30+00:00","description":"T\u00ecm hi\u1ec3u chi ti\u1ebft v\u1ec1 dropdown Bootstrap bao g\u1ed3m c\u00fa ph\u00e1p, v\u00ed d\u1ee5 minh h\u1ecda, c\u00e1ch s\u1eed d\u1ee5ng v\u00e0 so s\u00e1nh v\u1edbi Select trong l\u1eadp tr\u00ecnh giao di\u1ec7n web.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/dropdown-bootstrap-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2025\/07\/dropdown-bootstrap-vippro.jpg","width":2048,"height":1077,"caption":"dropdown bootstrap l\u00e0 g\u00ec - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/dropdown-bootstrap-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"Dropdown Bootstrap l\u00e0 g\u00ec: H\u01b0\u1edbng d\u1eabn c\u00e1ch d\u00f9ng chi ti\u1ebft cho ng\u01b0\u1eddi m\u1edbi"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/407769a7625b7f955cef615f7a99abad","name":"Ph\u1ea1m H\u1eefu Ng\u1ecdc","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/Pham-Huu-Ngoc-technical-content-reviewer-e1712135841473-100x100.jpg","caption":"Ph\u1ea1m H\u1eefu Ng\u1ecdc"},"url":"https:\/\/itviec.com\/blog\/author\/pham-huu-ngoc-2\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/235"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=88804"}],"version-history":[{"count":5,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88804\/revisions"}],"predecessor-version":[{"id":89257,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/88804\/revisions\/89257"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/88833"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=88804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=88804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=88804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}