JS Bin使用bootstrap及Jquery
Posted 小海哥的号
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS Bin使用bootstrap及Jquery相关的知识，希望对你有一定的参考价值。
版权声明
本文首发自微信公共帐号：
小海哥的号（here_xulh）
无需授权即可转载，甚至无需保留以上版权声明
Bootstrap应用，下载并引用（方法一）
Bootstrap应用，在线引用第三方包（方法二）
三个必要引入文件
html文件结构解读
<!--html文件声明-->
<!DOCTYPE html>
<html>
<head>
<!--编码字符声明-->
<meta charset="utf-8">
<!--浏览器兼容声明-->
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<!--跨屏自适应声明-->
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<h1>Bootstrp</h1>
<a href="#">小海哥非常帅</a>
<a href="#" class="btn btn-default">小海哥非常帅</a>
</body>
</html>
jsbin AJAX
先准备AJAX 相应代码片段
需要保存代码片段
保存代码片段
* 再次重新打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
'
'
$.ajax({
//url: 'https://jsbin.com/hemawu/3/edit?js',
url: 'https://jsbin.com/hemawu/3.js',
dataType: 'json',
success: function(data) {
alert(data.author + ' - ' + data.bookname);
}
});
进行测试
运行js
bootstrap自适应容器设置
<!DOCTYPE html>
<html>
<head>
<!--编码字符声明-->
<meta charset="utf-8">
<!--浏览器兼容声明-->
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<!--跨屏自适应声明-->
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<h1>Bootstrp</h1>
<a href="#">小海哥非常帅</a>
<a href="#" class="btn btn-default">小海哥非常帅</a>
<div class="container">
<div class="row">
<div class="col-md-6" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
<div class="col-md-6" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
</div>
</div>
<div style="border:1px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
</body>
</html>
自适应
<!DOCTYPE html>
<html>
<head>
<!--编码字符声明-->
<meta charset="utf-8">
<!--浏览器兼容声明-->
<meta http-equiv="X-UA-Compatiable" content="IE=edge">
<!--跨屏自适应声明-->
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<h1>Bootstrp</h1>
<a href="#">小海哥非常帅</a>
<a href="#" class="btn btn-default">小海哥非常帅</a>
<div class="container">
<div class="row">
<div class="col-md-6" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
<div class="col-md-6" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-12" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-12" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
<div class="col-lg-2 col-md-4 col-sm-12" style="border:2px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
</div>
<div style="border:1px solid #000">
<p>In the future, everyone will be famous for 15 minutes. I'm bored with that line. I never use it anymore. My new line is 'In 15 minutes everyone will be famous.'Don't pay any attention to what they write about you. Just measure it in inches.</p>
</div>
</body>
</html>
===================（完）===================
ID：herexu
以磨砂纸的方式在打磨桌椅多年始终造不出桌椅后，再以不要脸的姿态开启007不写就出局之路。
小海哥，五年的JAVA开发，一年的产品经理，前湖人的伪球迷，现勇士的伪球迷，篮球嘴炮党。
这里除了脸，啥都有。
可以在微信后台回复“不要脸”可以与我互动
以上是关于JS Bin使用bootstrap及Jquery的主要内容，如果未能解决你的问题，请参考以下文章