zoukankan      html  css  js  c++  java
  • BootStrap--CSS组件

    1.全局CSS样式——栅格布局系统

     列的偏移问题(offset)

    .col-xs-offset-1~.col-xs-offset-12         在lg/md/sm/xs屏幕下偏移

    .col-sm-offset-1~.col-sm-offset-12       在lg/md/sm屏幕下偏移

    .col-md-offset-1~.col-md-offset-12     在lg/md屏幕下偏移

    .col-lg-offset-1~.col-lg-offset-12         在lg屏幕下偏移

    2.全局CSS样式——表单——次重点&难点

      Bootstrap中的表单分为三种:

      (1)默认表单

    <form>

    <div class="form-group">

    <label class="control-label"></label>

    <input class="form-control">

    <span class="help-block"></span>

    </div>

    </form>

     (2)行内表单

    <form class="form-inline">

    </form> 

    (3)水平表单

    <form class="form-horizontal">  

    使用栅格系统来控制label/input/help-block的宽度

    </form>

    3.组件——图标字体——愉快&简单

      Glyphicons是一套收费的图标字体,提供了Web/移动开发中常用的小图标

      Bootstrap中可以免费使用这套字体中的250+个;以服务器端字体形式出现的,即客户端若访问了使用Glyphicons字体的网站,会自动从服务器端下载对应的字体文件。

    @font-face {

      font-family: 'Glyphicons Halflings';

      src: url('../fonts/glyphicons-halflings-regular.eot');

    }

    .glyphicon {

      position: relative;

      top: 1px;

      display: inline-block;

      font-family: 'Glyphicons Halflings';

      font-style: normal;

      font-weight: normal;

      line-height: 1;

    }

    提示:(1)图标字体的本质不是图片,而是字体;故凡是可以使用文字的地方都可以使用不同字体

    (2)glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素!如:<span class="glyphicon glyphicon-***"></span> 

    4.组件——按钮组——简单

      .btn-group                      水平按钮组

      .btn-group-vertical            竖直按钮组

      .btn-group.btn-group-justified         水平且两端对齐的按钮组

      .btn-group-lg

      .btn-group-sm

      .btn-group-xs

    5.组件——下拉菜单——小重点&简单

      下拉菜单必须HTML结构:

      <div class="dropdown">                                   相对定位的父元素

    <a data-toggle="dropdown">触发元素</a>

    <ul/div class="dropdown-menu">                 绝对定位

    隐藏元素

    </ul/div>   

      </div>

    6.组件——导航——小重点&简单

     提示:此处的导航不是指导航条!

     Bootstrap提供了两种形式的导航:

      (1)标签页式导航

    <ul class="nav  nav-tabs">

    </ul>

      (2)胶囊式导航

    <ul class="nav  nav-pills">

    </ul>

       此外,还有两种导航变种:

       (1)两端对齐的导航    .nav.nav-tabs/pills.nav-justified

       (2)竖直放置的胶囊导航   .nav.nav-pills.nav-stacked

     

      

    7.组件——路径导航(面包屑)/分页/标签/徽章/巨幕/水井/页头

      面包屑:  .breadcrumb

      分页:    .pagination        .pager

      标签:    .label

      徽章:         .badge

      巨幕:   .jumbotron

      水井:   .well

      页头:  .page-header

    8.组件——响应式导航条——重点&难点

    响应式导航条:在PC和平板中默认要显示所有的内容;但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项。

      基础class: .navbar   

      Bootstrap中导航条的按位置:

    1)顶部导航条

    2)底部导航条

      Bootstrap中导航条的按颜色:

    1)浅色底深色的字           .navbar-default

    2)深色底浅色的字           .navbar-inverse

      Bootstrap中导航条的按定位:

    1)相对定位position: relative          默认值

    2)固定定位position: fixed      .navbar-fixed-top/bottom

      导航条的结构:

      <div class="navbar 颜色 定位"> 

    <div class="container">

    <!--导航条的头部:商标+按钮-->

    <div class="navbar-header">

    <a class="navbar-brand">

    <button class="navbar-toggle">

    </div>

    <!--导航条折叠菜单:菜单、按钮、搜索框、链接、文本...-->

    <div class="navbar-collapse">

    <ul class="nav navbar-nav">

    <form class="navbar-form">

    <button class="navbar-btn">

    <span class="navbar-text">

    <a class="navbar-link  navbar-text">

    </div>

    </div>

      </div>

  • 相关阅读:
    83. Remove Duplicates from Sorted List
    35. Search Insert Position
    96. Unique Binary Search Trees
    94. Binary Tree Inorder Traversal
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    111. Minimum Depth of Binary Tree
    169. Majority Element
    171. Excel Sheet Column Number
    190. Reverse Bits
  • 原文地址:https://www.cnblogs.com/baiyanfeng/p/5042907.html
Copyright © 2011-2022 走看看