zoukankan      html  css  js  c++  java
  • bootstrap

    先要拆分:

      .navbar 

    1. 先变成相对定位
    2. 设置最小高度为50px;
    3. 设置底部边距为20px
    4. 然后设置一个 透明边框!
    5. 边框倒角 4px   //@media (min-768px) - 最小宽度为 768px 时生效(大于等于 768px的时候)

      .navbar-default

    1. 一上来就设置了个背景和边框。
    2. default 对应的是  inverse 反向

      .navbar-header 

    1. margin-right: -15px;  margin-left: -15px;    // container的情况下。
    2. @media (min- 768px) //最小宽度为 768px 时,margin 是0;   // container的情况下。
    3. float:left;

      .navbar-brand

    1. 设置字体颜色
    2. 设置了hover
    3. 如果是inverse则设置反色
    4. 浮动为 left
    5. height:50px // 之前设置了min-height:50px  ^_^
    6. padding:15px ,字体大小 18,以及 line-height:20px 保证居中的;
    7. 下面的img 设置为了 block,独占一行

      .navbar-toggle

    1. position: relative;
      float: right;
      padding: 9px 10px;
      margin-top: 8px;
      margin-right: 15px;
      margin-bottom: 8px;
      background-color: transparent;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;

    2. @media (min-768px){display:none}
    3. .navbar-toggle .icon-bar {
      display: block;
      22px;
      height: 2px;
      border-radius: 1px;
      }

       div.collapse

    1. display: none;
    2. visibility: hidden;

      div.navbar-collapse

     

  • 相关阅读:
    外观模式
    享元模式
    装饰模式
    适配器模式
    组合模式
    典型用户模板与场景
    知识圈APP开发记录(十二)
    知识圈APP开发记录(十一)
    知识圈APP开发记录(十)
    周总结(七)
  • 原文地址:https://www.cnblogs.com/Tachi/p/5985040.html
Copyright © 2011-2022 走看看