1. 引言
Bootstrap是一个开源的前端框架，提供了丰富的组件和样式，可以帮助开发人员快速构建响应式网页。其中，下拉菜单是常见的交互组件之一，但是默认情况下，Bootstrap的下拉菜单是基于JavaScript实现的，这会导致没有JS用户无法正常使用。本文将介绍如何通过CSS3技术使Bootstrap 3下拉菜单适用于没有JS的用户。
2. CSS3实现下拉菜单
2.1. 使用:checked伪类
在HTML中，我们可以使用input元素的radio或checkbox类型与label元素搭配使用，通过:checked伪类选择器来实现切换菜单的效果。
/* CSS样式 */
/* 隐藏下拉菜单 */
.dropdown-menu {
display: none;
}
/* 当checkbox被选中时显示下拉菜单 */
.dropdown-toggle:checked + .dropdown-menu {
display: block;
}
上述代码中，我们通过设置.dropdown-menu的display为none来隐藏下拉菜单，在checkbox被选中时，用选择器.dropdown-toggle:checked + .dropdown-menu来选中与.dropdown-toggle相邻的.dropdown-menu元素，并将其display设置为block来显示下拉菜单。
2.2. 多级下拉菜单
如果需要实现多级下拉菜单，我们可以使用CSS的伪元素和选择器技巧，来实现菜单的切换与显示。
/* CSS样式 */
/* 隐藏下拉菜单 */
.dropdown-menu {
display: none;
}
/* 当checkbox被选中时显示下拉菜单 */
.dropdown-toggle:checked + .dropdown-menu {
display: block;
}
/* 为多级菜单的子菜单添加箭头 */
.dropdown-toggle:after {
content: "\25BE";
display: inline-block;
margin-left: 5px;
}
/* 当多级菜单的子菜单被选中时显示 */
.dropdown-menu .dropdown-toggle:checked + .dropdown-menu {
display: block;
position: relative;
margin-left: 20px;
top: 0;
left: 100%;
}
上述代码中，通过.dropdown-toggle:after选择器和content属性，为多级菜单的子菜单添加了一个箭头图标。同时，我们使用.dropdown-menu .dropdown-toggle:checked + .dropdown-menu选择器来选中多级菜单的子菜单，并设置其display为block来显示。
3. 无JS用户的友好提示
对于没有JS的用户，在下拉菜单无法正常工作时，我们需要提供友好的提示。可以通过在没有.js类的body元素上添加一些样式，来隐藏下拉菜单，并显示一个类似于“请启用JavaScript以使用下拉菜单”的提示信息。
/* CSS样式 */
body.no-js .dropdown-menu {
display: none;
}
body.no-js .js-disabled-msg {
display: block;
}
上述代码中，我们通过.no-js类来选中没有.js类的body元素，设置.dropdown-menu的display为none来隐藏下拉菜单，并设置.js-disabled-msg的display为block来显示提示信息。
4. 结论
通过使用CSS3技术，我们可以实现在没有JS的情况下，使Bootstrap 3下拉菜单适用于用户。我们可以通过:checked伪类来实现单级下拉菜单的显示与隐藏，通过使用伪元素和选择器技巧，来实现多级下拉菜单的切换与显示。同时，我们还可以通过在没有.js类的body元素上添加样式，来提供友好的提示信息给没有JS的用户。
通过本文的介绍，希望读者能够理解并掌握如何通过CSS3技术使Bootstrap 3下拉菜单适用于没有JS的用户。