JAVAEE_HTML+Bootstrap
2018-05-17 17:09:51 0 举报AI智能生成
基础HTML
作者其他创作
大纲/内容
文档声明
<font color="#c41230"><!doctype html></font>
网页头部
<font color="#c41230"><head></font>
<title>网页名</title>
<meta charset="UTF-8">
<style type="text/css">样式内容</style>
<link rel="stylesheet"type="text/css" href="css/demo2.css"/>
script
<font color="#c41230"></head></font>
网页主体
<b><font color="#c41230"><body></font></b>
bgcolor : 设置网页的背景颜色<br>
- background : 设置网页的背景图片<br>
text : 设置网页文本的颜色
<h1></h1>
文本格式化标签
<b>文本加粗</b>
<i>文本斜体</i>
<u>文本加下划线</u>
<del>文本删除线</del>
空格 换行 段落
&nbsp空格
<br>换行
<wbr>软换行
<hr>换行加分隔符
<p>段落
超链接标签
<a href="链接地址" [title="光标移入弹出提示"]>显示的文本</a>
锚点使用
<a name="锚点名称"></a>
<a href="页面地址#锚点名称">文本</a> <br>
图片标签
<img src="图片地址"/>
src : 图片地址<br> - alt : 当图片加载失败时 ,展示的文字<br> - width : 图片的宽度<br> - height : 图片的高度
HTML5新增多媒体标签
<video src="视频地址" controls="controls"autoplay="autoplay"/>
<audio src="语音地址"controls="controls"autoplay="autoplay"/>
<embed src="swf文件地址"/>
列表标签
<ol type="1|a|A|i|I" start="从几开始"><br><li>行文本</li><br></ol>
<ul type="1|a|A|i|I" start="从几开始"><br><li>行文本</li><br></ul>
表格标签
<table><br><tr><td>文本内容</td></tr><br></table>
table的属性<br>width : 可以设置table|td的宽度<br> - height : 可以设置table|td的高度<br> - border : 值为数字 , 表示边框的大小级别.<br> - bordercolor: 边框颜色;<br> - bgcolor : 指定table|td的背景颜色<br> - background:指定table|td的背景图片
tr行标签td列标签属性<br> 指定单个TD 横向跨越单元格的数量: colspan=数字;
<br> 指定单个TD 垂直跨越单元格的数量: rowspan=数字;<br>
表单标签
<form action=" 收集到的数据, 提交的服务器地址" enctype="UTF-8" method=": 表单的提交方式 (默认GET/POST)>"<br><br></from>
<input name =" 提交表单时, 单个输入组件的 值的key"><br>
- value : 输入框中的内容, 提交表单时, 提交的数据! 可以指定默认数据, 用户输入会改变!<br> - placeholder : 输入框中提示性的文本<br> - disabled: 出现属性则为true ,表示输入框是否不可输入 !<br> - readonly: 出现属性则为true ,表示输入框是否不可修改内容<br> - checked : 出现属性则为true ,表示单选多选框, 是否默认选中此项! <br>
type=""
-text : 默认, 文本输入框<br> - password: 密码输入框, 文本会按照浏览器样式被替换为*或·<br> - radio : 单选框(value属性是不显示的),同一组的单选框不可同时选中 ,通过相同的name属性来分组<br> - checkbox: 复选框(value属性是不显示的)<br> - file : 文件选择按钮<br> - hidden : 隐藏的输入框<br> - button : 按钮, 使用value来表示按钮上的文字<br> - submit : 提交按钮 , 会将表单中中所有数据, 提交到action地址下<br> - image : 图片提交按钮, 拥有src属性, 可以指定图片! 了解<br> - reset : 重置按钮, 重置表单输入状态 回复默认情况! 了解
<select></select>
size : 下拉选框一次展示的选项数<br> - multiple: 是否支持多选<br> - name : 数据提交的key
<option></option>
value : 不可见的 , 提交服务器时, 数据的值
<br> - 文本内容 : 下拉选框中展示的选项文字 , 如果未指定value属性值, 则默认文本内容为value属性值
label 标签 (了解)
1. 给接收事件的元素 , 添加一个id属性值
<br>
<br> 2. 在产生事件的元素 添加label标签, 并通过for属性 指定id,表示传递给id匹配的元素
<iframe src="要导入的网址" width=""height=""><br><br></iframe>
<font color="#c41230"></body></font>
Bootstrap
特点
Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：<br><br>跨设备、跨浏览器<br>响应式布局<br>提供的全面的组件<br>内置 jQuery 插件<br>支持 HTML5、CSS3 HTML5 语义化标签和 CSS3 <br>支持 LESS 动态样式
基础
bootstrap默认排版样式
Bootstrap 将全局 font-size 设置为 14px，<br>line-height 行高设置为 1.428(即20px)；<br><p>段落元素被设置等于 1/2 行高(即 10px)；<br>颜色被设置为#333。
标题标签样式
bootstrap也对 h1 - h6 标签 进行了样式的重构 !
<br>small: 副标题, 字体大小为原大小的 65%;
页面排版-内联文本元素
<mark>//添加标记<br><del></del> //删除的文本<br><s></s>无用的文本<br><ins></ins>//插入的文本<br><u></u> //下划线文本<br><small></small>//标准字号85%<br><strong></strong>//加粗 700<br><em></em>
设置文本对齐
class=""<br>- text-left : 居左
<br> - text-center : 居中
<br> - text-right : 居右
<br> - text-justify: 两端对其兼容差
<br> - text-nowrap : 不换行<br>
大小写文本
class=""<br>-text-lowercase 小写<br>-text-uppercase 大写<br>-text-capitalize 单词首字母大写
列表排版
- class: list-unstyled : 取消前置文字与图标样式<br>- class: list-inline : 取消前置文本与图标, 并横向排列
代码块
//内联代码<br><code><section></code><br>//用户输入<br>press <kbd>ctrl + ,</kbd><br>//代码块<br><pre><p>public static void toString...</p></pre><br><div class="well">BootStrap代码块</div>
bootstrap内置前景后景色
文本前景颜色: <br> 样式名 描述<br> text-muted 柔和灰<br> text-primary 主要蓝<br> text-success 成功绿<br> text-info 信息蓝<br> text-warning 警告黄<br> text-danger 危险红<br><br>背景颜色:<br> 样式名 描述<br> bg-primary 主要蓝<br> bg-success 成功绿<br> bg-info 信息蓝<br> bg-warning 警告黄<br> bg-danger 危险红
表格样式
基本表格样式
class="table"
条纹表格
class ="table table-striped"<br>
给表格添加边框
class="table table-bordered"
鼠标悬停切换底色表格行
class="table table-hover"
给tr单独指定颜色
class=""<br><br>active 鼠标悬停在行或单元格上<br>success 标识成功或积极的动作<br>info 标识普通的提示信息或动作<br>warning 标识警告或需要用户注意<br>danger 表示危险或潜在的带来负面影响的动作<br>sr-only 隐藏当前行
文字图标样式
使用span元素, 设置对应的class即可:
按钮样式
btn-default 默认样式<br>btn-success 成功样式<br>btn-info 一般信息样式<br>btn-warning 警告样式<br>btn-danger 危险样式<br>btn-primary 首选项样式<br>btn-link 链接样式
按钮尺寸样式
btn-lg 大按钮<br>btn-sm 小按钮<br>btn-xs 小小按钮<br>btn-block 块按钮 独占一行
特殊按钮样式 (激活与禁用)
激活: 被点击时的样式 active<br><br>禁用: 禁止点击, 点击没有视觉效果, 不会触发事件 , disabled
表单样式
更改表单中组件显示效果的样式 , 注意: input标签只有正确的设置了type类型, 才可以被赋予正确的样式 !
独占样式
在进行form表单编写时, 给组件<b><font color="#c41230">(input,select...)</font></b>指定class=form-control即可实现独占样式 !
<input type="text" placeholder="请输入帐号" class="form-control">
内联样式
样式自动切换 , 当屏幕宽度小于768px时, 会变为独占样式!
给form表单标签 添加class = form-inline实现.
<form class="form-inline" action="">
<br> 内联样式:
<br> <input type="text" placeholder="请输入帐号" class="form-control">
<br> </form>
组合输入框样式
组合输入框, 用于将一组元素 组合为一个输入框, 可以给输入框添加前置/后置部分;
1. 给form表单标签, 添加class=form-group样式<br> 2. 在form表单内部, 使用div标签 作为要参与组合的多个标签的父元素 ! 并指定此div的class=input-group<br> 3. 给准备前置/后置的元素添加class=input-group-addon
校验状态
我们可以在输入框中内容校验出现问题时, 进行 样式的更改, 用于提示用户 !
我们需要给每一个输入框, 先添加一个父元素 div . 然后给div添加class:<br> - has-error : 错误<br> - has-success : 成功<br> - has-warning : 警告
一般使用在: <br> 输入框失去焦点后, 我们通过脚本(JS) , 校验用户的输入内容, 根据结果, 使用脚本给div添加class
输入框尺寸
class=""<br>input-lg : 大输入框
<br>input-sm : 小输入框<br>
组合输入框尺寸 (添加给父div)
class=""<br>form-group-lg 大<br>from-group-sm 小
响应式
响应式网页前提 : 设置移动设备优先
在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。
content属性值分别为：屏幕宽度和设备一致100%、初始缩放比例100%、最大缩放比例100%、禁止用户缩放
栅格系统
栅格容器
需要为页面内容和栅格系统包裹一个.container 容器。<br>固定宽度<br><div class="container"></div><br>100%宽度<br><div class="container-fluid"></div>
行和列
创建一个响应式行<br><div class="container"><br> <div class="row"></div><br></div><br>列的指定<br><div class="container"><br> <div class="row"><br> <div class=”屏幕尺寸前缀-占用列数”></div><br> </div><br></div>
超小屏幕<768px 小屏幕≥768px 中等屏幕≥992px 大屏幕≥1200px<br>默认行为 水平排列 堆叠 堆叠 堆叠<br>.container最大宽度 auto 750px 970px 1170px<br>类前缀 .col-xs- .col-sm- .col-md- .col-lg-<br>列数(column) 12 12 12 12<br>最大列宽(column) auto 大约62px 大约81px 大约97px
栅格偏移
有时我们可以设置<b><font color="#c41230">列</font></b>偏移，让中间保持空隙<br>col-md-offset-偏移量
栅格移动
向左移动: <br> col-尺寸-pull-列数 : 向左移动指定列数<br>|<br>向右移动:<br> col-尺寸-push-列数 : 向右移动指定列数<br><br>栅格列移动后效果为覆盖
栅格嵌套
每一列中也可以嵌套一层列 , 内部列也是按照12等份排列 <br>
使用栅格系统, 显示多张图片时, 显示不完全问题.
<div class="container"><br> <div class="row"><br> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><img src="images/1.jpg"></div><br> ...<br> </div><br></div><br><br>解决方案: <br> 给每一张图片, 添加一个父元素, 指定class=thumbnail ;缩略<br><div class="container"><br> <div class="row"><br> <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><br> <div class="thumbnail"><img src="images/1.jpg"></div><br> </div><br> ...<br> </div><br></div>
响应式样式
下拉菜单
1. 创建一个div(下拉菜单的容器) , 指定class = dropdown | dropup<br><br> 2. 在div中, 添加两个子元素<br> - 第一个子元素用来做下拉箭头和文字 (按钮样式)<br> - 第二个子元素建议使用ul|ol 做下拉的列表<br><br>3. 在下拉按钮上添加元素属性 data-toggle值为dropdown,在按钮元素的内部,添加空的子元素span, 指定class为caret(下拉箭头样式)<br><br>4. 在下拉列表上添加class-dropdown-menu 实现下拉列表自动显示与隐藏 , 每个列, 添加超链接子元素, 否则无法显示正确的样式
下拉菜单样式调整
设置向上触发<br><div class="dropup"><br>菜单项居右对齐，默认是居左 <br><ul class="dropdown-menu dropdown-menu-right"><br>设置菜单的标题，不要加超链接<br><li class="dropdown-header">网站导航</li><br>设置菜单的分割线<br><li class="divider"></li><br>设置菜单的禁用项<br><li class="disabled"><a href="#">产品</a></li><br>让菜单默认显示<br><div class="dropdown open">
分裂式下拉菜单 - 按钮组合
1. 先实现一个下拉菜单 !<br><br> 2. 修改下拉菜单的div容器的class=btn-group<br> 3. 在div的第一个子元素的位置(之前的下拉按钮),左边添加新的按钮即可!<br> (修改完毕, div应拥有三个子元素分别为: 按钮, 下拉按钮 ,下拉选项)
分裂式下拉菜单 - 输入框组合
1. 编写一个普通的下拉菜单 . 将菜单容器div的class更改为 input-group-btn<br> 2. 编写一个输入框<br> 3. 编写一个div,class=input-group , 将上输入的输入框作为div的第一个子元素, 上述的普通下拉菜单, 作为div的第二个子元素 ,
巨幕
巨幕组件 用于增加文本大小 , 特别是标题大小, 会被增大很多 <br><br>给div 添加 class=jumbotron
代码原样块
<pre></pre>
显示块
class指定well效果类似pre . 但是不保留格式
导航
基本导航
使用ul 就可以完成导航的编写 !<br>必须给ul添加class=nav <br>
<ul class="nav"><br> <li><a href="javascript:void(0);">首页</a></li><br> <li><a href="javascript:void(0);">思宇DVD专版</a></li><br> <li><a href="javascript:void(0);">之强VCD专版</a></li><br> <li><a href="javascript:void(0);">尹斌蓝光专区</a></li><br> <li><a href="javascript:void(0);">更多资源</a></li><br></ul>
横向排列导航组件
在基本导航的ul上 添加class属性值: nav-tabs
横向 撑满父容器的导航
在横向排列导航组件的ul上 添加class属性值: nav-justified
胶囊导航
基于基本导航, 可以添加class = nav-pills 实现横向胶囊导航
<br>基于基本导航, 可以添加class=nav-pills nav-stacked 实现横向胶囊导航
下拉菜单+导航
导航的每一个选项 是一个li , li是块元素!<br>下拉菜单的父元素是一个div , div也是一个块元素<br>在编写导航时 , 将导航选项的单个li ,当作下拉菜单的父元素进行编写, 即可 !
<ul class="nav nav-pills"><br> <li><a href="javascript:void(0);">首页</a></li><br> <li><a href="javascript:void(0);">思宇DVD专版</a></li><br> <li><a href="javascript:void(0);">之强VCD专版</a></li><br> <li><a href="javascript:void(0);">尹斌蓝光专区</a></li><br> <li class="dropdown"><br> <a href="javascript:void(0);" data-toggle="dropdown">更多资源<br> </a><br> <ul class="dropdown-menu"><br> <li><a href="javascript:void(0);">欧美资源合集</a></li><br> <li><a href="javascript:void(0);">日韩资源合集</a></li><br> <li><a href="javascript:void(0);">国产资源合集</a></li><br> <li><a href="javascript:void(0);">外星人系列</a></li><br> </ul><br> </li><br></ul>
内容切换导航
1. 创建一个导航 , 用于做切换<br>2. 创建内容组件的容器div , class指定tab-content<br><br>3. 在内容组件的容器中, 添加内容选项卡div: <br> - 内容选项卡必须存在id 用来绑定导航项<br> - class 需要指定为tab-pane fade<br> - 首选项需要多指定两个class= in active<br><br>4. 修改第一步创建的导航中的 选项: 在每一项中的从超链接里, 添加锚点,指向内容选项卡的id <br>5. 修改第一步创建的导航中的 选项: 在每一个选项的超链接中, 添加data-toggle="tab" <br>
附加导航
1. 通过栅格系统, 实现左右两个div分割: <br> - 一侧div展示导航<br> - 一侧div展示内容<br> - 分割比例: 2:10<br><br> 2. 完成导航div的编写!<br> - 在div中添加导航内容(包含普通垂直导航即可)<br> - 给导航的ul标签添加属性:data-spy="affix" style="margin-top:xxpx"<br> - 给div添加id属性 , 用于 绑定到网页的body上<br><br> 3. 编写内容div , 在内容中每一个选项卡的位置 , 添加锚点(给元素添加id即可) <br><br> 4. 修改导航div中的ul中的li中的超链接地址为锚点地址<br><br> 5. 将导航绑定到body中<br> 给body添加如下属性: <br> - data-spy=scroll<br> - data-target="#导航div的id"<br> 给首选项添加class=active
导航条
一般用于设置网页的顶部与底部导航菜单 .
1. 创建一个导航条<br> <nav class="navbar navbar-default"><br> 2. 导航条中添加标题:<br> <span class="navbar-brand">JAVA19.COM</span> <br> </nav><br> 3. 添加导航菜单<br> 编写ul , ulclass设置为nav navbar-nav
导航条中可以添加的元素
1. 我们可以通过navbar-header 添加标题<br> <div class="navbar-header"><br> <span class="navbar-brand">JAVA19.COM</span> <br> </div>
2. 添加表单组件<br> 给导航条添加子元素form, 设置class为 navbar-form , 然后正常编写表单即可!<br> <form class="navbar-form"><br> <div class="input-group"><br> <input type="text" class="form-control"><br> <a class="input-group-addon">搜索</a><br> </div><br> </form>
3. 控制导航条中元素的位置:<br> class=navbar-right/left 实现 <br>
4. 使用栅格嵌套nav中所有子元素, 实现响应式效果<br> <nav class="navbar navbar-default"><br> <div class="container">
5. 导航中添加普通的文本 , 为了保持水平对齐 ,给文本添加class=navbar-text<br> <p class="navbar-text">哈哈哈哈哈</p> <br>
导航条样式的更改
- 固定位置: <br> 给nav标签添加 class=navbar-fixed-top 或 class=navbar-fixed-bottom<br><br>- 静态导航<br> 去掉圆角, 与网页等宽的导航条<br> 给nav标签添加 class=navbar-static-top
面包屑导航(路径导航条)
编写一个ul , 给ul添加class=breadcrumb <br>
弹出窗
分页标签
多页分页标签
编写一个ul 来实现分页标签<br>给ul添加class=pagination
上下翻页标签
与多页分页标签基本一致, 指定ul的class为:pager<br><br>实现翻页按钮左右分离: <br> 给上一页按钮 添加class=previous<br> 给下一页按钮 添加class=next
标签与徽章
标签: <br>span标签指定class=label label-default<br> <h3>思宇老师<span class="label label-default">知名演员</span></h3><br><br>徽章:<br>span标签指定class=badge<br> <h3>思宇老师<span class="badge">知名演员</span></h3>
弹出窗
指定超链接 , 添加按钮样式, 添加弹出窗参数: <br><br> - data-html : 是否在弹出的窗体中 显示html元素<br> - data-placement: 设置弹出的方向 默认值为top,可设置: top|bottom|left|right<br> - title : 设置弹出的窗体标题<br> - data-content : 设置弹出的网页内容<br> - data-trigger: 点击事件<br> - data-toggle : 值为:popover
格式 :
<br><a id="alertx" href="javascript:void(0)" class="btn btn-default" ></a>
最后一步: 在JS中调用初始化弹出窗:
<br>$("#xalert").popover();
警告框
我们可以在网页中编写一个警告框, 带有关闭按钮. 关闭后, 不再占用网页空间!
编写一个div , 指定class = alert alert-success<br>在div中添加警告框的文本内容;<br><br>在div中添加一个按钮子元素,包含关闭文本提示 , 指定class为close 指定data-dismiss=alert
职业：学士
0 条评论
下一页
为你推荐
查看更多
