前端框架之Bootstrap

昨日内容回顾

• jQuery简介

第三方类库 封装了js代码 兼容性更高

宗旨：write less do more.

链式操作：一行代码搞定所有

语法关键字：
	jQuery === $()

• 两种导入jQuery的方式

1.自行下载第三方代码并导入

2.使用免费的CDN加速服务
	网站：bootcdn

• 诸多选择器

# 基本选择器：
	$('#d1') $('.c1') $('p')
    
# 组合选择器
	$('div#d1') $('#d1 .c1') $('#d1,span,.c1')
    
# 其他选择器
	next()  prev() parent() children() siblings()
	:text :checkbox

• 节点操作

addClass()  removeClass()  hasClass() ...

text()  html()  val()  files

append()  prepend()  after() ...

• 事件

# 两种绑定方式
	jQuery对象.事件名(function(){})
	jQuery对象.on('事件名',function(){})
 
事件练习：
	input实时监听		
	change文本域变化

今日内容概要

• jQuery补充知识
• 前端框架之bootstrap

内容详细

1.阻止后续事件执行

# return false; // 常见阻止表单提交等

# e.preventDefault();



# HTML文件内容：



  
  
  



    

       
    
    
    

2.事件冒泡

# HTML文件内容：



  
  
  


div
    
div>p
        div>p>span
    

3.文档加载

# 文档加载方式有时候会写在 head标签中 了解即可不推荐使用

    
    
    
    

4.事件委托

"""
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件
"""

# 复制事件





# 事件委托:每一行的每个按钮都能触发相应的事件

选我
    




# HTML文件内容：



  
  
  


    选我
    

5.动画效果

# 基本
	show([s,[e],[fn]])
	hide([s,[e],[fn]])
	toggle([s],[e],[fn])

# 滑动
	slideDown([s],[e],[fn])
	slideUp([s,[e],[fn]])
	slideToggle([s],[e],[fn])

# 淡入淡出
	fadeIn([s],[e],[fn])
	fadeOut([s],[e],[fn])
	fadeTo([[s],o,[e],[fn]])
	fadeToggle([s,[e],[fn]])

# 自定义（了解即可）
	animate(p,[s],[e],[fn])



# HTML文件内容：



    
    

    


点赞

6.前端框架Bootstrap

# 官网：https://v3.bootcss.com/

# 下载步骤
	1.进入官网直接点击下载
	2.选择用于生产环境的Bootstrap下载
	3.下载的压缩包 自行解压到能找到的文件路径
	4.使用框架调整页面样式一般都是操作标签的class属性即可

    
# bootstrap需要依赖于jQuery才能正常执行(动态效果)


# 引入方式
	本地引入(最完整的)
		1.引入jQuery
		2.引入bootstrap的css文件
		3.引入bootstrap的js文件
        
	CDN引入
		1.引入jQuery CDN
		2.引入bootstrap css的 CDN
		3.引入bootstrap js的 CDN
"""
CDN导入可以都写到pycharm默认文本模板中 今后在新建HTML文件就会自动添加：




"""

7.布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式 
让pycharm记住bootstrap的关键字
"""
container		左右留白
container-fluid  左右不留白



# HTML文件内容：



    
    
    
    
    
    
    


  
左右留白布局
  
左右不留白布局

8.栅格系统

# 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

row		行  # 一个row就是一行 一行是固定的12份
col-md-1	占几份
col-sm-1	占几份
col-xs-1	占几份
col-lg-1	占几份



# HTML文件内容：



    
    
    
    
    
    



  

      

          

          

      
  

9.表格

# 为任意  标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线


# 条纹状表格
	通过 .table-striped 类可以给  之内的每一行增加斑马条纹样式

# 带边框的表格
	添加 .table-bordered 类为表格和其中的每个单元格增加边框

# 鼠标悬停
	通过添加 .table-hover 类可以让  中的每一行对鼠标悬停状态作出响应
    
# 紧缩表格
	通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半
    
	
	
# HTML文件内容：

    

        

            
用户数据
            

                

                

                    
id
                    
name
                    
pwd
                
                

                

                

                    
001
                    
jason
                    
123
                

                

                    
002
                    
ja
                    
555
                

                

                    
003
                    
on
                    
999
                

                
            

            
用户注册
            

                
姓名：
                    
                
                
密码：
                    
                
                
性别：
                    男
                    女
                
                

                    
                
            
        

10.按钮组

# 可作为按钮使用的标签或元素
	为 、 或  元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
    
	点这里
	重置

11.图标

class="glyphicon glyphicon-heart"

# bootstrap自带的
	通过span标签修改class属性值

# fontawesome网站
	专门提供图标库  # 完美兼容bootstrap框架
	https://fontawesome.dashgame.com/

其余详细描述详见官网文档：

https://v3.bootcss.com/