bootstrap支持手机吗

编辑: admin 分类: javascript 发布时间: 2022-06-25 来源:互联网

bootstrap支持手机端；Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机；并且自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。

本文操作环境：Windows7系统，bootstrap2.3.2版本，Dell G3电脑。

推荐：《bootstrap视频教程》《css视频教程》

bootstrap响应式布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

首先栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。bootstrap根据不同屏幕尺寸，选择不同的栅格选项。一共有四种栅格选项，超小屏（手机）、小屏（平板）、中屏（桌面）、大屏（超大桌面）。栅格系统分为12列，即每行最多可容纳12列。若里，一个.row内包含的列（column）大于12个（即，一行中的栅格单元超过12个单元），则会自动排版，总之，一行只能最多12列，具体分析往后阅读。

原理：

通过CSS3 Media Queries（媒体（设备）查询），媒体查询是让页面内容在不同的媒体环境下运行时可以展示不同的样式（这个样式当然是由我们来书写规定的）。

@media是CSS3中规定的属性，它可以实现针对不同媒体设备来设置不同的样式的目的。而且就算是在同一设备中它也可以在你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

应用：

Bootstrap主要用到min-width、max-width，以及and语法，用于在不同的分辨率下设置不同的CSS样式。

@media的语法

@media mediatype and|not|only (media feature) {
CSS-Code;
}

其中mediatype有print（打印设备）、screen（用于电脑屏幕，平板电脑，智能手机等）、speech（应用于屏幕阅读器等发声设备）；media feature则是用来规定如最大宽度或者最小宽度。

我们来看看bootstrap中布局容器的例子：

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。

如下

固定宽度布局

<div class="container">
...
</div>

或者 流式布局

<div class="container-fluid">
...
</div>

在bootstrap的css文档中@media属性

1591~1605行

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
……

以上代码实现了随浏览器宽度的变化container容器的宽度也进行变化。

以上就是bootstrap支持手机吗的详细内容，更多请关注海外IDC网其它相关文章！

【本文转自：防御ddos http://www.558idc.com/stgf.html提供,感谢支持】
更多阅读