bootstrap小结

BootStrap小结

1.什么是BootStrap

  • 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
  • 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。

2. 为什么要使用BootStrap

  • 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果
  • 响应式布局:同一套页面可以兼容不同分辨率的设备。能够自适应于电脑,平板手机。

3.BootStrap的快速入门方法一

  1. 下载Bootstrap,去官网https://v3.bootcss.com/下载预编译并压缩的文件

    • 下载并解压bootstrap后的目录结构:

    bootstrap小结_第1张图片

    • 预编译的文件可以直接使用到任何web项目中。其中bootstrap.*是已编译的,bootstrap.min.*是已编译并压缩的,两者内容一致,区别在于一个压缩过,我们一般引入压缩后的文件,这样会使访问速度快一点,没有压缩的查看代码比较方便(有回车和进制符)。
  2. 在项目中将这三个文件夹复制

    bootstrap小结_第2张图片

  3. 创建html页面,引入必要的资源文件

    
        
        
            
            
            
            
            Bootstrap HelloWorld
        
            
            
             
            
            
            
        
        
        

    你好,世界!

  • 注意:从官网下载的BootStrap没有jquery-3.2.1.min.js,需要引入到js文件夹里。

bootstrap小结_第3张图片

链接: https://pan.baidu.com/s/1dSgW...
提取码:ud5q

4. 快速入门方法二

  • 使用CDN引入,免下载

    
    
      
        
        
        
        
        Bootstrap HelloWorld
    
        
        
      
      
        

    你好,世界!

4. 响应式布局

  • 同一套页面可以兼容不同分辨率的设备
  • 实现:依赖于栅格系统。随着屏幕尺寸的增加,系统会自动分为最多12列。
  • 栅格系统的使用方法:

    1. 定义容器。相当于之前的table

      container:两边留白

      container-fluid:每一种设备都是100%宽度

    2. 定义行。相当于之前的tr

    3. 定义元素。指定该元素在不同设备上的所占的格子的数目。

      格式:col-设备代号-格子数目

      设备代号:

      ​ xs:超小屏幕,手机(<768px)

      ​ sm:小屏幕 平板 (≥768px)

      ​ md:中等屏幕 桌面显示器 (≥992px)

      ​ lg:大屏幕 大桌面显示器 (≥1200px)

    4. 注意:

      ​ 一行中如果格子数目超过12,则超出部分自动换行。

      ​ 栅格属性可以向上兼容。 小屏幕定义的属性适用于大屏幕。

      ​ 如果设备宽度小于栅格类元素属性设置的最小宽度,那么一个元素会占满一行。

  • 案例

    
    
    
    
     
    
     
    
    一共12列
    1列
    1列
    1列
    1列
    1列
    1列
    1列
    1列
    1列
    1列
    1列
    1列
    占4列
    占4列
    占4列

5. css样式和js插件

  1. 全局css样式

    • 按钮:

      • class="btn btn-warning" 警告按钮
      • class="btn btn-danger" 危险按钮
      • class="btn btn-link" 链接按钮
 ![](/img/bVcOfMS)
  • 图片

    在div中指定class=img-responsive使图片支持响应式布局
    //图片形状
    xxx//方形
    xxx//圆形
    xxx//相框
  • 表格

      
       
    列名1 列名2
    列值1 列值2
    //class="table table-striped":条纹状表格 //class="table table-bordered":带边框的表格 ......

    bootstrap小结_第4张图片

  • 表单

    • 给表单项添加class="from-control"
  1. 组件

    • 导航条

      • 使用nav元素定义,
      • 定义反色的导航条设置class="navbar navbar-inverse"
    • 分页条

      bootstrap小结_第5张图片

  1. js插件

    • 轮播:Carousel
    • 可以选择轮播的标题,轮播速度,轮播的前后方向

6. 总结

  • 官方文档写的很详细,要实现什么直接去找,然后拿来改一下即可。https://www.bootcss.com/
  • bootstrap简单了解一下,
  • how2j写的也不错,可以简单了解一下。
本文由博客群发一文多发等运营工具平台 OpenWrite 发布

你可能感兴趣的:(java)