微金所（bootstrap的应用）

作者: lily1314 | 来源:发表于2016-12-03 09:54 被阅读0次

微金所（bootstrap的应用）
微信门户开发框架-使用指导说明书
Netty－鸟瞰
bootstrap简介
Netty
bootstrap 和vue等框架的知识梳理
bootstrap相关面试题
bootstrap
Netty核心组件
bootstrap的应用

这个是使用bootstrap的一个模板，引用一些js

<!DOCTYPE html>
<!-- 网站的语言 是中文 -->
<html lang="zh-CN">

<head>
        <!-- 编码格式是 utf-8 -->
        <meta charset="utf-8">
        <!-- 使用 最新式 ie 内核渲染 
    国内某些 所谓的 双核浏览器 或者是 直接 使用webkit去渲染
    -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 视口属性
    没有设置 禁用 用户缩放, 如果有需求可以添加
     -->
        <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>bootstrap的模板页</title>
        <!-- Bootstrap -->
        <link href="lib/css/bootstrap.min.css" rel="stylesheet">
        <!-- 
    media queries 媒体查询
 -->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!-- hack写法 当lt less than 小于 ie9的时候  -->

        <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script> 
        <script src="lib/js/respond.js"></script>
    <![endif]-->

    <!-- 导入自己的css -->
    <link rel="stylesheet" type="text/css" href="css/wjs.css">
</head>

<body>
</body>

</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是基于jq的-->
<script src="lib/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed 导入boot的一些js -->
<script src="lib/js/bootstrap.min.js"></script>

顶部通栏

顶部通栏.jpg

** 这是一个通栏，用到了栅格技术，还有字体图标，其实很简单，都是加一个类样式，还用到了按钮的样式**

<div class="header hidden-md hidden-sm hidden-xs">
<!-- 顶部的通栏，用到了一个重要的栅格 -->
<!-- 固定布局:提供了一个通用的固定宽度(也可以变为响应式)的布局方式，
仅仅用 <divclass="container"> 即可。 -->
<!-- 流式布局:利用 <div class="container-fluid"> 代码可以创建一个流式、两列的页面 — 非常适合于应用和文档类页面。 -->
<div class="container-fluid">
    <div class="row">
    <!-- 里面的份数可分为2.5.2.3 -->
    <!-- 那些小图标都是字体图标 -->
        <div class="col-md-2">
            <span class="glyphicon glyphicon-phone"></span>
            <a>手机微金所</a>
            <span class="glyphicon glyphicon-chevron-down"></span>
        </div>
        <div class="col-md-5">
            <span class="glyphicon glyphicon-phone-alt"></span>
            <a href="#">4006-89-4006（服务时间：9:00-21:00)</a>
        </div>
        <div class="col-md-2">
            <a href="#">常见问题</a>    
            <a href="#">财富登陆</a>
        </div>
        <div class="col-md-3">
            <a href="#" class='btn btn-danger btn-xs'>免费登陆</a>    
            <a href="#"> 登陆</a>
        </div>
    </div>
</div>
</div>

样式：
**这里用到了一个伪类选择器：first-of-type,nth-of-type($)，剩下的都蛮简单的一些样式
**

.header{
    height: 40px;
    border: 1px solid gray;
    .container-fluid{
        height: 100%;
        .row{
            height: 100%;
            div{
                height: 100%;
                border-right: 1px solid gray;
                /* border: 1px solid red; */
                line-height: 40px;
                text-align: center;
                a{
                    color: gray;
                    font-size: 12px;

                }
                &:nth-of-type(4){
                    a{
                        &:nth-of-type(1){
                            color: white;
                        }
                    }
                }
            }
        }
    }
}

导航栏

导航栏.jpg

** 这里自己定义了字体图标，模仿bootstrap定义字体图标的方式定义的**


<!-- 导航栏 -->
<nav class="navbar my-navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
     <!-- 字体图标 -->
     <!-- 字体图标是美工做完之后给过来的，所以你一定要学会使用 -->
     <span class="wjsfont wjsfont-logo"></span>
     <span class="wjsfont wjsfont-name"></span>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">我要投资</a></li>
        <li><a href="#">我要借贷</a></li>
        <li><a href="#">平台介绍</a></li>
        <li><a href="#">新手专区</a></li>
        <li><a href="#">最新动态</a></li>
        <li><a href="#">微平台</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">个人中心</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

此块重点就是自己会模仿定义字体图标，定义的方式如下

@font-face {
  font-family: 'wjsfont';
  src: url('../fonts/MiFie-Web-Font.eot');
  src: url('../fonts/MiFie-Web-Font.eot?#iefix') format('embedded-opentype'), 
  url('../fonts/MiFie-Web-Font.woff') format('woff'), 
  url('../fonts/MiFie-Web-Font.ttf') format('truetype'), 
  url('../fonts/MiFie-Web-Font.svg#glyphicons_halflingsregular') format('svg');
}
/* 定义 使用的class */
.wjsfont {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'wjsfont';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

.wjsfont-logo::before{
  content: '\e920';
}
.wjsfont-name::before{
  content: '\e921';
}

** 这块遇到了一个错误改了好久，就是当屏幕缩小的时候，那个第一个ul就会到字体图标的底下，然后再消失，后来才发现包着他们的盒子的类名是container-fluid改成container就好了，还有一个错误就是，等到缩到最小的屏幕时，最右面的和最前面的字体图标不在一条线上，才发现是自己给最外面的盒子padding值啦！以后要注意这些小问题**

error1.jpg

轮播图

注意的点：如果用bootstrap这个案例的轮播图，也可以，但是为了用户的体验效果，所以，我们得让那个图片在缩放的时候，background-size:cover;并且background-position:center center;这样就可以了，然后，当小屏时，切换小图，不要用这张大图就可以啦，其实也是很简单的，在大图切换成小图，和在小图切换成大图的时候，图片有一下跳动，但是，这个真的是没关系的。

big.jpg

small.jpg

看着一样，其实是不一样的哦！大屏的时候用的是背景图片，小屏的时候就是a标签中放一个img标签就好啦，因为的用到css3操作背景图片的样式
主要内容居中，background可以设置居中，定高作为背景图片，a容器定高，宽度自适应，始终内容居中这只是桌面的版本，要想移动端
**
a{
background-size:cover;
background-position:center;
}
**
要想移动端，就是高宽自适应，用小图片，桌面端用的是大图片，移动端用小图片，也不用背景图片，就是在a标签中加入img标签，但是又因为太小了，等到了桌面端的时候，就会很小，所以都有针对性，要想整合到一起这回就用bootstrap的响应式布局，大屏幕的时候，hidden-md,hidden-lg 的时候隐藏，桌面的时候，就是小屏幕看不到啦！Hidden-sm，hidden-xs;
**
Html中的代码：
Div>a{这是移动端版本，给它的样式就好啦
}+a>img{
这是移动端版本，给他样式就好啦
}
**
思路：桌面端，移动端，为两个html结构添加响应式布局，将两个html的结构合并到一起，这样就成功了，是为了用户提要更好，因为桌面端的时候，那样就用户体验不好拉！

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
       <a href="#" class='move-image img01 hidden-xs'></a>
       <a href="#" class='hidden-sm hidden-md hidden-lg'>
               <img src="images/slide_01_640x340.jpg" alt="">
       </a>
    </div>
    <div class="item">
       <a href="#" class='move-image img02 hidden-xs'></a>
       <a href="#" class='hidden-sm hidden-md hidden-lg'>
               <img src="images/slide_02_640x340.jpg" alt="">
       </a>     
    </div>
    <div class="item">
       <a href="#" class='move-image img03 hidden-xs'></a>
       <a href="#" class='hidden-sm hidden-md hidden-lg'>
               <img src="images/slide_03_640x340.jpg" alt="">
       </a>     
    </div>
     <div class="item">
       <a href="#" class='move-image img04 hidden-xs'></a>
       <a href="#" class='hidden-sm hidden-md hidden-lg'>
               <img src="images/slide_04_640x340.jpg" alt="">
       </a>     
    </div>
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

css样式(less样式，考拉软件解析一下就行啦)

/* 轮播图的样式 自己自定义类*/
    /* 这是装轮播图的大盒子 */
.carousel-inner{
       .item{
        // 桌面端
        .move-image{
            height: 410px;
            display: block;
            background-size:cover;
            background-position: center center;
            background-repeat: no-repeat;
            &.img01{
                background-image:url("../images/slide_01_2000x410.jpg");
            }
            &.img02{
                background-image:url("../images/slide_02_2000x410.jpg");
            }
            &.img03{
                background-image:url("../images/slide_03_2000x410.jpg");
            }
            &.img04{
                background-image:url("../images/slide_04_2000x410.jpg");
            }
        }
        // 移动端
        a{
            display: block;
            width: 100%;
            &:nth-of-type(2){
                img{
                    display: block;
                    width: 100%;

                }
            }
        }

    }
}

媒体对象

媒体对象.jpg

<div class="media">
  <a class="media-left" href="#">
    <img src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

** html代码样例
细节问题：a标签中不能放a标签
**

<div class="info">
    <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-6 hidden-xs item">
                <a href='#'>
                        <div class="media">
                            <div class="media-left">
                                <span class='wjsfont wjsfont-e901'></span>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">支付交易保障</h4> 银联支付全称保证支付安全
                            </div>
                        </div>
                </a>
           </div>
      </div>
   </div>
</div>

**
注：有一个样式：左浮动：pull-left
**

标签页

链接的作用
<li role="presentation"><a href="#product_02" role="tab" data-toggle="tab">微投资</a></li>
<div role="tabpanel" class="tab-pane" id="product_02">2</div>

微金所（bootstrap的应用）
这个是使用bootstrap的一个模板，引用一些js 顶部通栏 ** 这是一个通栏，用到了栅格技术，还有字体图标，...
微信门户开发框架-使用指导说明书
微信门户应用管理系统，采用基于 MVC + Bootstrap + Ajax + Enterprise Libra...
Netty－鸟瞰
Netty-鸟瞰 Bootstrap：Netty应用从构建一个Bootstrap开始，通过Bootstrap可以轻...
bootstrap简介
Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap ...
Netty
【Bootstrap、ServerBootstrap】： Bootstrap 意思是引导，一个 Netty 应用通...
bootstrap 和vue等框架的知识梳理
Bootstrap Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap框...
bootstrap相关面试题
1.什么是Bootstrap？为什么使用bootstrap? Bootstrap 是一个用于快速开发 Web 应用...
bootstrap
1.什么是Bootstrap？为什么使用bootstrap? Bootstrap 是一个用于快速开发 Web 应用...
Netty核心组件
Bootstrap、ServerBootstrap Bootstrap 意思是引导，一个 Netty 应用通常由一...
bootstrap的应用
1. 是什么意思？ bootstrap的默认是分成12栏，有大屏（>1200px）、中屏（大于992px的屏小于1...

微金所（bootstrap的应用）

顶部通栏

导航栏

轮播图

媒体对象

标签页

相关文章

微金所（bootstrap的应用）

微信门户开发框架-使用指导说明书

Netty－鸟瞰

bootstrap简介

Netty

bootstrap 和vue等框架的知识梳理

bootstrap相关面试题

bootstrap

Netty核心组件

bootstrap的应用

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程