423 重温Java Script and jQuery 葵花宝典 Bootstrap
Bootstrap需要引的三个文件
<link rel="stylesheet" href="css/bootstrap.css"> 表格元素的样式
<script type="text/jscript" src="js/bootstrap.js"></script> bootstrap动画
<script type="text/jscript" src="js/jquery-3.4.0.min.js"></script> javascript库
bootstrap最大的系统就是响应系统(栅格系统 )
<meta name="viewport" content="width=device-width, initial-scale=1"> 绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> //触屏缩放 引个头
<title></title>
<link rel="stylesheet" href="css/bootstrap.css">
<script type="text/jscript" src="js/bootstrap.js"></script>
<script type="text/jscript" src="js/jquery-3.4.0.min.js"></script>
<style>
#d1{
height: 200px;
width: 200px;
background: red;
}
</style>
<script type="text/jscript">
/* jqDom.click(function(){
$(this)
}); */
// js的页面加载完成
/* window.onload=function(){
$("#d1").mouseover(function(){
// js转jq 鼠标移入变绿色
$(this).css("background","green");
});
// 鼠标移出变蓝色
$("#d1").mouseout(function(){
$(this).css("background","blue");
})
} */
// jQuery的加载页面完成
$(function(){
$("#d1").mouseover(function(){
// js转jq 鼠标移入变绿色
$(this).css("background","green");
});
// 鼠标移出变蓝色
$("#d1").mouseout(function(){
/* jqDmo.css({
'color' : 'red',
'width' : '100px'
}); */
$(this).css({ // jQuery多样式
"background":"blue",
"width":"500px"});
})
})
// ---------------------JS操作属性-----------------
/* jsDom.getAttribute('class'); //获取属性值
jsDom.setAttribute('class','add');//设置属性值
jsDom.removeAttribute('class');//把属性移除
// -----------------JQ操作属性-----------------
jqDom.attr('class');
jqDom.attr('class','add');
jqDom.attr({
'data' : 'add',
'id' : 'add',
});
jQDom.removeAttr('class')
jqDom.addclass('del') */
$(function(){ //用jQuery获取table 设置样式
$("table").attr({
"border":"1px","width":"200px","height":"200px"
})
})
</script>
</head>
<body>
<div id="d1"></div>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- table下的父子选择器 -->
<table class="table table-hover">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button> <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button> <!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button> <!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button> <!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button> <!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>
423 重温Java Script and jQuery 葵花宝典 Bootstrap的更多相关文章
- 419 JQuery and BootStrap
把葵花宝典剩下的知识讲完了 又学习了bootstrap <link rel="stylesheet" href="css/bootstrap.css"&g ...
- Java Script 编码规范【转】
Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- Jquery的bootstrap在线文本编辑器插件Summernote
http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
- asp.netajax与jquery和bootstrap的无刷新完美实现
20190421asp.netajax与jquery和bootstrap的无刷新完美实现 设计代码和后台代码中重要部分加粗和深色以及字号加大. 设计前台代码: <%@ Page Title=&q ...
- 第86节：Java中的JQuery基础
第86节:Java中的JQuery 前言复习 定时器: setInterval clearInterval setTimeout clearTimeout 显示: img.style.display ...
- 标签页（tab）切换的原生js,jquery和bootstrap实现
概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...
- vue框架(三)_vue引入jquery、bootstrap
一.vue安装jquery 1.按照之前博客的内容,新建一个vue工程. 2.在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 3.在build/ ...
随机推荐
- C# 中利用 CRC32 值判断文件是否重复
需要在 NuGet 中引用 Crc32.NET 包 直接贴代码了: using Force.Crc32; using System; using System.Collections.Generic; ...
- typeScript面对对象篇二
接口 接触过面向对象的后端语言的应该对接口很熟悉,只接触过前端的对接口会有点陌生,在维基百科中对OOP中接口的定义是这样的: 在面向对象的语言中,术语interface经常被用来定义一个不包含数据和逻 ...
- 一键发布部署vs插件[AntDeploy],让net开发者更幸福
一键发布工具(ant deploy tool) 插件下载地址: https://marketplace.visualstudio.com/items?itemName=nainaigu.AntDepl ...
- JS 设计模式五 -- 命令模式
概念 命令模式中的命令(command) 指的是 一个执行某些待定事情的指令. 用一种松耦合的方式来设计程序,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. 例子 假设html结构如下: &l ...
- 禁止Cnario Player启动后自动开始播放
Cnario Player安装激活后, 默认开机后自动启动, 启动加载内容完成后进入10秒倒计时, 10秒后即开始播放关机前播放的内容. 如果不想让其自动开始播放, 可按照如下办法设置其不自动播放. ...
- vue 修改数据界面没有及时更新nextTick
使用场景:有些时候,我们使用vue修改了一些数据,但是页面上的DOM还没有更新,这个时候我们就需要使用到nextTick. vm.$nextTick( [callback] ) 说明: 将回调延迟到下 ...
- django模板引擎自定义变量
定义临时变量: {% with i=1 %} {{i}} {% endwith %} 定义对临时变量操作的tag 在templatetags中创建set_val.py 内容是 from django ...
- Python——pyqt5——各框架编程
一.日期时间(dateTimeEdit/dateEdit) setDateTime:设置日期(含时间) QDateTime.currentDateTime():当前日期(含时间) setDate:设置 ...
- 抽奖大转盘 js代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 《JAVA与模式》之工厂方法模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...