通过composer.json放在根目录，然后通过输入命令行：composer require twbs/bootstrap，自动安装到了vendor/twbs/bootstrap。
或者通过git安装复制这个文件package.json放在根目录，然后命令行，路径自己注意。
<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width,initial-scale=1">
<head>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h4 class="text-center">col-md-8,中间：xs超小（手机），sm小（平板），md中等（电脑）,lg大（屏幕）</h4>
<p>都是总合12，如果多了，则第二排排列</p>
<div class="container">
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">同时在手机和电脑满足配置</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 lead"><del><ins>下划线</ins>着重显示,被删除</del></div>
<div class="col-md-4 col-md-offset-4">向右偏移4格</div>
</div>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"row"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-xs-12 col-md-8"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">small</span>></span>小文字<span class="hljs-tag"></<span class="hljs-title">small</span>></span>
<span class="hljs-tag"><<span class="hljs-title">strong</span>></span>加重<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>
<span class="hljs-tag"><<span class="hljs-title">em</span>></span>斜体<span class="hljs-tag"></<span class="hljs-title">em</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"col-xs-6 col-md-4"</span>></span>.col-xs-6 .col-md-4<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">ol</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>table - table table-bordered（有序排列<span class="hljs-tag"><<span class="hljs-title">kbd</span>></span>ctrl<span class="hljs-tag"></<span class="hljs-title">kbd</span>></span>）<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>input - form-control（见下面）<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"><<span class="hljs-title">li</span>></span>苹果<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
<span class="hljs-tag"></<span class="hljs-title">ol</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-group"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">label</span> <span class="hljs-attribute">for</span>=<span class="hljs-value">"exampleInputPassword1"</span>></span>Password输入框<span class="hljs-tag"></<span class="hljs-title">label</span>></span>
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"password"</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"exampleInputPassword1"</span> <span class="hljs-attribute">placeholder</span>=<span class="hljs-value">"Password"</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">textarea</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"form-control"</span> <span class="hljs-attribute">rows</span>=<span class="hljs-value">"3"</span>></span><span class="hljs-tag"></<span class="hljs-title">textarea</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dl</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dt</span>></span>标题1（如果加dl-horizontal属性就会横排，如果超出加这个...text-overflow:ellipsis）<span class="hljs-tag"></<span class="hljs-title">dt</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dd</span>></span>叙述叙述<span class="hljs-tag"></<span class="hljs-title">dd</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dt</span>></span>标题2<span class="hljs-tag"></<span class="hljs-title">dt</span>></span>
<span class="hljs-tag"><<span class="hljs-title">dd</span>></span>叙述叙述<span class="hljs-tag"></<span class="hljs-title">dd</span>></span>
<span class="hljs-tag"></<span class="hljs-title">dl</span>></span>
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>在属性后头跟个!important这个就权重加重<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
</body>
</html>
swiper
<html>
<head>
<title>swiper测试</title>
<link rel="stylesheet" href="C:\Users\Administrator\Desktop\ceshi\11\dist\css\swiper.min.css">
<script src="http://www.danji6.com/style/style2016/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-container"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-wrapper"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://www.danji6.com/uploadfile/yxdownimg/39/thumb_80_80_awtwui51pps.png"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://www.danji6.com/uploadfile/yxdownimg/47/thumb_80_80_n4zdb1whpwb.jpg"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://www.danji6.com/uploadfile/2016/0806/thumb_80_80_20160806104608986.png"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-slide"</span>></span><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://www.danji6.com/uploadfile/2017/0317/20170317103219463.jpg"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 如果需要分页器 --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-pagination"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 如果需要导航按钮 --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-button-prev"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-button-next"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-comment"><!-- 如果需要滚动条 --></span>
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"swiper-scrollbar"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"C:\Users\Administrator\Desktop\ceshi\11\dist\js\swiper.min.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
$(document).ready(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {<!-- --></span>
<span class="hljs-keyword">var</span> mySwiper = <span class="hljs-keyword">new</span> Swiper (<span class="hljs-string">'.swiper-container'</span>, {
direction: <span class="hljs-string">'vertical'</span>,
loop: <span class="hljs-literal">true</span>,
<span class="hljs-comment">// 如果需要分页器</span>
pagination: {
el: <span class="hljs-string">'.swiper-pagination'</span>,
},
<span class="hljs-comment">// 如果需要前进后退按钮</span>
navigation: {
nextEl: <span class="hljs-string">'.swiper-button-next'</span>,
prevEl: <span class="hljs-string">'.swiper-button-prev'</span>,
},
<span class="hljs-comment">// 如果需要滚动条</span>
scrollbar: {
el: <span class="hljs-string">'.swiper-scrollbar'</span>,
},
})
})
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
</html>