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/ ...
随机推荐
- Java中数组和集合的foreach操作编译后究竟是啥
今天和同事在关于foreach编译后是for循环还是迭代器有了不同意见,特做了个Demo,了解一下. 是啥自己来看吧! public class Demo { public static void m ...
- F2 - Spanning Tree with One Fixed Degree - 并查集+DFS
这道题还是非常有意思的,题意很简单,就是给定一个图,和图上的双向边,要求1号节点的度(连接边的条数)等于K,求这棵树的生成树. 我们首先要解决,如何让1号节点的度时为k的呢???而且求的是生成树,意思 ...
- 心智与认知(1): 反馈循环(Feedback loop)
目录: ** 0x01 反馈循环(Feedback loop) | How to see System in everyday life ** 0x02 如何像视频游戏一样剖析你的人生?| 打怪升级这 ...
- MySQL函数--（1）
/*函数与存储过程的区别1.存储过程:可以有0个返回值,可以有多个返回值函数:有且仅有一个返回值*/ #创建语法create FUNCTION 函数名(参数列表) return 返回类型BEGIN函数 ...
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
- 简单了解python使用正则表达式
正则[Regular Expression]:正则表达式通常被用来检索.替换那些符合某个模式(规则)的文本. 正则是用来干啥的:正则就是用来匹配字符串的. Python中string的几个方法: fi ...
- C#中声明、调用和配置事件的演示源码
下面的内容是关于C#中声明.调用和配置事件的演示的内容,应该能对大伙有些好处. using System;namespace MyCollections { using System.Collecti ...
- 基于Python清除破损图片需求实现
处理同事爬取的图片时,其因爬取过程中因图片类型/网络等问题,获取到较大批次破损图片,现需清除破损文件,并做简要记录. 要点: 在python中,可以使⽤imghdr模块中的what()⽅法判断图⽚⽂件 ...
- LOJ2083 [NOI2016] 优秀的拆分 【哈希】【调和级数】
题目分析: 好题!我们发现题目实际是要求出从某个左端点开始跑出去的BB型有多少个和从某个右端点开始跑出去的AA型有多少个. 发现这个问题是对称的,所以只考虑从左端点跑出去的BB型有多少个就可以了. 我 ...
- CSS3基础入门03
CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...