Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。row 行，-md 桌面显示器-ms 平板显示器-xs 手机显示器1行有12列<div class= "row">　　<div class = "col-md-12"></div>   <div class = "col-ms-12"></div><div class = "col-xs-12"></div>    //表示一行中有12列</div>

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/bootstrap.min.css"/><script language="JavaScript" src="js/jquery-3.js"></script><style type="text/css">*{top: 0px;padding: 0px;text-decoration: none;list-style-type: none;}.top-styl{height: 50px;border: 1px solid red;background-color: #000000;}.img-styl{width: 174px;height: 50px;background: url("imges/logo.png")no-repeat 0px 3px;background-size: contain;float: left;}.sousuo-styl{width: 187px;float: left;}.top-search-input{width: 150px;padding: 0 5px;height: 30px;border: 0;background: #363636;float: left;color: #ccc;}.top-search-submit{width: 30px;height: 30px;border: 0;background:  green url("imges/zoom.gif")center center no-repeat;float: left;cursor: pointer;　　　　　　　　　　//光标指针}.dao-styll{float: left;font-size: 16px;width: 329px;margin-left: 33px;margin-top: 11px;}.dao-styll li{float: left;position: relative;　　　　　　//相对定位text-align: center;　　　　　　//居中padding: 0 7px;}.dao-styll >li:hover{background-color: #999;}.dao-styll >li >a{color: #FFF;width: 100%;height: 34px;text-decoration: none;　　　　//取消下划线}.dz-styl{float: right;margin: -19px -9px 6px 21px;}.imgs-styl{padding: 11px 0px 0px 114px;float: right;margin: 0px -98px -3px 8px;}.green-styl{color: green;}.zc-styl{color: white;}a{text-decoration: none;}</style>
</head>
<body><div class="container-fluid">   　　　　　　　　　　//fluid表示用 百分比<div class="row">　　　　　　　　　　　　　　　//row  行<div class="top-styl col-md-12">　　　　　　　　//col-md-12 每行桌面占12列<div class="row"><div class=" col-md-offset-1 col-md-9">　　　//col-md-offset-1 列偏移1列<div class="row"><div class="col-md-3 col-xs-4"><div class="img-styl"></div></div><div class="col-md-3 "><div class="sousuo-styl" style="padding-left: 7px; margin: 8px auto;"><input class="top-search-input" value="" type="text"><inputclass="top-search-submit" type="submit" value="" /></div></div><div class="col-md-4 hidden-xs" style="padding: 0px"><ul class="dao-styll"><li class=""><a href="#">风格</a></li><li class=""><a href="#">造型师</a></li><li class=""><a href="#">众分享</a></li><li class=""><a href="#">我的美丽衣橱</a></li></ul></div><div class="col-md-2"><div class="imgs-styl"><img src="imges/sina.gif"></div><div class="dz-styl"><span><a href="#" class="green-styl">登录</a>&nbsp;|&nbsp;</span><span><a href="#" class="zc-styl">注册</a></span></div></div></div></div></div></div></div><div class="row"><div class="visible-md"><h1>当前为桌面显示</h1></div>　　　//visible默认占满整行　<div class="visible-sm"><h1>当前为平面显示</h1></div><div class="visible-xs"><h1>当前为手机显示</h1></div></div></div>
</body>
</html

效果显示图：

响应式框架Bootstrap栅格系统相关推荐

  1. 移动WEB开发之响应式布局--Bootstrap栅格系统

    栅格系统简介 栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数 的定义来模块化页面布局. Bo ...

  2. 响应式布局 bootstrap栅格系统

    阿里百秀案例制作 1.1 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 项目结构搭建 Bootstrap 使用四步曲: 创建 ...

  3. 响应式设计-Bootstrap栅格布局

    响应式布局:就是一个网站为了兼容多个终端,而不是为每个终端制定特定的版本.这个概念是为解决移动互联网浏览而诞生的. 全面了解Bootstrap可以看:http://v3.bootcss.com/css ...

  4. 【响应式】foundation栅格布局的“尝鲜”与“填坑”

      提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...

  5. 最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码

    <h2>源码介绍</h2> 分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码,前端界面采用BootStrap框架设计,使得博客系统界面 ...

  6. 【HTML+CSS】移动端布局之响应式布局+Bootstrap框架

    学习视频及笔记参考来源: 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一.响应式开发 1.响应式开发原理 原理:就是使 ...

  7. 移动web开发 17-1 响应式布局 bootstrap首页 框架 阿里百秀项目

    1 响应式开发原理 1.1 响应式开发原理 核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法 当屏幕宽度<=768 ...

  8. php写网页6,基于ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码，ThinkPHP6开发的后台权限管理系统...

    源码介绍 基于最新ThinkPHP6+AdminLTE框架开发的响应式企业网站CMS系统PHP源码,基于最新版本的ThinkPHP 6.0.0RC3框架,后台前端框架采用AdminLTE.系统的核心理 ...

  9. 如何使用BOOTSTRAP 栅格系统？

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...

最新文章

  1. 这两者需要映射到相同的服务器,从而无法打开项目的解决方法：
  2. 14. 不修改数组找出重复的数字【难度: 一般 / 知识点: 抽屉原理 二分】
  3. 通过一个图来简单描述一下 socket 链接建立以及通信的模型
  4. 编程迷宫_少儿创意编程（特23）scratch之迷宫模式探索（上）
  5. php 文件写入磁盘错误,Linux磁盘读写故障的通常处理流程
  6. db2 删除存储过程_数据库教程-SQL Server存储过程使用及异常处理
  7. 内存数据库和关系数据库之间的数据同步原理
  8. 我对ThreadLocal的理解
  9. html5 css3考试f卷,HTML5 CSS3 JavaScriptWeb前端开发自测试卷3.docx
  10. mysql 复制方式_MySQL复制方法
  11. IOS NSLayoutConstraint 页面布局（通过代码添加约束）
  12. SQL数据库学习之路（八）
  13. 能源消耗总量计算公式_七、能源统计（21）
  14. 处理文件的fseek函数
  15. FPGA图像处理基础----直方图均衡化
  16. android nef转jpg格式文件,nef格式转换成jpg
  17. 使用windows API区分移动硬盘和本地硬盘
  18. MobaXterm 复制粘贴快捷键
  19. 谷歌浏览器开发工具调试样式
  20. vue+elementUI+后端springboot多用户评论、回复、点赞

热门文章

  1. Linux内存page,Linux虚拟内存管理 - Page Table的作用
  2. hashmap 扩容是元素还是数组_HashMap 中的容量与扩容实现
  3. char强制类型转换为int_C语言学习第5篇---类型转换概念理解
  4. android-x86 镜像iso下载_Windows 10（1909）最新12月更新版MSDN官方简体中文原版ISO镜像下载+激huo工ju...
  5. 系统间账号认证系统同步方案
  6. 五、Kafka 用户日志上报实时统计之应用概述
  7. Winform DataGridView数据绑定问题
  8. switch变量的作用 域问题
  9. python把英语句子成分字母_句子成分的表达字母
  10. MATLAB正太分布函数