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多线程面试
1.说说进程.线程.协程之间的区别 简而言之,进程是程序运行和资源分配的基本单位,一个程序至少有一个进程,一个进程至少有一个线程.进程在执行过程中拥有独立的内存单元,而多个线程共享内存资源,减少切换次 ...
- CentOS7 安装配置 MySQL 5.7
1. 下载 yum 源文件 mysql80-community-release-el7-2.noarch.rpm https://dev.mysql.com/downloads/repo/yum/ 2 ...
- button JS篇ant Design of react
这篇看ant Desgin of react的button按钮的js代码,js代码部分是typescript+react写的. button组件里面引用了哪些组件: import * as React ...
- Appium 客户端类库
Appium 支持以下语言的客户端类库: 语言 Ruby Python Java JavaScript PHP C# Objective-C 锁定注意,一些方法类似 endTestCoverage() ...
- How do I copy files that need root access with scp
server - How do I copy files that need root access with scp? - Ask Ubuntuhttps://askubuntu.com/quest ...
- Scrapy：腾讯招聘整站数据爬取
项目地址:https://hr.tencent.com/ 步骤一.分析网站结构和待爬取内容 以下省略一万字 步骤二.上代码(不能略了) 1.配置items.py import scrapy class ...
- this.$router.push、replace、go的区别
1.this.$router.push() 描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面. 用法: 2.this.$router.replace() ...
- “纽劢科技杯”第十六届同济大学程序设计竞赛暨上海邀请赛同步赛 J-张老师的游戏
传送门 题目描述 在空闲时间,张老师习惯性地和菜哭武玩起了取石子游戏,这次的游戏规则有些不同,在他们面前有n堆石子,其中,第i堆石子的个数为a[i],现在制定规则如下: 从张老师开始, ...
- let 和 const 在for 循环中的使用
在ES6 的规范中,多了两个声明变量的关键字: let 和const.初次学习的时候,只记住了 let 声明的变量只在for 的循环体中有效,循环结束后 变量就消失了, 同时const 也可以在for ...
- 初学tensorflow遇到的Error——UnrecognizedFlagError: Unknown command line flag 'f'
最近在学习<tensorflow实战>时需要下载cifar10数据集,在cifar10目录下用到命令: import cifar10,cifar10_inputcifar10.maybe_ ...