BitoAPP

项目介绍:一个可以用于开发网页和应用程序前端代码的前端框架

gitcode项目链接:https://gitcode.com/BilinStudio/bitoAPP.git

安装方式

方法1

1.安装git

2.终端输入指令：

        # 打开指定的文件夹路径
        cd 文件夹路径
        
        # 安装最新版bitoAPP
        git clone https://gitcode.com/BilinStudio/bitoApp.git

完成

方法2

下载压缩包，解压后可正常使用

方法3

在线链接css样式和js脚本

css 
            <!--基本样式-->
            <link rel='stylesheet' type='text/css' href='http://bito.app.bilin.fun/material/bitoApp_1.1.0/css/basic/bito.basic.css'>
            <!--主要样式-->
            <link rel='stylesheet' type='text/css' href='http://bito.app.bilin.fun/material/bitoApp_1.1.0/css/bito.min.css'>
            <!--自定义样式-->
            <link rel='stylesheet' type='text/css' href='http://bito.app.bilin.fun/material/bitoApp_1.1.0/css/bito.customize.css'>
            <!--动画样式-->
            <link rel='stylesheet' type='text/css' href='http://bito.app.bilin.fun/material/bitoApp_1.1.0/css/bito.animation.css'>
js 
            <!--搜索-->
            <script src='http://bito.app.bilin.fun/material/bitoApp_1.1.0/js/bito.search.js'></script>
            <!--导航栏-->
            <script src='http://bito.app.bilin.fun/material/bitoApp_1.1.0/js/bito.nav.js'></script>

使用教程

index.html 包含四个部分：head、title、body、bottom。head和body是html必备的标签，但如果你不需要 title 或 bottom，可以将其删除。

            <!DOCTYPE html>
            <html>


            <head>
                <!-- head -->
                <meta charset='utf-8'>
                <link rel='stylesheet' type='text/css' href='css/basic/bito.basic.css'>
                <link rel='stylesheet' type='text/css' href='css/bito.min.css'>
                <title>bito app</title>
            </head>
            
            <div class='title'>
                <!-- title -->
                <h1>title</h1>
            </div>
            <hr>
            
            <body>
                <!-- main body -->
                <h1>body</h1>
            </body>
            <hr>
            
            <div class='bottom'>
                <!-- bottom -->
                <h1>bottom</h1>
                <script src='js/bito.nav.js'></script>
            </div>
            
            </html>

bito.nav.js包含了导航栏的源代码，大致用法如下

            <ul class='navbar'>
                <li  class='first'>home</li>
                <li  class='second'>link1</li>
                <li  class='three'>link2</li>
                <li  class='forth'>link3</li>
            </ul>
            <div id='page01' class=' page' style='display:block'>
                <!--home part-->
            </div>
            <div id='page02' class=' page' style='display:none'>
                <!--link1 part-->
            </div>
            ...

bito.search.js包含了搜索的源代码，大致用法如下

<input type='text' id='bitoSearch' onkeyup='searchFunction()' placeholder='搜索..'>
    <ul id='bitoMenu'>   
        <li><a href='#'>HTML</a></li>
        <li><a href='#'>CSS</a></li>
        <li><a href='#'>JavaScript</a></li>
        <li><a href='#'>PHP</a></li>
        <li><a href='#'>Python</a></li>
        <li><a href='#'>jQuery</a></li>
        <li><a href='#'>SQL</a></li>
        <li><a href='#'>Bootstrap</a></li>
        <li><a href='#'>Node.js</a></li>
        <li><a href='#'>中文分类</a></li>
    </ul>

bitoAPP的css样式如下所示