首页 > 代码库 > Bootstrap入门及其常用内置实现

Bootstrap入门及其常用内置实现

BootStrap是一个专门做页面的
  1.BS是基于HTML CSS JS 的一个前端框架(半成品)
  2.预定义了一套CSS样式与JQurey实现
  3.BS和Validation类似,都是JQ的插件,需要与与之配对的JQuery版本一起使用
  4.BS内置了一些实现,也可以进行自定义实现,现在学习前者

BootStrap重要特点:
  1.可以实现响应式布局(在不同大小的屏幕中显示处不同的状态)

BootStrap使用准备:
  1.导入与之匹配的JQ
  2.将dist目录下的三个文件夹复制进当前项目(这三个文件夹必须平级)(内置实现)

BootStrap模板:
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  /*这三个标签必须这head标签之后,其它所有标签之前*/

  <link href="http://www.mamicode.com/css/bootstrap.css" rel="stylesheet">
  <script src="http://www.mamicode.com/js/jquery-1.11.3.min.js"></script>
  <script src="http://www.mamicode.com/js/bootstrap.js"></script>
  /*引入BS内置的CSS,引入JQuery,引入BS的JS文件*/

  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  /*浏览器兼容,在IE9以下浏览器使用这个框架时需要使用*/

BootStrap布局:
  1.容器:
    方式1:使用 class = "container"
      效果:一般情况(pc机)左右有留白,移动设备左右无留白
    方式2:使用class = "container-fluid"
      左右无留白
  2.栅格
    A:行 :class="row"
    B:列:class="col-xx-单元列数"
      BS中默认将一行分成12个单元列,我们要指定自己的单元格时,必须要指定它所占的单元列数

    注意:
      A:一行中所有的单元格总列数相加可以小于12,剩余的部分是空白
      B:一行中所有的单元格总列数相加大于12时,大于的部分换行排列
      C:栅格化布局时,采用比已设置屏幕更小的屏幕所有列都占一行的原则(如果不设置的话)

  3.BootStrap的布局都是通过class属性来定位div标签所在的位置来对页面进行布局
  4.BS中的class实现
    使用BS时,要实现某些功能,基本都是通过指定class实现的,BS中的class值都是固定的,类似于关键字可以被
    BS识别,BS中的css文件有关于class的相关实现(.class{CSS样式实现})

  响应式布局:
    1.实现机制:
      超小屏幕-------手机---------xs
      小屏幕---------ipad mini-------sm
      中等屏幕--------ipad----------md
      大屏幕---------pc---------lg
    2.代码体现
      不同设备上显示不同效果,布局上通过class指定
      class="col-屏幕代号-单元列数" (要设置多种中间加空格)

    特点:小屏优先
      大屏幕指定列数了,但是比其小的屏幕是换行实现
      小屏幕指定列数了,比其大的屏幕没有指定时,按照小屏的划分显示

    显示与隐藏设置:
      显示:visible-屏幕代号
      隐藏:hidden-屏幕代号
    特点:默认的是全部显示,如果设置了特定屏幕显示或隐藏,其它没有设置的则取反

    布局偏移:
      1.设置空的div占位
      2.偏移量:<div class="col-xs-8 col-xs-offset-4 text-center">

  BS中的计时器:(轮播图)
    js代码:
      $(function(){
        $(‘.carousel‘).carousel({
          interval:时间值
        });
      });
    轮播图开始标签中:
      data-interval="时间值"
  BS中的按钮:
    <button type="button" class="btn btn-关键字">显示字样</button>

  BS中设置悬浮在页面之上的元素(导航条):
    <div class="container" data-spy="affix" data-offset-top="60" data-offset-bottom="200" id="daohang">
    然后在css代码中定位该元素,将其置于页面之上:
    #daohang {
      /*显示在上面*/
      z-index: 1;
      top:0px;
      left:0px;
      right:0px;
    }
  BS中的胶囊条:
    1.先查找导航实现,编写胶囊导航条
    2.通过CSS设置它的位置
    3.单击导航条定位到某个位置
      A:href="http://www.mamicode.com/#id值"
      B:页面中的实现模块都有id值
      href中的id值和页面模块的id值一一对应
    4.body添加属性,定位添加css样式(因为是一直在页面中显示)

     代码实现:<body data-spy="scroll" data-target="#jiaonang">
            <div class="container" id="jiaonang">
              <ul class="nav nav-pills nav-stacked" >
                <li class="active"><a href="http://www.mamicode.com/#top">顶部</a></li>
                <li><a href="http://www.mamicode.com/#lunbo">轮播图</a></li>
                <li><a href="http://www.mamicode.com/#remen">热门商品</a></li>
              </ul>
            </div>
            ...
          <style>
            #jiaonang{
              z-index:1;
              width:100px;
              position:fixed;(定义其在页面中的绝对位置)
              top:100px;
              left:50px;
            }
            body {
              position:relative;
            }
          </style>

Bootstrap入门及其常用内置实现