bootstrap能不能支持手机端-创新互联

这篇文章主要介绍了bootstrap能不能支持手机端，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

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

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 容器。

如下

固定宽度布局

...

或者 流式布局

...

在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;
  }
}
……

感谢你能够认真阅读完这篇文章，希望小编分享bootstrap能不能支持手机端内容对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，遇到问题就找创新互联网站建设公司，，详细的解决方法等着你来学习!