资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/JavaWEB开发05_Bootstrap

JavaWEB开发05_Bootstrap

_Dreams / 2650人阅读

摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。

上次课内容:
什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库

基本选择器:

​ ID选择器: #ID名称

​ 类选择器: .类名

​ 元素选择器: 元素的名称

​ 通配符选择器: * 找出页面上所有元素

​ 选择器分组: 选择器1,选择器2 [选择器1 , 选择器2]

层级选择器:

​ 后代选择器: 选择器1 选择器2 找出来的选择器1 下面的所有选择器2 子孙

​ 子元素选择器: 选择器1 > 选择器2 找出来的是所有的子节点 儿子

​ 相邻兄弟选择器: 选择器1+选择器2 找出来的紧挨着自己的弟弟

​ 兄弟选择器: 选择器1~选择器2 找出所有的弟弟

​ (找出所有兄弟: $("div").siblings() )

属性选择器:

选择器 div
选择器[title]
选择器[title="test"]
选择器[title="test"][style]

基本的过滤器: 选择器:过滤器 $("div:first")

​ :first : 找出第一个元素

​ :last 找出最后一个元素

​ :even 找出偶数索引

​ :odd 找出奇数

​ :gt(index) greater-than大于

​ :lt(index) 小于

​ :eq(index) 等于

表单选择器:

​ :input 找出所有的输入项, textarea select button

​ :password

​ :text

​ :radio

表单对象属性的过滤器

​ :selected

​ :checked

常用函数:

​ 属性prop() properties

​ 如果传入一个参数 就是获取

​ prop("src","../img/1.jpg");

​ 设置图片路径

​ attr : 操作一些自定义的属性

​ prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性

​ css() ; 修改css样式

​ addClass() : 添加一个class样式

​ removeClass() : 移除

​

​ blur : 绑定失去焦点

​ focus: 绑定获得焦点事件

​ click:

​ dblclick

​ change

​

​ append : 给自己添加儿子

​ appendTo : 把自己添加到别人家

​ prepend : 在自己子节点最前面添加子节点

​ after : 在自己后面添加一个兄弟

​ before: 在自己前面添加一个兄弟

​

​ $("数组对象").each(function(index,data))

​ $.each(arr,function(index,data))

​

表单校验案例 技术分析

trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为

triggerHandler : 仅仅只会触发事件所对应的函数

is()

步骤分析

首先给必填项,添加尾部添加一个小红点

获取用户输入的信息,做相应的校验

事件: 获得焦点, 失去焦点, 按键抬起

表单提交的事件

代码实现 使用JQuery发送请求局部刷新页面

​ 数据交换格式:

​ json

​ xml

​

什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

JSON格式

​ JSON对象

{ key1:value}   
{"username":"zhangsan","password":"123"}

​ JSON数组

[{ key1:value},{ key1:value},{ key1:value}]

​

使用BootStrap开发一个响应式的页面出来 需求分析

开发一套响应式页面.让他能够在各种设备上显示正常,提升用户体验

技术分析
BootStap概述

什么是BootStrap

​

BootStrap有什么作用

复制粘贴, 能够提高开发人员的工作效率

什么是响应式页面

适应不同的分辨率显示不同样式,提高用户的体验

​

BootStrap的中文网

http://www.bootcss.com

下载BootStrap

BootStrap结构

全局CSS

bootStrap中已经定义好了一套CSS的样式表

组件

BootStrap定义的一套按钮,导航条等组件

JS插件

BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的入门开发

引入相关的头文件

BootStrap的布局容器

.container 类用于固定宽度并支持响应式布局的容器。


  ...

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。


  ...

校验表单扩展:

trigger : 触发浏览器默认行为

triggerHandler : 不会触发

is : 判断

find : 查找

老黄历:

什么json: 轻量级的数据交换格式

json对象: {"username":"zhangsan"}

json数组: [ {"username":"zhangsan"}, {"username":"zhangsan"}, {"username":"zhangsan"}]

ajax异步请求:

​ 同步和异步

row

 Bootstrap 栅格系统的工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding

​

BootStrap的栅格系统

响应式设计: 这种设计依赖于CSS3中的媒体查询

栅格样式:

设备分辨率大于1200 使用lg样式

设备分辨率大于992 < 1200 使用md样式

设备分辨率大于768 < 992 使用sm样式

设备分辨率小于768使用xs样式

BootStrap的全局CSS

定义了一套CSS

对页面中的元素进行定义

列表元素,表单,按钮,图片...

步骤分析 代码实现 使用BootStrap布局网站首页 需求分析

请使用BootStrap对我们的首页进行优化

技术分析 步骤分析 
新建一个HTML页面.引入bootStrap相关的js和CSS


定义一个整体的div, 将整体的div分成8个部分


完成没部分的内容显示
代码实现 



    
        
        
        
        

        

        
        

        
        

    

    
        


            

                

                    
                

                
                

                    登录
                    注册
                    购物车
五天前端内容总结

JQ方式校验表单(要求做出来)

json : (了解)

json对象 {}

json数组 [{},{}]

$.get(url,function(data){}) (了解)

bootstrap: Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

全局CSS样式: css样式

栅格系统:

将屏幕划分成12个格子,12列

class="row" 当前是行

行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)

col-lg-数字: 在超宽屏幕上使用

col-md-数字: 在中等屏幕上,PC电脑

col-sm-数字: 在平板电脑上

col-xs-数字: 在手机上

组件: 导航条 , 进度条, 字体

javascript插件 : 轮播图

复制粘贴

什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验

HTML: 超文本标记语言: 设计网页,决定了网页的结构

CSS: 层叠样式表 ,主要是用来美化页面, 将美化和HTML代码进行分离,提高代码复用性

javascript: 脚本语言,由浏览器解释执行, 弱类型语言(var i), 提供用户交互

jquery: javascript函数库,进一步的封装

选择器:

ID选择器

类选择器

元素选择器

通配符选择器

选择器分组

层级选择器

后代选择器

子元素选择器

相邻兄弟选择器

兄弟选择器 : 找出所有的弟弟

属性选择器:

选择器[属性名称="属性的值"]

表单选择器

:input

:text

:password

body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)

基本的过滤器

:first

:last

:even

:odd

:gt

:lt

:eq

表单对象属性

:selected

:checked

云服务器 GPU云服务器 _Bootstrap bootstrap前端开发 so文件javaweb开发 javaweb自动数据库开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53149.html

相关文章

  • JavaWEB开发05_Bootstrap

    摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。 上次课内容:什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库 基本选择器: ​ ID选择器: #ID名称 ​ 类选择器: .类名 ​ 元素选择器: 元素的名称 ​ 通配符选择器: * 找出页面上...

    coolpail 评论0 收藏0

  • JavaWEB开发05_Bootstrap

    摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。 上次课内容:什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库 基本选择器: ​ ID选择器: #ID名称 ​ 类选择器: .类名 ​ 元素选择器: 元素的名称 ​ 通配符选择器: * 找出页面上...

    shevy 评论0 收藏0

  • debian(Linux)搭建环境跑javaweb应用

    摘要：搭建环境，配置包卸载自带的卸载但不删除配置卸载并且删除相关配置将拷贝到目录下面，这里如果没有文件夹，则创建该文件夹命令创建文件夹把下载的文件拷贝到心创建的目录下面解压缩文件设置环境变量，用打开文件在文件的最后面增加 1.搭建JAVA环境，配置jdk包 1、卸载debian ubuntu 自带的openjdk #apt-get remove openjdk* 卸载但不删除配置 #ap...

    williamwen1986 评论0 收藏0

发表评论

登陆后可评论

0条评论

_Dreams

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<