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/ ...
随机推荐
- CSAPP：第十一章 网络编程
CSAPP:第十一章 网络编程 11.1 客户端服务器模型11.2 全球IP因特网11.3 套接字接口 11.1 客户端服务器模型 每个网络应用都是基于客户端-服务器模型.采用这个模型,一个应用是 ...
- LinkedList类 和ArrayList类
1)LinkedList类 LinkedList实现了List接口,允许null元素.此外LinkedList提供额外的get,remove,insert方法在 LinkedList的首部或尾部.这 ...
- mysql容灾备份脚本
一,环境需求 **安装前准备 操作系统环境:Centos 7.2 [root@localhost soft]# rpm -qa | grep mariadb [root@localhost soft] ...
- 详解Tomcat的连接数和线程池
转: https://www.cnblogs.com/kismetv/p/7806063.html#t11 前言 在使用tomcat时,经常会遇到连接数.线程数之类的配置问题,要真正理解这些概念,必须 ...
- 爬虫基础(五)-----scrapy框架简介
---------------------------------------------------摆脱穷人思维 <五> :拓展自己的视野,适当做一些眼前''无用''的事情,防止进入只关 ...
- vue填坑指南之模板的使用
坑提示:"The template root requires exactly one element" Src下面有个App.vue文件,在index里引用了这个文件以后,我在. ...
- 【算法】shortest distance
好不容易找到的. #include<iostream> #include<iomanip> #include<cmath> using namespace std; ...
- Django的ORM那些相关操作
一般操作 看专业的官网文档,做专业的程序员! 必知必会13条 <> all(): 查询所有结果 <> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 & ...
- SpringBoot+Redis整合
SpringBoot+Redis整合 1.在pom.xml添加Redis依赖 <!--整合Redis--> <dependency> <groupId>org.sp ...
- JS继承以及继承的几种实现方式总结
传统面向对象语言:继承是类与类之间的关系. 而在js中由于es6之前没有类的概念,所以继承是对象与对象之间的关系. 在js中,继承就是指使一个对象有权去访问另一个对象的能力. 比如:比如对象a能够访问 ...