BootStrap入门响应式栅栏

介绍：
1. 注意:
bootstrap将每一行分成12份
媒体查询:

假如大屏幕,每行显示6个超大电脑,屏幕分辨率>1200     使用: col-lg-2假如屏幕小点,每行显示4个992<屏幕分辨率<1200          使用: col-md-3再小点,每行显示2个768<屏幕分辨率<992           使用: col-sm-6继续小,每行显示1个  屏幕分辨率<768               使用:col-xs-12

2. 代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!--增加移动端的条件 viewport--><meta name="viewport" content="width=device-width, initial-scale=1"><title>哈哈</title><!--导入bootstrap的css--><link rel="stylesheet" href="css/bootstrap.min.css" /><!--导入jquery.js--><script type="text/javascript" src="js/jquery-1.11.0.js"></script><!--导入bootstrap.js--><script type="text/javascript" src="js/bootstrap.min.js"></script></head><body><div class="container-fluid"><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div><div style="border: 2px solid red;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6">1</div></div></body></html>

3. bootstrap将每一行分成12份，然后更具屏幕的大小进行分割。

4. 效果图，
col-sm-4的效果图，这样分析，一共12份，sm是一个占4份，则会显示3个

col-xs-6的效果图，一共12份，xm是一个占6份，则会显示2个

BootStrap入门响应式栅栏相关推荐

Bootstrap 3 响应式上传图片，时间拾取器和表单认证 Fileinput, Date/Time Pickr, Validator...
1. Bootstrap 3 响应式上传图片 bootstrap-fileinput 项目地址: https://github.com/kartik-v/bootstrap-fileinput Usa ...
Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板
Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...
Bootstrap嵌入响应式视频（可无障碍浏览）的方法
Bootstrap嵌入响应式视频(可无障碍浏览)的方法 2016-01-11 10:51 网页设计标签:Bootstrap 代码 5845 发表评论昨晚,我测试了下Bootstra ...
bootstrap之响应式开发-栅栏系统
响应式开发原理就是使用媒体查询针对不同宽度的设备进行样式布局和样式的设置,从而适配不同设备的目的. 设备划分尺寸区别响应式尺寸划分超小屏幕(手机) <768px 100% 小屏设备(平板 ...
Bootstrap下拉菜单失效的解决方法+使用Bootstrap制作响应式网页
目录问题原因解决方案顺便记录一下使用效果图 HTML CSS 目录问题原因两个js文件冲突/没有引入指定的js文件我们不能同时引入这两个js只能引入其一,同时引入会使得部分功能失效解决 ...
bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
基于 Bootstrap 的响应式后台管理面板
你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...
响应式网站设计：利用Bootstrap设计响应式网站-index.html
响应式网站设计-index.html <!DOCTYPE html> <html><head><meta charset="UTF-8"& ...
Bootstrap实战 - 响应式布局
一.介绍响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
ECharts+Bootstrap实现响应式中国地图
BootStrap+Echarts实现响应式中国地图效果图: 1315×860 具体代码实现 <!DOCTYPE html> <html lang="en"&g ...

BootStrap入门响应式栅栏

BootStrap入门响应式栅栏相关推荐

最新文章

热门文章