响应式框架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 相关文章推荐
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
简单的js分页脚本
2009/05/21 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python实现一个简单的MySQL类
2015/01/07 Python
详解Python中for循环的使用方法
2015/05/14 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
python logging添加filter教程
2019/12/24 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
超市开学活动方案
2014/03/01 职场文书
珍惜水资源建议书
2014/03/12 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
趣味运动会加油词
2015/07/18 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
《废话连篇——致新手》——chinapizza
2022/04/05 无线电