微金所（bootstrap的应用）

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






        
        
        
        
        
        
        
        bootstrap的模板页

顶部通栏

顶部通栏.jpg

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






    
    
    
        
            
            手机微金所
            
        
        
            
            4006-89-4006（服务时间：9:00-21:00)
        
        
            常见问题    
            财富登陆
        
        
            免费登陆    
             登陆

样式：
**这里用到了一个伪类选择器：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定义字体图标的方式定义的**

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

@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的结构合并到一起，这样就成功了，是为了用户提要更好，因为桌面端的时候，那样就用户体验不好拉！

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


  
    
  
  
    Media heading
    ...

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


    
        
          
                
                        
                            
                                
                            
                            
                                支付交易保障 银联支付全称保证支付安全

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

标签页

链接的作用

微投资

2

微金所（bootstrap的应用）

顶部通栏

导航栏

轮播图

媒体对象

Media heading

支付交易保障

标签页

你可能感兴趣的:(微金所（bootstrap的应用）)