码迷,mamicode.com
首页 > 其他好文 > 详细

前端利器之BootStrap--【UI框架】

时间:2015-08-11 01:30:10      阅读:786      评论:0      收藏:0      [点我收藏+]

标签:bootstrap   ui   前端   响应式设计   


理论篇

  为了引入移动端,加入响应式设计,ITOO V4.0项目web前端将从EasyUI向BootStrap过渡。

    easyUI核心是封装好的JS代码,看上去规范整洁, BootStrap必须采用html5,核心是动态CSS(less),页面看上去扁平化,绚丽。下面是两者的对比图:


技术分享

     虽然页面风格迥异,但是两者学起来的套路基本相同。

   1.官网是最好的学习利器,权威,具有针对性。

   2.把控件抽象出来,直接封装复用就行。

   3.只需修改MVC中的视图层即可。

  

实战篇

    技术分享

    代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>按钮</title>
    <link href="../../BootStrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-wdith,initia-scale=1.0">
    <!--[if lt IE 9]>
	<script src="http://html$shim.googlecode.com/svn/trunk/html5.js"></script>>
<!--[endif]-->
</head>

<body>
    <script src="../../BootStrap/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
    <script src="../../BootStrap/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
    <script src="../../BootStrap/bootstrap-3.3.5-dist/js/bootstrap-dropdown.js"></script>@*下拉*@框

    <div class="container">
        <h1 class="page-header">按钮<small>按钮的基本样式</small></h1>

        
        <div>
            常规按钮
        </div>
         <button type="button" class="btn   btn-sm">
               <span class="glyphicon " aria-hidden="true"></span>小按钮
          </button>
        <button type="button" class="btn  ">
            <span class="glyphicon " aria-hidden="true"></span>常规按钮
        </button>
        <button type="button" class="btn btn-lg ">
            <span class="glyphicon " aria-hidden="true"></span>大按钮
        </button>

        <div>
            带图标按钮
        </div>
        @*带图标按钮*@
        <div>
            <button type="button" class="btn   btn-info">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加 
            </button>

            <button type="button" class="btn  btn-info">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>删除 info
            </button>

            <button type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭 success
            </button>


            <button type="button" class="btn btn-warning">
                <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>导入 warning
            </button>


            <button type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>导出 danger
            </button>


            <button type="button" class="btn  btn-primary">
                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询 primary
            </button>


            <button type="button" class="btn btn-inverse">
                <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>刷新 inverse
            </button>
        </div>

        @*按钮组*@
        
        <div>
            按钮组
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>
        

        @*下拉框*@
        <div>
            下拉框
        </div>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                新生需求
                    <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="#">后台配置</a></li>
                <li><a href="#">新生报到</a></li>
                <li><a href="#">报表分析</a></li>

            </ul>
        </div>


    </div>
</body>

</html>


总结篇

    最后总要墨迹几句,看到BootStrap让我对我们新生的页面重燃希望,4.0一定要做的炫彩纷呈,手机电脑都能自适应。


版权声明:本文为博主原创文章,未经博主允许不得转载。

前端利器之BootStrap--【UI框架】

标签:bootstrap   ui   前端   响应式设计   

原文地址:http://blog.csdn.net/wangmei4968/article/details/47405671

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!