Bootstrap禁用响应式布局的实现方法
程序员文章站
2023-12-13 18:29:16
在bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。
不过正所谓“萝卜青菜各有所爱”,如果你想要使用b...
在bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行。
不过正所谓“萝卜青菜各有所爱”,如果你想要使用bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局。
移除标签
禁用第一步,就是需要移除在head标签中添加的
<meta name="viewport" content="width=device-width, initial-scale=1.0”>
该标签的作用在于使得你的网站在移动设备端被访问的时候,不会进行缩放,而是以100%的比例显示在移动设备中。
设定宽度
禁用第二步,为.container类设置一个宽度,从而覆盖它根据设备宽度而自动调节的功能。
例如你可以设定.container {width: 980px;},为了起到覆盖原bootstrap样式的作用,最好将你自定义的css文件在bootstrap.css文件之后引入。
删除菜单折叠
倘若你采用了导航栏,那么就要注意删掉菜单在移动端的折叠样展开式(主要通过button的navbar-toggle来实现)。
栅格布局
除此之外,如果你采用了栅格布局,那么就要采用.col-xs-*(最小设备栅格类)的样式来代替.col-md-*以及.col-lg-*,这样就能确保栅格能够在所有设备中展开。
bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面,使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性,就像这个非响应式布局实例页面一样。
以上所述是小编给大家介绍的bootstrap禁用响应式布局的实现方法,希望对大家有所帮助
推荐阅读
-
Bootstrap禁用响应式布局的实现方法
-
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
-
Bootstrap禁用响应式布局的实现方法
-
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
-
css3的@media属性实现页面响应式布局示例代码
-
rem布局完成响应式开发,通俗且详细的原理解析和代码实现
-
.NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
-
一种业界通用的响应式布局解决方法
-
vue-cli中实现响应式布局的方法
-
Bootstrap响应式导航由768px变成992px的实现代码