bootstrap初试
通过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>
<div class="row">
<div class="col-xs-12 col-md-8">
<small>小文字</small>
<strong>加重</strong>
<em>斜体</em>
</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<ol>
<li>table - table table-bordered（有序排列<kbd>ctrl</kbd>）</li>
<li>input - form-control（见下面）</li>
<li>苹果</li>
</ol>
<div class="form-group">
<label for="exampleInputPassword1">Password输入框</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<textarea class="form-control" rows="3"></textarea>
<dl>
<dt>标题1（如果加dl-horizontal属性就会横排，如果超出加这个...text-overflow:ellipsis）</dt>
<dd>叙述叙述</dd>
<dt>标题2</dt>
<dd>叙述叙述</dd>
</dl>
<p>在属性后头跟个!important这个就权重加重</p>
</div>
</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>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://www.danji6.com/uploadfile/yxdownimg/39/thumb_80_80_awtwui51pps.png"></div>
<div class="swiper-slide"><img src="http://www.danji6.com/uploadfile/yxdownimg/47/thumb_80_80_n4zdb1whpwb.jpg"></div>
<div class="swiper-slide"><img src="http://www.danji6.com/uploadfile/2016/0806/thumb_80_80_20160806104608986.png"></div>
<div class="swiper-slide"><img src="http://www.danji6.com/uploadfile/2017/0317/20170317103219463.jpg"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script src="C:\Users\Administrator\Desktop\ceshi\11\dist\js\swiper.min.js"></script>
<script>
$(document).ready(function () {
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
</script>
</body>
</html>本文作者：蜗牛使劲冲
本文链接：https://www.cnblogs.com/warrenwt/p/18074691
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南