怎样让bootstrap设计的页面在手机端也能响应式自适应 让html在手机端自动适应是不是要写几个版本的CSS样式呢

怎样让bootstrap设计的页面在手机端也能响应式自适应

默认就是可以在手机端自适应的。
注意一下它的栅栏布局里的介绍：
手机上一般是用-xs
比如：

让html在手机端自动适应是不是要写几个版本的CSS样式呢？

如果是针对于手机使用，不必写几个版本，只需要做好行列样式的宽度在最大屏幕和最小屏幕中显示正常即可。
遇到不宽度兼容的时候需要调整样式宽度就需要让css做判断，使用不同的样式，这个时候就需要使用两种或多种样式，以下就是对于一个样式在不同屏幕下显示不同效果的样例，@media是一个选择器，括号内为条件：
@media screen and (min-width: 320px)  {
.mine_coupon_words {
float: left
width: 50%
}
}
@media screen and (min-width: 414px)  {
.mine_coupon_words {
float: left
width: 50%
margin-top:15px
}
}
@media screen and (min-width: 800px) {
.mine_coupon_words {
float: left
width: 50%
margin-top:40px
}
}
@media screen and (min-width: 1024px)  {
.mine_coupon_words {
float: left
width: 50%
margin-top:80px
}
}