bootstrap和less

最新推荐文章于 2024-07-17 15:26:15 发布

weixin_34184561

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量459

点赞数

文章标签： javascript 移动开发前端框架 ViewUI

原文链接：http://www.cnblogs.com/myrocknroll/p/10102253.html

版权

前端框架bootstrap

Android使用的是webkit浏览器内核，其它国产浏览器也是基于webkit的二次开发ios使用的是safari内核。不同的内核解析呈现出来的html和css也不尽相同，需要手动调整代码以便兼容这两个平台。而bootstrap这个框架集成了很多的css样式、css+html组件、js组件，也可以利用该框架实现响应式布局。

基本模板

要使用bootstrap，首先需要将以下样式和js等引入文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <title>title</title>
    <link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    
    
</head>
<body>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

bootstrap类

用于盒子的类

container

container是所有我们即将编写的html标签的顶级根元素，这是一个盒子，它自带左右内边距各15px且在浏览器中居中显示，在超小屏幕中宽度是100%。

container-fluid

除了超小屏幕，响应式布局总是将container盒子居中显示，而container-fluid盒子则是宽度100%，它不居中。

pull-left | pull-right

左右浮动

row

栅格化布局的行，所谓栅格是指可利用bootstrap的类轻易将一行分为几个格子，如三行四列，五行三列，此类自带清除父元素的左右内边距15px，它的原理是margin-left和margin-right各-15px

col

col的格式为：col-size-number

尺寸取值：lg（≥1200px）| md（≥992px）| sm（≥768px）| xs（<768px）

指定的尺寸在合适的屏幕下才会生效，所以可以同时指定多个类去控制列在不同屏幕尺寸下的显示。col的左右内边距默认15px。注意，当屏幕不满足指定尺寸时，由于是div的关系，这些盒子就会独占一行显示。

row与col不需要结合使用

row和col可以单独使用，即col不一定非嵌套在row里边。但如果有row，则row里面只能嵌套col。

计算占比

占比取值：1-12

row中的col最大只占12个列，通过指定12个col-lg | md | sm | xs-1则刚好占满一行。

计算列数

假如要布局一个两行三列的格子，总列数就是2*3=6，只需将6个盒子装进一个row中即可，当装不下时即自动换行，所以不需要每行都去写一个row

一行四列

.container{
    margin-top:10px;
    height:50px;
    background:#020465;
}

.container>.row .col-xs-3{
    height:20px;
    background:#ff6a00;
    border:1px solid #fff;
}

<div class="container">
    <div class="row">
       <div class="col-xs-3"></div>
       <div class="col-xs-3"></div>
       <div class="col-xs-3"></div>
       <div class="col-xs-3"></div>
    </div>
</div>

利用col的特点，像下图那样可以设计出完全基于屏幕尺寸动态改变显示效果的响应式的布局，

在pc上显示为两行三列，到了pad上显示为三行两列，到手机设备显示为一行一列。

栅格化嵌套

栅格化的结构是可以嵌套的

向右推动

col-尺寸-offset-number，表示当前盒子向右推动number份，它的推动会导致在它后面的元素跟着一起被推动

左右推动

左右推动可以颠倒格子的顺序，它只针对当前格子的推动，不会推动它后面的盒子，推动占比要算上自身。

col-尺寸-push-number

col-尺寸-pull-number

用表格相关的类

table

自动应用table最基本的表格样式，宽度自适应屏幕宽，表格和单元格都无边框

table-striped

隔行换色，默认灰色

table-bordered

表格、单元格带边框

table-hover

划过高亮行底色

<table class="table table-striped table-bordered table-hover table-condensed">
    <tr class="success"><th>#</th><th>first</th><th>last</th></tr>
    <tr><td>1</td><td>xx</td><td>xx</td></tr>
    <tr><td>2</td><td>xx</td><td>xx</td></tr>
</table>

用于响应式的类

hidden-尺寸

表示在当前尺寸下该元素会隐藏，否则显示，类似的有已经不建议使用的visible-尺寸。此类恶意应用在任何元素上。

<div class="visible-lg visible-xs">
test
</div> 在大屏和超小屏才显示

bootstrap组件

以aria开头的属性、以role作为属性、以sr-only作为类名是辅助盲人阅读器的代码，国内没有人权，所以只能无视这种属性。

通用定义

data-toggle：以何种方式触发事件，取值：collapse（折叠）

data-target：将要控制的目标的选择器，此属性用于非a标签的元素，对于a标签，只需要将它的href指向将要控制的目标的选择器即可

固定定位组件

<div class="top-fix-box" data-spy="affix" data-offset-top="100"></div> data-spy：设置为固定定位组件 data-offset-top：滚动多少px后开始固定

折叠组件

<button data-toggle="collapse" data-target=".box" >
    <i class="iconfont"></i>
</button>

<a href=".box" data-toggle="collapse"  class="btn btn-success">
    <i class="iconfont"></i>
</a>

<div class="box">
    <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
        <p>content</p>
</div>

导航组件

导航组件在大屏幕设备上正常显示，而在移动web下会自动切换为一个按钮，点击按钮可切换导航的区域的显示或隐藏

<nav class="navbar navbar-default">
            
            <div class="container">
            
                <div class="navbar-header">
                    
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    
                    <a class="navbar-brand" href="#">logo</a>
                </div>

                
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">荔枝</a></li>
                                <li><a href="#">番茄</a></li>
                                <li><a href="#">香蕉</a></li>
                                
                                <li role="separator" class="divider"></li>
                                <li><a href="#">哲学</a></li>
                            </ul>
                        </li>
                    </ul>
                    
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                    
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" >Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

Tab菜单组件

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" data-toggle="tab">森林</a></li>
    <li><a href="#profile" data-toggle="tab">冻土</a></li>
    <li><a href="#messages" data-toggle="tab">冰川</a></li>
    <li><a href="#settings" data-toggle="tab">湖泊</a></li>
</ul>


<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">tabContent1</div>
    <div role="tabpanel" class="tab-pane" id="profile">tabContent2</div>
    <div role="tabpanel" class="tab-pane" id="messages">tabContent3</div>
    <div role="tabpanel" class="tab-pane" id="settings">tabContent4</div>
</div>

将tab菜单去掉一些边框样式可以做成一个导航栏，先为导航栏增加一个父容器，这个父容器只容纳导航的ul。

<div class="nav-box">
    
    <ul class="nav product-nav-tab">
        <li class="active"><a href="#home" data-toggle="tab">寒食</a></li>
        <li><a href="#profile" data-toggle="tab">山川</a></li>
        <li><a href="#messages" data-toggle="tab">湖泊</a></li>
        <li><a href="#settings" data-toggle="tab">高原</a></li>
        <li><a href="#profile" data-toggle="tab">旷野</a></li>
        <li><a href="#messages" data-toggle="tab">丘陵</a></li>
        <li><a href="#settings" data-toggle="tab">银河</a></li>
        <li><a href="#profile" data-toggle="tab">冻土</a></li>
        <li><a href="#messages" data-toggle="tab">森林</a></li>
        <li><a href="#settings" data-toggle="tab">冰川</a></li>
    </ul>
</div>

$(document).ready(function () {
    slidTabNav();
});

function slidTabNav() {
    var ul = $('.product-box .container .nav-box .nav');
    var container = $('.product-box .container .nav-box'); //ul的父元素
    var width = 0;

    container.on("touchmove", function (e) {
        e.preventDefault();
        e.cancelable = false;
    });

    //计算子元素宽度之和
    ul.find('li').each(function (i, item) {
        //width()  内容 | innerWidth() 内容+内边距 | outerWidth() 内容+内边距+边框 | outerWidth(true) 内容+内边距+边框+外边距
        var thisWidth = $(this).outerWidth(true);
        width += thisWidth;
    });
    //设置父元素宽度为固定
    ul.width(width);

    //使用iscroll.js插件
    new IScroll(container[0], {
        scrollX: true,
        scrollY: false,
        click: true
    });
}

由于ul的宽度是它父容器的宽度，所以当浏览器宽度变小，ul里的li就会换行显示。。此时可考虑滑动隐藏。如果使用滑动则必须明确设置ul的宽度才能使li不换行，然后通过css设置ul的父元素overflow：hidden，最后利用Iscroll插件完成滑动。

轮播图组件

轮播图根盒子没有明确的宽度，它的宽等于自父元素的宽

<div class="banner-box">
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        
        <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>
        </ol>

        
        <div class="carousel-inner">
            
            <div class="item active">
                <img src="img/1.jpg" alt="...">
                
                <div class="carousel-caption">
                    图片上的文字
                </div>
            </div>
                
            <div class="item">
                <img src="img/2.jpg" alt="...">
                <div class="carousel-caption">
                    图片上的文字
                </div>
            </div>
            ...
        </div>

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

bootstrap轮播盒子可以自动根据浏览器宽度进行缩放，而它里面嵌套的图片的宽也是根据父元素的宽进行100%缩放。但因为图片的关系，这样的显示效果在手机端显示效果并不好看。

这样等比例缩放后在小屏、超小屏上面无法达到满意的效果，为此，可以做一些改变，利用hidden-lg、md、sm、xs切换不同的图片盒子的显示即可。以下准备了同一图片的两种尺寸2000*410和640*340。

.banner-box .carousel .carousel-inner .item a img{
width:100%; //切换另种尺寸的图片时，需要重新设置图片的缩放比例，否则可能出现留白，原因不明。
}

轮播图手势事件

借助jquery实现手势切换图片

覆盖bootstrap组件的css样式

首先把该组件的根元素的类名找到，然后到bootstrap.css里面去查找以该类名开头的css样式，全部复制出来放进自己的css样式表里，为该根元素增加一个自定义的类名，来到自定义的css样式表里，用此类名替换掉原来的那个bootstrap的类名，接着在chrome浏览器利用开发人员工具查看需要修改的html的样式所在行号，然后到css文件中去找到行号、修改样式以符合产品需求。但是不可能复制出来的样式都需要做修改，此时可以选择删除冗余的代码，但这会带来维护的不便，因为今后可能还会针对该组件的样式进行修改，为此，建议全部保留。

less

css没有函数、变量的概念，但less扩展了css语言，使其具备了灵活快捷的扩展性，易于代码的维护。

@color:#fff;
.box{
    width:100px;
    height:20px;
    background:@color;
}

less的变量如上所示，非常简单。但浏览器不支持less，所以需要把less代码编译为纯的css代码，编译less代码需要安装less编译器，而less运行在node.js环境中，所以首先要安装：node.js

安装完成后在cmd中查询是否安装成功：node -v

接着使用npm install -g less命令在线安装less，如果无法安装，请用管理员身份运行cmd

查询是否安装成功：lessc -v

现在可以做个测试，在桌面创建一个less文件，书写上面的那段非常简单的less代码，保存文件后，利用cmd编译less为css文件

less变量

@color:#ffd800;
@className:box;

body {
background:@color;
}

.@{className} {
width: 100px;
}

less 函数混入

.set-border-radius() {
    border-radius: 12px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 15px;
}

//带参
.set-border-radius(@size:12px){
    border-radius:@size;
    -webkit-border-radius:@size;
    -moz-border-radius:@size;
}
//调用
.border{
    .set-border-radius(100px);
}

这会编译为

.border { border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; }

less 内置运算

@width:5;
ul {
width: 100%*@width
}

less 内置函数

查阅：less文档，常用的有length()获取数组长度、unit(变量,px)拼接字符。

less 比较运算符

=、>、<、>=、=<

less 循环

.set-loop(@i) when ( @i =< 10) {
    html {
        font-size: unit(@i,px);
    }
    .set-loop(@i+1);
}

.set-loop(1);

less 嵌套

.box{
    width:1000px;
    margin:auto;
    .list{
        list-style:none;
        li{
            float:left;
            a:hover{
                color:#ff6a00;
            }
        }
    }
    &:hover{
        img{
            border:1px solid #000;
        }
    }
    > div{
        background:#b6ff00;
    }
}

less 伪元素

input {
    width: 100%;
    height: 0.7rem;
    padding-left: 0.6rem;
    font-size: 0.2rem;
    .set-border-raudis(7px);
    background: @input-bg-color;
    color: @font-color-white;
    &::-webkit-input-placeholder { //&表示且，选择input且必须是带placeholder的input/
        color: @font-color-white;
        text-align:left;
        font-size:0.2rem;
    }
}

.banner-box{
    width:100%;
    overflow:hidden;
    ul{
        &:first-child{
//因为ul的父元素使.banner-box，所以这会生成为.banner-box ul:first-child，表示选择banner-box里的ul，且必须是第一个子元素的ul
        }
        &:last-child{

        }
    }
}

less 引入

引入less文件以便可以在当前less文件中使用另一个less文件中定义的变量、函数

@import "wjs"

浏览器解析less

浏览器不支持less，在测试或编写代码时为了即时在浏览器查看less的效果，需要引入js来帮助浏览器解析less。查看：less.js文档，下载：less.js

可参考：LESS知识总结

转载于:https://www.cnblogs.com/myrocknroll/p/10102253.html

weixin_34184561

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap和less

前端框架bootstrapAndroid使用的是webkit浏览器内核，其它国产浏览器也是基于webkit的二次开发ios使用的是safari内核。不同的内核解析呈现出来的html和css也不尽相同，需要手动调整代码以便兼容这两个平台。而bootstrap这个框架集成了很多的css样式、css+html组件、js组件，也可以利用该框架实现响应式布局。基本模...
复制链接

扫一扫