zoukankan      html  css  js  c++  java
  • bootstrap day1 day2 栅格系统 水平表单 下拉列表 按钮的应用 导航等---

    <meta http-equiv="X-UA-Compatible" content='IE=edge'/>

    为了兼容IE所设置的属性

     

     

        栅格系统

       包括行与列

       如何创建一行div.row

      如何创建div.col 对应的分辨率-N[0-12]

      lg       >=1200px      大显示屏

      md     [992px ,-1200px]  中显示屏

      sm     [768px-992px]     平板

       xs     [0-768px]             手机端

     

       col-xs-1

       col-xs代表  列中用xs栅格系统

         1代表        1个列表框占1个列,所以一行中可以显示12个列表框(因为一行中只能显示12个列)

     col-xs-2  :一个列表框占两个列,所以一行中只能显示6个列

     

     

    列排序(col-md-push)只会改变当前这个格子的顺序不会影响别的格子  

    列偏移(col-md-offset)整个一行往右偏移 (影响后面的格子的位置)

       表格

     

     实现各行换色的效果(table-striped) 

    :nth-child(even) 也可以实现 ,但存在兼容性

        

        

        响应式表格   <table class="table table-responsive">

    表单

     

     按钮大小为:btn-md    btn-lg   btn-xs  btn-sm

       按钮组添加类btn-group

     水平排列的表单

    按钮

    激活状态

     

     

     

     

     表单组框

    下面的百度一下想要跟前面的输入框为一体 如果百度一下是直接写在span标签中时就要在span标签处添加一个input-group-addon类

        如果像下面的例子中百度一下是用button标签写的然后嵌套在span标签中的这时就要在span标签处添加一个input-group-btn类

    效果 

    小图标(font和cssde 位置不要改变)

    下拉菜单

    效果

    解析 此时的箭头是向上的 菜单点击也出现在上面

    如果想要箭头往下 菜单点击的时候也出现在下面只需把最外面的容器dropup类改为dropdo类就可以了  小三角形会随着 父容器类的改变而自动变为往下的

    其中span里的类caret是控制三角形的类

     与按钮配合使用 把dropdown改为btn-group

     

    下拉菜单的例子

    组合式下拉菜单例子

    效果(此时的点击我与三角形事分开的)

     选项卡式的导航

    其中加上active类表示选中状态  

    效果

    胶囊式的导航

    墩叠式的导航

    自适应导航

    屏幕分辨率小于768效果变成

    下拉菜单

     

     效果

    效果

  • 相关阅读:
    ThinkPHP函数详解:C方法
    ThinkPHP函数详解:A方法
    php中的中文字符串长度计算以及截取
    JQ $("#form1 :input" ).length 与 $("#form1input").length有什么区别?
    php中的isset和empty的区别与认识
    谈谈ACM带来的一些东西
    HDU 4374--F(x)
    奖学金
    数字排序
    查找数字
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6543573.html
Copyright © 2011-2022 走看看