首页  思维导图  详情

JAVAEE_HTML+Bootstrap

2018-05-17 17:09:51   0  举报





AI智能生成

基础HTML

HTML5

作者其他创作

大纲/内容

文档声明

<!doctype html>

网页头部

<head>

script

</head>

网页主体

<body>

bgcolor : 设置网页的背景颜色

- background : 设置网页的背景图片

text : 设置网页文本的颜色

文本格式化标签

<u>文本加下划线</u>

<del>文本删除线</del>

空格换行段落

&nbsp空格

<br>换行

<wbr>软换行

<hr>换行加分隔符

<p>段落

超链接标签

<a href="链接地址" [title="光标移入弹出提示"]>显示的文本</a>

锚点使用

图片标签

src : 图片地址
- alt : 当图片加载失败时 ,展示的文字
- width : 图片的宽度
- height : 图片的高度

HTML5新增多媒体标签

列表标签

表格标签

table的属性
width : 可以设置table|td的宽度
- height : 可以设置table|td的高度
- border : 值为数字 , 表示边框的大小级别.
- bordercolor: 边框颜色;
- bgcolor : 指定table|td的背景颜色
- background:指定table|td的背景图片

tr行标签td列标签属性
指定单个TD 横向跨越单元格的数量: colspan=数字;
指定单个TD 垂直跨越单元格的数量: rowspan=数字;

表单标签

- value : 输入框中的内容, 提交表单时, 提交的数据! 可以指定默认数据, 用户输入会改变!
- placeholder : 输入框中提示性的文本
- disabled: 出现属性则为true ,表示输入框是否不可输入 !
- readonly: 出现属性则为true ,表示输入框是否不可修改内容
- checked : 出现属性则为true ,表示单选多选框, 是否默认选中此项!

type=""

-text : 默认, 文本输入框
- password: 密码输入框, 文本会按照浏览器样式被替换为*或·
- radio : 单选框(value属性是不显示的),同一组的单选框不可同时选中 ,通过相同的name属性来分组
- checkbox: 复选框(value属性是不显示的)
- file : 文件选择按钮
- hidden : 隐藏的输入框
- button : 按钮, 使用value来表示按钮上的文字
- submit : 提交按钮 , 会将表单中中所有数据, 提交到action地址下
- image : 图片提交按钮, 拥有src属性, 可以指定图片! 了解
- reset : 重置按钮, 重置表单输入状态回复默认情况! 了解

size : 下拉选框一次展示的选项数
- multiple: 是否支持多选
- name : 数据提交的key

value : 不可见的 , 提交服务器时, 数据的值
- 文本内容 : 下拉选框中展示的选项文字 , 如果未指定value属性值, 则默认文本内容为value属性值

label 标签 (了解)

1. 给接收事件的元素 , 添加一个id属性值

2. 在产生事件的元素添加label标签, 并通过for属性指定id,表示传递给id匹配的元素

</body>

Bootstrap

特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

跨设备、跨浏览器
响应式布局
提供的全面的组件
内置 jQuery 插件
支持 HTML5、CSS3 HTML5 语义化标签和 CSS3
支持 LESS 动态样式

基础

bootstrap默认排版样式

Bootstrap 将全局 font-size 设置为 14px，
line-height 行高设置为 1.428(即20px)；
<p>段落元素被设置等于 1/2 行高(即 10px)；
颜色被设置为#333。

标题标签样式

bootstrap也对 h1 - h6 标签进行了样式的重构 !
small: 副标题, 字体大小为原大小的 65%;

页面排版-内联文本元素

<mark>//添加标记
<del></del> //删除的文本
<s></s>无用的文本
<ins></ins>//插入的文本
<u></u> //下划线文本
<small></small>//标准字号85%
<strong></strong>//加粗 700
<em></em>

设置文本对齐

class=""
- text-left : 居左
- text-center : 居中
- text-right : 居右
- text-justify: 两端对其兼容差
- text-nowrap : 不换行

大小写文本

class=""
-text-lowercase 小写
-text-uppercase 大写
-text-capitalize 单词首字母大写

列表排版

- class: list-unstyled : 取消前置文字与图标样式
- class: list-inline : 取消前置文本与图标, 并横向排列

代码块

//内联代码
<code><section></code>
//用户输入
press <kbd>ctrl + ,</kbd>
//代码块
<pre><p>public static void toString...</p></pre>
<div class="well">BootStrap代码块</div>

bootstrap内置前景后景色

文本前景颜色:
样式名描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红

背景颜色:
样式名描述
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红

表格样式

基本表格样式

class="table"

条纹表格

class ="table table-striped"

给表格添加边框

class="table table-bordered"

鼠标悬停切换底色表格行

class="table table-hover"

给tr单独指定颜色

class=""

active 鼠标悬停在行或单元格上
success 标识成功或积极的动作
info 标识普通的提示信息或动作
warning 标识警告或需要用户注意
danger 表示危险或潜在的带来负面影响的动作
sr-only 隐藏当前行

文字图标样式

使用span元素, 设置对应的class即可:

按钮样式

btn-default 默认样式
btn-success 成功样式
btn-info 一般信息样式
btn-warning 警告样式
btn-danger 危险样式
btn-primary 首选项样式
btn-link 链接样式

按钮尺寸样式

btn-lg 大按钮
btn-sm 小按钮
btn-xs 小小按钮
btn-block 块按钮独占一行

特殊按钮样式 (激活与禁用)

激活: 被点击时的样式 active

禁用: 禁止点击, 点击没有视觉效果, 不会触发事件 , disabled

表单样式

更改表单中组件显示效果的样式 , 注意: input标签只有正确的设置了type类型, 才可以被赋予正确的样式 !

独占样式

在进行form表单编写时, 给组件(input,select...)指定class=form-control即可实现独占样式 !

内联样式

样式自动切换 , 当屏幕宽度小于768px时, 会变为独占样式!

给form表单标签添加class = form-inline实现.

组合输入框样式

组合输入框, 用于将一组元素组合为一个输入框, 可以给输入框添加前置/后置部分;

1. 给form表单标签, 添加class=form-group样式
2. 在form表单内部, 使用div标签作为要参与组合的多个标签的父元素 ! 并指定此div的class=input-group
3. 给准备前置/后置的元素添加class=input-group-addon

校验状态

我们可以在输入框中内容校验出现问题时, 进行样式的更改, 用于提示用户 !

我们需要给每一个输入框, 先添加一个父元素 div . 然后给div添加class:
- has-error : 错误
- has-success : 成功
- has-warning : 警告

一般使用在:
输入框失去焦点后, 我们通过脚本(JS) , 校验用户的输入内容, 根据结果, 使用脚本给div添加class

输入框尺寸

class=""
input-lg : 大输入框
input-sm : 小输入框

组合输入框尺寸 (添加给父div)

class=""
form-group-lg 大
from-group-sm 小

响应式

响应式网页前提 : 设置移动设备优先

在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

content属性值分别为：屏幕宽度和设备一致100%、初始缩放比例100%、最大缩放比例100%、禁止用户缩放

栅格系统

栅格容器

需要为页面内容和栅格系统包裹一个.container 容器。
固定宽度
<div class="container"></div>
100%宽度
<div class="container-fluid"></div>

行和列

创建一个响应式行
<div class="container">
<div class="row"></div>
</div>
列的指定
<div class="container">
<div class="row">
<div class=”屏幕尺寸前缀-占用列数”></div>
</div>
</div>

超小屏幕<768px 小屏幕≥768px 中等屏幕≥992px 大屏幕≥1200px
默认行为水平排列堆叠堆叠堆叠
.container最大宽度 auto 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数(column) 12 12 12 12
最大列宽(column) auto 大约62px 大约81px 大约97px

栅格偏移

有时我们可以设置列偏移，让中间保持空隙
col-md-offset-偏移量

栅格移动

向左移动:
col-尺寸-pull-列数 : 向左移动指定列数
|
向右移动:
col-尺寸-push-列数 : 向右移动指定列数

栅格列移动后效果为覆盖

栅格嵌套

每一列中也可以嵌套一层列 , 内部列也是按照12等份排列

使用栅格系统, 显示多张图片时, 显示不完全问题.

<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/1.jpg"></div>
...
</div>
</div>

解决方案:
给每一张图片, 添加一个父元素, 指定class=thumbnail ;缩略
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail"><img src="images/1.jpg"></div>
</div>
...
</div>
</div>

响应式样式

下拉菜单

1. 创建一个div(下拉菜单的容器) , 指定class = dropdown | dropup

2. 在div中, 添加两个子元素
- 第一个子元素用来做下拉箭头和文字 (按钮样式)
- 第二个子元素建议使用ul|ol 做下拉的列表

3. 在下拉按钮上添加元素属性 data-toggle值为dropdown,在按钮元素的内部,添加空的子元素span, 指定class为caret(下拉箭头样式)

4. 在下拉列表上添加class-dropdown-menu 实现下拉列表自动显示与隐藏 , 每个列, 添加超链接子元素, 否则无法显示正确的样式

下拉菜单样式调整

设置向上触发
<div class="dropup">
菜单项居右对齐，默认是居左
<ul class="dropdown-menu dropdown-menu-right">
设置菜单的标题，不要加超链接
<li class="dropdown-header">网站导航</li>
设置菜单的分割线
<li class="divider"></li>
设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li>
让菜单默认显示
<div class="dropdown open">

分裂式下拉菜单 - 按钮组合

1. 先实现一个下拉菜单 !

2. 修改下拉菜单的div容器的class=btn-group
3. 在div的第一个子元素的位置(之前的下拉按钮),左边添加新的按钮即可!
(修改完毕, div应拥有三个子元素分别为: 按钮, 下拉按钮 ,下拉选项)

分裂式下拉菜单 - 输入框组合

1. 编写一个普通的下拉菜单 . 将菜单容器div的class更改为 input-group-btn
2. 编写一个输入框
3. 编写一个div,class=input-group , 将上输入的输入框作为div的第一个子元素, 上述的普通下拉菜单, 作为div的第二个子元素 ,

巨幕

巨幕组件用于增加文本大小 , 特别是标题大小, 会被增大很多

给div 添加 class=jumbotron

代码原样块

显示块

class指定well效果类似pre . 但是不保留格式

导航

基本导航

使用ul 就可以完成导航的编写 !
必须给ul添加class=nav

<ul class="nav">
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">思宇DVD专版</a></li>
<li><a href="javascript:void(0);">之强VCD专版</a></li>
<li><a href="javascript:void(0);">尹斌蓝光专区</a></li>
<li><a href="javascript:void(0);">更多资源</a></li>
</ul>

横向排列导航组件

在基本导航的ul上添加class属性值: nav-tabs

横向撑满父容器的导航

在横向排列导航组件的ul上添加class属性值: nav-justified

胶囊导航

基于基本导航, 可以添加class = nav-pills 实现横向胶囊导航
基于基本导航, 可以添加class=nav-pills nav-stacked 实现横向胶囊导航

下拉菜单+导航

导航的每一个选项是一个li , li是块元素!
下拉菜单的父元素是一个div , div也是一个块元素
在编写导航时 , 将导航选项的单个li ,当作下拉菜单的父元素进行编写, 即可 !

<ul class="nav nav-pills">
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">思宇DVD专版</a></li>
<li><a href="javascript:void(0);">之强VCD专版</a></li>
<li><a href="javascript:void(0);">尹斌蓝光专区</a></li>
<li class="dropdown">
<a href="javascript:void(0);" data-toggle="dropdown">更多资源
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);">欧美资源合集</a></li>
<li><a href="javascript:void(0);">日韩资源合集</a></li>
<li><a href="javascript:void(0);">国产资源合集</a></li>
<li><a href="javascript:void(0);">外星人系列</a></li>
</ul>
</li>
</ul>

内容切换导航

1. 创建一个导航 , 用于做切换
2. 创建内容组件的容器div , class指定tab-content

3. 在内容组件的容器中, 添加内容选项卡div:
- 内容选项卡必须存在id 用来绑定导航项
- class 需要指定为tab-pane fade
- 首选项需要多指定两个class= in active

4. 修改第一步创建的导航中的选项: 在每一项中的从超链接里, 添加锚点,指向内容选项卡的id
5. 修改第一步创建的导航中的选项: 在每一个选项的超链接中, 添加data-toggle="tab"

附加导航

1. 通过栅格系统, 实现左右两个div分割:
- 一侧div展示导航
- 一侧div展示内容
- 分割比例: 2:10

2. 完成导航div的编写!
- 在div中添加导航内容(包含普通垂直导航即可)
- 给导航的ul标签添加属性:data-spy="affix" style="margin-top:xxpx"
- 给div添加id属性 , 用于绑定到网页的body上

3. 编写内容div , 在内容中每一个选项卡的位置 , 添加锚点(给元素添加id即可)

4. 修改导航div中的ul中的li中的超链接地址为锚点地址

5. 将导航绑定到body中
给body添加如下属性:
- data-spy=scroll
- data-target="#导航div的id"
给首选项添加class=active

导航条

一般用于设置网页的顶部与底部导航菜单 .

1. 创建一个导航条
<nav class="navbar navbar-default">
2. 导航条中添加标题:
<span class="navbar-brand">JAVA19.COM</span>
</nav>
3. 添加导航菜单
编写ul , ulclass设置为nav navbar-nav

导航条中可以添加的元素

1. 我们可以通过navbar-header 添加标题
<div class="navbar-header">
<span class="navbar-brand">JAVA19.COM</span>
</div>

2. 添加表单组件
给导航条添加子元素form, 设置class为 navbar-form , 然后正常编写表单即可!
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control">
<a class="input-group-addon">搜索</a>
</div>
</form>

3. 控制导航条中元素的位置:
class=navbar-right/left 实现

4. 使用栅格嵌套nav中所有子元素, 实现响应式效果
<nav class="navbar navbar-default">
<div class="container">

5. 导航中添加普通的文本 , 为了保持水平对齐 ,给文本添加class=navbar-text
<p class="navbar-text">哈哈哈哈哈</p>

导航条样式的更改

- 固定位置:
给nav标签添加 class=navbar-fixed-top 或 class=navbar-fixed-bottom

- 静态导航
去掉圆角, 与网页等宽的导航条
给nav标签添加 class=navbar-static-top

面包屑导航(路径导航条)

编写一个ul , 给ul添加class=breadcrumb

弹出窗

分页标签

多页分页标签

编写一个ul 来实现分页标签
给ul添加class=pagination

上下翻页标签

与多页分页标签基本一致, 指定ul的class为:pager

实现翻页按钮左右分离:
给上一页按钮添加class=previous
给下一页按钮添加class=next

标签与徽章

标签:
span标签指定class=label label-default
<h3>思宇老师<span class="label label-default">知名演员</span></h3>

徽章:
span标签指定class=badge
<h3>思宇老师<span class="badge">知名演员</span></h3>

弹出窗

指定超链接 , 添加按钮样式, 添加弹出窗参数:

- data-html : 是否在弹出的窗体中显示html元素
- data-placement: 设置弹出的方向默认值为top,可设置: top|bottom|left|right
- title : 设置弹出的窗体标题
- data-content : 设置弹出的网页内容
- data-trigger: 点击事件
- data-toggle : 值为:popover

格式 :
<a id="alertx" href="javascript:void(0)" class="btn btn-default" ></a>

最后一步: 在JS中调用初始化弹出窗:
$("#xalert").popover();

警告框

我们可以在网页中编写一个警告框, 带有关闭按钮. 关闭后, 不再占用网页空间!

编写一个div , 指定class = alert alert-success
在div中添加警告框的文本内容;

在div中添加一个按钮子元素,包含关闭文本提示 , 指定class为close 指定data-dismiss=alert