要让bootstrap设计的页面在手机上具有响应性和适应性，需要用到Bootstrap的响应式布局技术和一些基本的HTML和CSS知识。以下是一些步骤和技巧可以帮助您实现这个目标。
1. 使用viewport meta标签：在标签内添加如下代码，这个标签可以让页面自动适应不同的屏幕大小和设备方向。
```
```
2. 使用Bootstrap的栅格系统：Bootstrap的栅格系统可以帮助您创建响应式布局，通过将页面划分为不同的栏目和行，并使用不同的CSS类，可以使页面在不同的屏幕上具有不同的布局。
```
```
此代码将创建一个自适应的容器，其包含两列，每列占屏幕宽度的50%。在较小的屏幕上，这两列将变成垂直布局。
3. 使用Bootstrap的导航组件：Bootstrap提供了许多导航组件，如导航栏、导航菜单、导航标签等等。使用这些组件可以方便地在不同的屏幕上展示不同的导航形式。
```
```
此代码将创建一个响应式的导航栏，用户可以在不同的屏幕上通过点击按钮来展开和收起导航菜单。
4. 使用媒体查询（media query）：媒体查询是CSS3的一项功能，允许根据不同的设备特性来应用不同的CSS样式。通过使用媒体查询，可以根据屏幕大小和设备类型来改变页面的样式和布局。
```
@media (max-width: 768px) {
/* 在小屏幕上应用的样式 */
}
```
此代码中的媒体查询将在屏幕宽度小于等于768像素时应用特定的CSS样式。
如何把
网页设计成WAP页面？
WAP（Wireless Application Protocol）是一种面向移动设备的标准化通信协议，允许用户使用移动设备访问互联网。设计WAP页面需要考虑以下几个方面。
1. 简化页面内容：由于移动设备屏幕较小，用户在移动设备上访问网页时，会更喜欢快速加载简化的内容。因此，在设计WAP页面时，应尽量减少冗余内容和不必要的图片、脚本等元素，以加快页面加载速度。
2. 调整布局和尺寸：为了适应移动设备的屏幕，需要使用媒体查询和CSS来调整布局和元素尺寸。您可以使用@media查询设置页面在不同的屏幕尺寸上的样式。
3. 使用简单的导航：WAP页面上的导航应尽量简化和明确，以提供更好的用户体验。可以使用简单的链接、按钮和滑动菜单等导航方式。
4. 压缩和优化图像：移动设备的带宽和处理能力有限，因此在WAP页面上使用图像时应选择合适的格式，并进行压缩和优化，以提高加载速度。
5. 考虑网络状况：移动设备通常在不稳定的网络环境下运行，因此在WAP页面设计中，需要考虑网络延迟和带宽限制。可以使用一些技术手段，例如使用短缓存时间、延迟加载和Ajax等，来提高页面的响应速度和用户体验。
总结起来，要实现Bootstrap设计的页面在手机上的响应性和适应性，需要结合HTML、CSS、Bootstrap的响应式布局和媒体查询等技术，来对页面进行调整和优化。同时，在设计WAP页面时，还需要考虑移动设备的特点和限制，并采取相应的策略来提供更好的用户体验。
