BootStrap4基础学习

引入

设置本地服务器

cnpm init -y
cnpm add browser-sync
cnpm start

"start": "./node_modules/.bin/browser-sync start --server --no-notify --files='index.html, *.css, *.js'"

知识点

1. container

   
       
   Hello ~
   

   提供一个固定宽度，container-flued提供一个流动宽度

2. col row .   row 为container里面的行,col为列 ,每个row长度为12,使用"col-n"来制定长度为n的col.对row;垂直对齐:"row align-items-位置"设置对齐方式.对col"align-self-start"设置单独的对齐方式.位置为start, center, end; 水平对齐:"justify-content-位置",　剩余空间分配在栏中间:"between", 周围:"around". 
3. 尺寸:分为xs,sm,md,lg,xl. 对应560,768,900,1200四个分界线:使用"col-尺寸号-格数" ."col-sm"添加后窗口小于sm则多行显示.
4. alert

           
   
               
   Hello
               hello ~  see more
               
                   ×
               
           

   alert-link使得字体颜色自动匹配框架颜色，fade,show使得关闭过程中有渐变效果

   $(document).ready(() => {
   
       $('.close-alert').click(() => {
           $('.alert').alert('close')
       })//关闭
   
       $('.alert').on('close.bs.alert',  () => {
           console.log('helo')
       });//关闭时
       $('.alert').on('closed.bs.alert',  () => {
           console.log('helo1')
       });//关闭后
   })

   js监听效果