前端大作业-Boostrap实现静态登录和后台页面

纯静态,用boostrap框架实现,效果图如下

前端大作业-Boostrap实现静态登录和后台页面_第1张图片

 前端大作业-Boostrap实现静态登录和后台页面_第2张图片

 bootstrap文档:v3.bootcss.com 同时也用jq的:bootcdn.cn

里面min.js,css等要导入,我导入在文件夹的3rd下,算是模板代码



  
    
    
    

    Bootstrap 101 Template

    
    


  
  
    

你好,世界!

登录部分

文档里组件-》弄个登录块,输入部分全局css样式中找表单。这里css样式在head中写style(不新设了)



  
    
    
    

    Login

    
    
    
    

  
  
    
      

XX管理系统登录

后台界面

基础部分类似同上,底下设几个div块,head的style css样式中 如.main > div:nth-child(1)指main中第一个div,.main > div:nth-child(2)>div:first-child指main中第二个div的第一个div。同时设置最大最小宽(长),可以让缩动屏幕时候大小不变。

(一般先div设成颜色块看布局,问题不大再去掉颜色往里面填内容)



  
    
    
    

    主界面

    
    
    

  
  
    
制作者:河北工业大学中新物联网213班牛大了2022

你可能感兴趣的:(html,前端,javascript,vue.js)