javascript高级及bootstrap框架初步

    * HTML DOM
        1. 标签体的设置和获取:innerHTML
        2. 使用html元素对象的属性
        3. 控制元素样式
            1. 使用元素的style属性来设置
                如:
                     //修改样式方式1
                    div1.style.border = "1px solid red";
                    div1.style.width = "200px";
                    //font-size--> fontSize
                    div1.style.fontSize = "20px";
            2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。


## 事件监听机制:
    * 概念:某些组件被执行了某些操作后,触发某些代码的执行。    
        * 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
        * 事件源:组件。如: 按钮 文本输入框...
        * 监听器:代码。
        * 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。


    * 常见的事件:
        1. 点击事件:
            1. onclick:单击事件
            2. ondblclick:双击事件
        2. 焦点事件
            1. onblur:失去焦点
            2. onfocus:元素获得焦点。
    
        3. 加载事件:
            1. onload:一张页面或一幅图像完成加载。
            DOM树,资源文件加载完毕后执行(比如图片下载完;慢)
    
        4. 鼠标事件:(记5,6,7)
            1. onmousedown    鼠标按钮被按下。
            2. onmouseup    鼠标按键被松开。
            3. onmousemove    鼠标被移动。
            4. onmouseout    鼠标从某元素移开。
            5. onmouseover    鼠标移到某元素之上。
            6. onmouseenter 鼠标移入
            7. onmouseleave 鼠标移出


​            
        5. 键盘事件:
            1. onkeydown    某个键盘按键被按下。    
            2. onkeyup        某个键盘按键被松开。
            3. onkeypress    某个键盘按键被按下并松开。
    
        6. 选择和改变
            1. onchange    域的内容被改变。
            2. onselect    文本被选中。
    
        7. 表单事件:
            1. onsubmit    确认按钮被点击。
            2. onreset    重置按钮被点击。

bootstrap:

1. 全局CSS样式:
        * 按钮:class="btn btn-default"
        * 图片:
            *  class="img-responsive":图片在任意尺寸都占100%
            *  图片形状
                *  <img src="..." alt="..." class="img-rounded">:方形
                *  <img src="..." alt="..." class="img-circle"> : 圆形
                *  <img src="..." alt="..." class="img-thumbnail"> :相框
        * 表格
            * table
            * table-bordered
            * table-hover
        * 表单
            * 给表单项添加:class="form-control" 

代码不再赘述,本篇单纯为笔记

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Bootstrap框架是基于CSS和JavaScript前端开发框架,它使用了大量的CSS样式和JavaScript插件来实现网页的布局和交互效果。Bootstrap框架提供了一系列的CSS类和JavaScript组件,可以快速地构建出美观、响应式的网页。因此,Bootstrap框架与CSS和JavaScript密切相关,是基于它们之上的一种封装和扩展。 ### 回答2: Bootstrap框架和CSS以及JavaScript之间有密切的关系。 首先,Bootstrap框架是一个基于HTML、CSS和JavaScript前端开发框架。它通过提供预定义的CSS样式和JavaScript插件,使得网页开发变得更加快速、便捷和美观。 Bootstrap框架的核心是基于CSS的样式库。它提供了大量的CSS样式类,可以用于定义页面的布局、边距、颜色、字体等外观样式。这些CSS样式类让开发者可以更加轻松地实现页面的自适应布局和响应式设计。开发者只需要在HTML元素中使用相应的CSS类,即可获得预定义的样式效果。 而Bootstrap框架也包含了一些基于JavaScript的插件。这些插件可以用于实现网页中的交互效果和动态功能,如菜单导航、轮播图、模态框等。通过使用这些JavaScript插件,开发者可以在不编写大量JS代码的情况下,实现页面的一些常见交互效果,提升用户体验。 另外,Bootstrap框架还集成了一些第三方的JavaScript库,如jQuery。这些库扩展了Bootstrap框架的功能和效果,使开发者能够更加灵活地使用JavaScript来实现定制化的功能和效果。 总之,Bootstrap框架与CSS和JavaScript密切相关。它通过提供预定义的CSS样式和JavaScript插件,简化了网页开发的过程,使开发者能够更加轻松地实现自适应布局、响应式设计以及交互效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值