Bootstrap笔记

初识Bootstrap

v4.bootcss.com 图标库

        
        
        
        
        
        
    

bootstrap 与...相联系

编译版Bootstrap文件结构：快速开发使用

Bootstrap4.4.1编译版包中包含css和js文件夹。

css和js文件夹中都提供了两种类型的文件，压缩的和未压缩的的文件。

bootstrap.*是预编译的文件，bootstrap.min.*是编译且压缩后的文件 。

bootstrap.*.map格式的文件，是source map文件，需要在特定的浏览器开发者工具下才能使用。

源码版：学习使用

包含了预编译的CSS和JavaScript资源，以及源Sass，JavaScript，例子和文档。

dist文件夹，包含所有文件。

docs文件，开发者文件夹。

examples文件夹，Bootstrap例子文件夹。

scss文件夹，CSS源码文件夹。

js文件夹，JavaScript源码文件夹。

Bootstrap特性：

1、移动设备优先

2、响应式web设计

3、浏览器支持

4、容易上手

5、网格布局

6、丰富的组件及插件

7、开源

8、支持HRML5和CSS3

9、LESS（CSS预处理语言，扩展了CSS语言）构建动态样式

 Bootstrap4布局

Bootstrap响应式布局主要依靠强大的网格系统来实现。

网格系统可以根据屏幕大小来使相应的类生效，从而更好地适配不同的设备。

布局基础

包括：布局容器，响应断点，z-index

布局容器

三个不同的容器类：container，container-flluid，container-{breakpoint}

container类：

根据屏幕宽的不同，随着浏览器的大小，页面也会呈现阶段性变化。

container-fliud类：

container-fliud容器会保持全屏大小。

container-sm，container-md，container-lg，container-xl类：

称为响应式容器。

border，设置容器的边框。

py-2，上下内边距。

bg-light，背景色。

 开头加上：

添加用户行为

close.bs.alert,当调用close方法时，将立即出发此事件

closed.bs.alert，警告框已关闭时，触发此事件

单击滚逼警告框时，将触发close.bs.alert事件,弹出对话框

按钮

jQuery.js

button.js

data-toggle="button"切换按钮active状态

            
                按钮切换
            

JavaScrit实现切换效果

按钮式复选框和单选框

 包含按钮组的容器，添加data-toggle="buttons"实现样式切换，单击显示深色背景色，再次单击回复浅色背景色

            

                
                    
                    选项1
                
                
                    
                    选项2
                
                
                    
                    选项3
                
            

可以用data-group-toggle代替btn-group,可以将复选框前面的选框去掉

轮播

carousel.js

需引入jquery.js,util.js,carousel.js

可以轮播图文部分，指示图标，控制按钮

轮播容器

指示图标容器

,用于指示图片的播放顺序

       

       

       

1. 的个数应与幻灯的个数一致

          

           

           

           

给图片添加文字

中添加

       

       

文字说明

左右控制按钮

       

        Previous

       

        Next

左右按钮由carousel-control-prev和carousel-control-prev控制

carousel-control-prev-icon和carousel-control-next-icon设计左右箭头

href="#myCarousel"绑定轮播框

data-slide="prev"和data-slide="next"激活按钮行为

data-ride用于定义轮播在页面加载时就开始自动播放

carousel-indicator添加一个指示符，即下面的小点

carousel-inner添加要切换的图片carousel-item指定每个图片的内容

轮播风格

carousel-slide滑动效果

carsosel-fade交叉淡入淡出效果

data-interval设置图片循环播放的间隔时间

       

       

       

       

       

       

        

        

       

       

        

        

       

       

        

        

       

        Previous

       

        Next

data-interval="3000以毫秒为单位，3000为3秒

插件调用

data属性调用

data-ride=”carousel“,若在轮播容器中不适用该属性，需要JavaScript脚本优化他

data-slide-to传递某个帧的下标，可以直接跳转到该帧，从0开始

data-slide，改变当前轮播的帧，包括prev包括next

JavaScript调用

data-ride="carousel"

$('.carousel').carousel()

carousel传递空参数，实际上可以传递对象参数

对象参数列表

interval

keyboard

pause

ride

wrap

.carousel('cycle');//从左到右循环播放

.carousel('pause');//通过事件停止放影片播放

.carousel(number);//轮播循环到制定帧，从0开始

.carousel('prev');//将轮播指向前一帧

.carousel('next')//将轮播指向后一帧

.carousel('dispose');销毁轮播的空间

事件

slide.bs.carousel调用slide方法时触发该事件

slid.bs.carousel轮播完幻灯片切换后触发该事件

 模态框

定义模态框

覆盖在父窗体上的子窗体

class="modal"最外层容器，定义弹出模态框的外框

class="modal-dialog"第二层容器，定义模态框对话框层

class="modal-content"第三层容器，定义模态框对话框显示样式，主要控制模态框的边框背景阴影等样式

模态框头部modal-header

主体modal-body

脚注modal-footer

    弹出模态框
            

                

                    

                        

                            
                                ×
                            
                            

标题

                        

                        

                            

主体内容

                        

                        

                            关闭
                            保存
                        

                    

                

            

模态框是隐藏的，点击button实现

data-target="#myModal"用于指定弹出的模态框

data-toggle="modal"用于显示弹出的模态框

data-dismiss="modal"用于关闭模态窗口

调用模态框

Data属性调用

JavaScript调用

modal()方法

空参：默认打开模态框

对象参数：

backdrop boolean true 默认显示遮罩层

keyboard boolean true 是否允许Esc关闭模态框，默认允许

show boolean true 对话框在初始化的时候是否显示，默认显示

remote path false 获取远程URL，地址内容填充模态框主体

 弹出模态框

也可以实现相同效果

字符串参数：

modal("toggle")手动打开或隐藏一个模态框

modal("show")手动打开一个模态框

modal("hide");手动隐藏一个模态框

模态框事件

show.bs.modal调用显示模态框的方法时，触发该事件

shown.bs.modal模态框显示完毕后触发该事件

hide.bs.modal调用隐藏模态框的方法时，触发该事件

hidden.bs.modal模态框隐藏完毕后触发该事件

 
 
 
 
 
   
 
 

 

   

     

       

         
       

       

         

  年龄   24岁

         

  工作年限   1年

         

  联系电话   15133780732

         

  电子邮箱   [email protected]

       

       

         

技能特长

         

           

             

                  UE
                  

                      

                  

             

           

           

             

               

               

             

           

         

         

           

              JAVA
           

           

             

               

             

           

         

         

           

              C++
           

           

             

               

               

             

           

         

         

           

              Bootstrap
           

           

             

               

             

           

         

       

     

     

        

            

                          
• 
                                  获奖情况
                                  
  
                                      2023年蓝桥杯3等奖
                                      2024年蓝桥杯3等奖
           
                                  
  
                              

                            
• 
                                  工作经验
                                  
  
                                      九智云辉
                                      天津大米
                                          
                                  
  
                              

                            
• 
                                  教育经历
                                  
  
                                     
                                      黑龙江外国语学院软件工程专业
                                       
                                  
  
                              

                   
                   
                        

            
        

       

         

我的名字

         

唐立伟

       

       

         

求职意向

         

Java后端开发工程师

       

       

         

教育背景

         

2018-2020.6  泊头学院计算机科学与技术专业（本科）

       

       

         

工作经验

         

20.4-2023.6  大米互联网科技公司  java后端实习生

         

         

工作描述:

         

           
• 编程

         

       

       

         

自我评价

         

           
1. 关注前端前沿技术，基本功扎实，熟悉应用jQuery，熟悉HTML5、CSS3、ES6等。

           
2. 出身寒微，不懂劳动法，天生牛马。

         

          
       

        

          

微信二维码