Bootstrap使用套路

Boostrap相应式布局(跟随设备自动调整页面),有许多现成的组件,简化前端开发。

1. 到Bootstrap官方网站下载包: https://github.com/twbs/bootstrap/releases

2.解压得到到包,然后复制css、front、js文件夹到项目中,这些文件夹下面的一些文件名有的带min,有的不带。带min的是精简版本,可以加快传输,一般使用在正式部署中;不带min的是详细版,一般用于开发阅读源码;

3.创建html页面,引入需要使用的资源。简单起步看官网 https://v3.bootcss.com/getting-started/

4.官网的实例使用的是网络上的bootstrap,修改标签中的引用链接使其引用我们下载好的bootstrap;同时删除兼容ie的引用;下载相应版本的jquery文件,并将引用修改成我们下载的就好。

如下:




    
    
    
    
    Bootstrap 101 Template

    
    

    
    
    
    


你好,世界!

以后其他页面都是在此页面基础上进行改进

Bootstrap利用栅格系统实现了响应式布局,即每一行划分为12个格子,编程时用classname来设定不同尺寸端设备上每一个单元格占用多少个格子。

如下代码中的,用class="container-fluid"定义一个容器(container-fluid表示占100%屏幕,container表示固定宽度一般两边 有留白),用class="row"定义容器里面的一行,用class="col-lg-1 col-sm-2"表示在lg(大屏幕上每一个单元格占1个格子), 在sm平板品屏幕上一个单元格占2个格子(因为我们一行定义了12个单元格,每个单元格占2个格子,所以会自动转换成两行展示)。

col-lg-1:大屏幕,大显示器
col-md-1:中等屏幕,桌面显示器
col-sm-3:小屏幕,平板
col-xm-2:超小屏幕,指手机



    
    
    
    
    Bootstrap 101 Template

    
    

    
    
    
    
    



    
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格
栅格

在想要一些组件时,可以到官网上查找一下自己喜欢的,然后把代码拷贝一下作简单修改即可。html头还是用上边第一个代码里面的头。如下就可以展示导航图了:

 

你可能感兴趣的:(JAVA,bootstrap,js,css)