首页  思维导图  详情

JAVAEE_HTML+Bootstrap

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





AI智能生成

为你推荐

查看更多



web前端 HTML5 CSS3 HTML CSS

Html

基础HTML

HTML5

作者其他创作

大纲/内容

HTML

文档声明

<!doctype html>

网页头部

<head>

script

</head>

网页主体

<body>

bgcolor : 设置网页的背景颜色

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

text : 设置网页文本的颜色

文本格式化标签

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

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

空格换行段落

&nbsp空格

<br>换行

<wbr>软换行

<hr>换行加分隔符

<p>段落

超链接标签

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

锚点使用

图片标签

HTML5新增多媒体标签

列表标签

表格标签

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

表单标签

<form action=\

<input name =\

type=\"\"

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

label 标签 (了解)

</body>

Bootstrap

特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：跨设备、跨浏览器响应式布局提供的全面的组件内置 jQuery 插件支持 HTML5、CSS3 HTML5 语义化标签和 CSS3 支持 LESS 动态样式

基础

bootstrap默认排版样式

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

标题标签样式

页面排版-内联文本元素

<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 单词首字母大写

列表排版

代码块

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 隐藏当前行

文字图标样式

按钮样式

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

按钮尺寸样式

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

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

表单样式

独占样式

内联样式

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

组合输入框样式

校验状态

输入框尺寸

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-列数 : 向右移动指定列数栅格列移动后效果为覆盖

栅格嵌套

<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 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\">

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

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

巨幕

代码原样块

显示块

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

胶囊导航

下拉菜单+导航

<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. 创建一个导航条 <nav class=\"navbar navbar-default\"> 2. 导航条中添加标题: <span class=\"navbar-brand\

导航条中可以添加的元素

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

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

导航条样式的更改

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

弹出窗

分页标签

多页分页标签

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

上下翻页标签

标签与徽章

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

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

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

警告框