移动Web——Bootstrap

1、Bootstrap-简介

Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样式,允许开发者结合一定HTML结构及JavaScript,快速编写功能完善的网页及常见交互效果

移动Web——Bootstrap_第1张图片




  
  
  
  体验Bootstrap
  


  
1
1
1
1

 2、Bootstrap-下载

 中文官网:

Bootstrap中文网 (bootcss.com)

使用步骤:

1.下载:Bootstrap V5中文文档 ---> 进入中文文档 ---> 下载 ---> 下载 Bootstrap 生产文件移动Web——Bootstrap_第2张图片

2.使用步骤

(1)引入Bootstrap CSS文件

(2)调用类名:container:响应式布局版心类




  
  
  
  使用方法
  
  


  
1

3、Bootstrap栅格系统

栅格化是指将整个网页的宽度分成12等份,每个盒子占用的对应的份数

例如:一行排4个盒子,则每个盒子占3份即可(12 / 4 = 3)

移动Web——Bootstrap_第3张图片6个响应区间 

移动Web——Bootstrap_第4张图片 

常用布局类

  • col-*-*:列(例如:col-xxl-3)
  • row:行 



  
  
  
  栅格系统
  


  
   
   
1
2
3
4

4、Bootstrap-全局样式

4.1 button类

Button类

  • btn:默认样式
  • btn-success:成功
  • btn-warning:警告
  • ……
  • 按钮尺寸:btn-lg / btn-sm




  
  
  
  按钮样式
  


  
  

 4.2 表格类

  • table:默认样式
  • table-striped:隔行变色
  • table-success:表格颜色
  • ……

移动Web——Bootstrap_第5张图片



  
    
    
    
    表格样式
    
  
  
    
姓名 年龄 性别
张三 18
李四 20
王五 18
赵六 20

4.3 Bootstrap-组件(Components)

  1. 引入样式表
  2. 引入js文件
  3. 复制结构,修改内容



  
  
  
  组件
  
  


  
  

  
  

  

4.4 Bootstrap-字体图标

下载:

使用:

  1. 复制fonts文件夹到项目目录
  2. 网页引入bootstrap-icons.css文件
  3. 调用CSS类名(图标对应的类名)


  
    
    
    
    字体图标
    
    
  
  
    
  

你可能感兴趣的:(HTML5+css3,前端,bootstrap,html)