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/ ...
随机推荐
- 查询本地电脑IP地址
使用Windows+R键打开"运行"窗口,然后输入CMD进入命令提示窗口 进入命令窗口之后,输入:ipconfig/all 回车即可看到整个电脑的详细的IP配置信息
- CSS有哪些引入方式，link和@import的区别
3种方式哦,行内样式.内部样式表.外部样式表 1. 行内样式又称为内联样式,直接在HTML标签的style属性中添加css. 会导致 HTML 代码变得冗长 2. 内部样式表又称为嵌入方式,是在HTM ...
- C语言函数及变量的声明与定义的区别
变量: 1.声明变量不需要建立存储空间,如:extern int a; 2.定义变量需要建立存储空间,如:int a:或者 int b=10:无论变量是否赋值,只要定义它,即占用空间. 3.int a ...
- Photoshop给草坡上的人物加上大气的霞光
<点小图查看大图> 最终效果 1.打开原图素材大图,创建可选颜色调整图层,对红色.黄色.黑色进行调整,参数设置如图1 - 3,效果如图4.这一步减少图片中的红色,并给暗部增加蓝色. < ...
- JQuery滚动分页查询功能
//获取滚动条的高度 function getScrollTop() { var scrollTop = 0; if (document.documentElement && docu ...
- windows 监控
监控time_wait状态tcp/ip连接 > netstat -an | findstr "TIME_WAIT" 如果监控此值发现量比较大,且有类似socketExcept ...
- 为什么qt成为c++界面编程的第一选择
为什么qt成为c++界面编程的第一选择 一.前言 为什么现在QT越来越成为界面编程的第一选择,笔者从事qt界面编程已经有接近8年,在这之前我做C++界面都是基于MFC,也做过5年左右.当时为什么会从M ...
- SpringBoot配置activemq消息队列
1.配置pom相关依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...
- 自动化测试框架【windows版】：JMeter + Ant + Jenkins
前提条件:windows安装了jmeter.ant.jenkins 安装方法参考汇总目录中对应的博文 截图看不清的,可以调大浏览器倍数看 jenkins驱动ant执行,ant驱动jmeter执行 an ...
- kubernetes学习第一篇-k8s安装以及HelloWorld
安装 1. 关闭防火墙服务 # systemctl disable firewalld # systemctl stop firewalld 2. 安装etcd以及kubernetes软件 yum i ...