【BootStrap】--前端利器BootStrap

ZeroWM發表於2015-08-10
boot前端


理論篇

　　為了引入移動端，加入響應式設計，ITOO V4.0專案web前端將從EasyUI向BootStrap過渡。

    easyUI核心是封裝好的JS程式碼，看上去規範整潔， BootStrap必須採用html5，核心是動態CSS(less)，頁面看上去扁平化，絢麗。下面是兩者的對比圖：


     雖然頁面風格迥異，但是兩者學起來的套路基本相同。

   1.官網是最好的學習利器，權威，具有針對性。

   2.把控制元件抽象出來，直接封裝複用就行。

   3.只需修改MVC中的檢視層即可。

  

   對比了EasyUI和BootStrap，讓我們來補充一下移動端的宗旨(2015年9月14日)：




實戰篇

   

    程式碼：

<!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一定要做的炫彩紛呈，手機電腦都能自適應。


相關文章