<!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"><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="#">风格</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. 最常用前端框架BootStrap——栅格系统

      前  言   Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mix ...

  2. Bootstrap4响应式布局之栅格系统

    前面说了Bootstrap4的下载和简单使用,现在我们接着往下学习,Bootstrap4的响应式布局主要依靠栅格系统来实现的.面老K先来讲解一下Bootstrap4的栅格系统,让你能够更快的了解Boo ...

  3. 响应式框架Bootstrap

    概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...

  4. fcc 响应式框架Bootstrap 练习2

    text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary  text-center"> ...

  5. bootstrap第一天,响应式布局，栅格系统运用

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  6. fcc 响应式框架Bootstrap 练习1

    需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中: <link rel="stylesheet" href="//cdn.bootcss ...

  7. fcc 响应式框架Bootstrap 练习3

    class="container-fluid"控制宽度100% <div class="container-fluid"> <h3 class ...

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

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

  9. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

随机推荐

  1. Ubuntu下通过makefile生成静态库和动态库简单实例

    本文转自http://blog.csdn.net/fengbingchun/article/details/17994489 Ubuntu环境:14.04 首先创建一个test_makefile_gc ...

  2. DOM 遍历-同胞

    在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() nextAll() nextUntil() prev() prevAll() prev ...

  3. Problem B: 农夫果园 简单点，出题的方式简单点

    我走过最长的路,就是教主的套路#include <iostream> #include <string> using namespace std; class Fruit { ...

  4. WebP 的前世今生

    除了视频,图片占据了 PC 和 App 的大部分流量,为运营方带来高额的成本支出,同时过多的图片加载会影响到网站与 App 的加载速度.因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情. ...

  5. Python 字典和json的本质区别（个人理解）

    个人理解:字典和json显示的时候差不多,但是数据类型不同(如下图): 字典的类型是字典dict json的类型是字符串str 接口测试是传参数payload时有时候是传的字符串,应该将payload ...

  6. 【Win 10 应用开发】UI Composition 札记（四）：绘制图形

    使用 Win 2D 组件,就可以很轻松地绘制各种图形,哪怕你没有 D2D 相关基础,也不必写很复杂的 C++ 代码. 先来说说如何获取 Win 2D 组件.很简单,创建 UWP 应用项目后,你打开“解 ...

  7. 对SQL Server事务的4个隔离级别的理解

    事务隔离级别的简单理解   ANSI/ISO SQL标准定义了4种事务隔离级别,这些隔离级别是根据事务并行出现的4个"现象"定义的. 4个现象是: 1.更新丢失(Lost Upda ...

  8. 前端必须收藏的CSS3动效库！！！

    现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...

  9. 前端面试题系列（1）：doctype作用 标准模式与兼容模式

    1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...

  10. Tomcat多域名访问

    对于域名解析相信很多小伙伴都了解过,就是我们在万网购买一个域名,比如hpugs.com,然后呢?我们希望域名与我们的服务器绑定,然后通过域名直接访问我们的项目,这就是本篇要和大家一起探讨的问题.下面开 ...