响应式框架Bootstrap栅格系统的实例


Posted in Javascript onDecember 19, 2017

实例如下:

<!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" rel="external nofollow" />
 <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"><input
          class="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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >风格</a>
         </li>
         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >造型师</a></li>
         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >众分享</a>
         </li>
         <li class=""><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >我的美丽衣橱</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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="green-styl">登录</a> | </span><span>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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栅格系统的实例

响应式框架Bootstrap栅格系统的实例

 响应式框架Bootstrap栅格系统的实例

以上这篇响应式框架Bootstrap栅格系统的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 类方法定义还是有点区别
Apr 15 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
浅析Ajax语法
Dec 05 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
vue.js element-ui validate中代码不执行问题解决方法
Dec 18 #Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 #Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 #Javascript
Vue下的国际化处理方法
Dec 18 #Javascript
webpack多页面开发实践
Dec 18 #Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 #Javascript
You might like
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
php类常量的使用详解
2013/06/08 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
js性能优化技巧
2015/11/29 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
局域网标准
2016/09/10 面试题
积极向上的团队口号
2014/06/06 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
导游词之杭州西湖
2019/09/19 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
JAVA API 实用类 String详解
2021/10/05 Java/Android
Python制作表白爱心合集
2022/01/22 Python