-
bootstrap案例
2018-03-02 10:02:47bootstrap案例. -
Bootstrap案例
2016-06-03 11:05:08各种按钮、各种开关、固定导航、按钮... -
bootstrap案例demo
2016-07-27 23:50:23bootstrap案例demo -
多平台bootstrap案例展示模板
2021-04-02 16:30:53多平台bootstrap案例展示模板 -
bootstrap案例35个常用案例
2015-01-15 10:46:40收集了35个实用的bootstrap案例，轮播，表单设计等 -
bootstrap案例小demo
2016-07-28 02:26:15bootstrap案例小demo,可以运行的前端代码 -
4.3 BootStrap案例实战
2019-05-22 17:22:131.3 BootStrap案例实战 关于BootStrap的文档详见： https://v3.bootcss.com/展开全文
-
Bootstrap案例控件整理手册中的源码写成方便查询的案例
2015-07-08 19:26:24Bootstrap案例控件整理手册中的源码，写成方便查询的案例，由Quicknine根据java1234中的bootstrap视频教程整理出来带索引目录的，bootstrap使用案例手册，源码为jsp的，现在已经全部转为html，不需要服务器环境即可... -
BootStrap案例.zip
2020-03-31 22:26:52鄙人花了一个月的时间才完成了这个网站，这个网站采用HTML、CSS、JavaScript、jQuery、以及BootStrap框架技术完成的，由于我是采用了BootStrap框架技术所以该网站能适应一切设备下不同分辨率的屏幕下进行浏览，由于... -
bootstrap案例练习-仿星巴克
2020-10-11 10:31:24我在学习bootstrap响应式开发的一个练习案例，用到了bootstrap的栅格系统和轮播组件、card组件、button组件 导航栏组件 image工具 -
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2020-09-02 02:30:27主要为大家分享了一个精彩的Bootstrap案例，涉及到了选项卡、栅格布局，关键重点在注释，感兴趣的小伙伴们可以参考一下 -
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
2017-05-19 15:19:14bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位。 -
bootstrap案例 inter官网首页
2017-05-25 18:11:06初学bootstrap时一个很好不错的demo， -
bootstrap案例代码
2018-12-09 13:03:46<link href="../css/bootstrap.css" rel="stylesheet"> <!-- 引入jQuery核心js文件 --> <script src="../js/jquery-1.11.3.min.js"></script> <!-- 引入BootStrap核心js文件 --> <script src="../js/...展开全文<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口的宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>商城首页</title> <!-- 引入Bootstrap核心样式文件 --> <link href="../css/bootstrap.css" rel="stylesheet"> <!-- 引入jQuery核心js文件 --> <script src="../js/jquery-1.11.3.min.js"></script> <!-- 引入BootStrap核心js文件 --> <script src="../js/bootstrap.min.js"></script> </head> <body> <!--logo部分--> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-6"> <img src="../img/logo2.png" /> </div> <div class="col-lg-5 col-md-4 hidden-xs col-sm-6"> <img src="../img/header.png" /> </div> <div class="col-lg-3 col-md-4 col-sm-12" style="padding-top: 15px;"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> </div> <!--导航栏--> <div class="container" style="margin-top: 10px;"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首页</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">手机数码 <span class="sr-only">(current)</span></a> </li> <li> <a href="#">家用电器</a> </li> <li> <a href="#">鞋靴箱包</a> </li> <li> <a href="#">电脑办公</a> </li> <li> <a href="#">孕婴保健</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">所有分类 <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="#">手机数码</a> </li> <li> <a href="#">家用电器</a> </li> <li> <a href="#">鞋靴箱包</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">电脑办公</a> </li> <li role="separator" class="divider"></li> <li> <a href="#">孕婴保健</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </nav> </div> <!--轮播图--> <div class="container"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="../img/1.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/2.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/3.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <!--热门商品--> <div class="container" style="margin-top: 10px;"> <!--上面文字内容--> <div class="row"> <span id="" style="font-size: 30px;padding-left: 33px;"> 热门商品 <img src="../img/title2.jpg" /> </span> </div> <!--图片内容--> <div class="row"> <div class="col-md-2 col-sm-2 hidden-sm hidden-xs" style="height: 400px;"> <img src="../img/big01.jpg" height="100%"/> </div> <div class="col-md-10 col-sm-10" style="padding-left: 10px;"> <div class="row"> <div class="col-md-6 hidden-xs hidden-sm" style="height: 200px;width: 490px;"> <a href="#"><img src="../img/middle01.jpg" height="100%" width="100%"/></a> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> </div> <div class="row"> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> </div> </div> </div> </div> <!--广告图片--> <div class="container" style="margin-top: 10px;"> <div class="row"> <div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;"> <img src="../img/ad.jpg" style="width: 98%;"/> </div> </div> </div> <!--最新商品--> <div class="container" style="margin-top: 10px;"> <!--上面文字内容--> <div class="row"> <span id="" style="font-size: 30px;padding-left: 33px;"> 最新商品 <img src="../img/title2.jpg" /> </span> </div> <!--图片内容--> <div class="row"> <div class="col-md-2 col-sm-2 hidden-sm hidden-xs" style="height: 400px;"> <img src="../img/big01.jpg" height="100%"/> </div> <div class="col-md-10 col-sm-10" style="padding-left: 10px;"> <div class="row"> <div class="col-md-6 img-responsive" style="height: 200px;width: 490px;"> <a href="#"><img src="../img/middle01.jpg" height="100%" width="100%"/></a> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> </div> <div class="row"> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> <div class="col-md-2 col-sm-4 col-xs-6" align="center"> <a href="#"><img src="../img/small03.jpg" /></a> <p><a href="#"><font color="gray">电炖锅</font></a></p> <p><font color="red">¥399</font></p> </div> </div> </div> </div> </div> <!--广告图片--> <div class="container" style="margin-top: 10px;"> <div class="row"> <div class="hidden-md hidden-sm hidden-xs " style="padding-left: 14px;"> <img src="../img/footer.jpg" style="width: 98%;"/> </div> </div> </div> </body> </html>
-
BootStrap案例-旅游网首页.zip
2019-08-09 16:30:19利用BootStrap框架编写的简单旅游网页，里面有轮播图，导航栏的实现，还有BootStrap的栅格系统的运用，效果图可以去看我博客，大家可以放心下载哈，没积分下载也可以私聊我哟！ -
bootstrap案例解析
2018-04-20 22:29:25一、由于案例比较长我们先简单分析首页中header 部分的制做情况。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"&...展开全文一、由于案例比较长我们先简单分析首页中header 部分的制做情况。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
二、下面表示用最新的的浏览器解析网站代码，为了保证网站解析效果的完整性
<meta http-equiv="X-UA-Compatible" content="IE=edge">
三、下面是浏览器视口的声明，initial-scale代表着初始化缩放为1是代表着不缩放的意思,为了保证1:1提供最佳的效果体验，user-scalabel是用户可缩放的属性设置no
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>传智播客 - 安全的互联网微金融资产交易平台</title>
四、对于JS中的某些样式能放在后面的要放在后面，让用户更加快捷的浏览到网页的内容，把DOM树更快的加载完成。提供网页的解析速度。对于网页的样式的CSS文件需要放在header部分。jQuery文件放在body中是可以的。最好不要放在</html>后。
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
五、下面是条件注释，满足条件会执行的操作。前者为了让浏览器兼容Ｈ５ 后者为了兼容ＣＳＳ中的媒体查询功能
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
六、下面重点说bootstrap是怎么使用的问题了。我们可到中文bootstrap官网查看。有源码版本可以更改自己喜欢的样式。下载用于生产环境的版本。可以引入到网页中使用。开发项目使用的是压缩版，使用的是bootstrap.css 关于主题的版本暂时不用。
bootstrap怎么用，有时候我们看着就蒙了，其实没有什么，就是在源码中我们需要简单浏览，他的样式的设置。他就是一个帮我们定义了我们开发中常用功能的模块的集合。我们需要关注它定义了那些类，需要使用直接复制粘贴代码，引入到我们的网页代码中就可以。
七、bootstrap定义的板块分类
１.全局ＣＳＳ样式：表格 表单 按钮 图片 栅格系统
２.组件 字体图标 下拉菜单 按钮组 导航 分页 标签
３.ＪＳ组件 下拉菜单 按钮 轮播图（ carousel) Collapse(手风琴效果）
注意的是：关于屏幕大小的
.container最大宽度None （自动） 750px 970px 1170px 类前缀 .col-xs-.col-sm-.col-md-.col-lg-col是样式前缀是column栏目的意思 后面是 xs sm md lg规定了在不同的屏幕条件下使用的是不同的样式。
</head>
<body>
<!-- 头部区域 -->
<header id="header">
<!-- <div class="topbar hidden-sm hidden-xs"> -->
<div class="topbar visible-md visible-lg">
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<a href="#" class="mobile-link">
<i class="icon-mobilephone"></i>
<span>手机微金所</span>
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="img/c_06.jpg" height="136" width="120" alt="扫一扫">
</a>
</div>
<div class="col-md-5 text-center">
<i class="icon-telephone"></i>
<span>4006-89-4006（服务时间：9:00-21:00）</span>
</div>
<div class="col-md-2 text-center">
<a href="#">常见问题</a>
<a href="#">财富登录</a>
</div>
<div class="col-md-3 text-center">
<a href="#" class="btn btn-itcast btn-sm">免费注册</a>
<a href="#" class="btn btn-link btn-sm">登录</a>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-itcast navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav_list" aria-expanded="false">
<span class="sr-only">切换菜单</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<i class="icon-icon"></i>
<i class="icon-logo"></i>
</a>
</div>
<div id="nav_list" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">我要投资</a></li>
<li><a href="#">我要借款</a></li>
<li><a href="#">平台介绍</a></li>
<li><a href="#">新手专区</a></li>
<li><a href="#">最新动态</a></li>
<li><a href="#">微论坛</a></li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-sm">
<li><a href="#">个人中心</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- /头部区域 -->
<!-- 广告轮播 -->
<section id="main_ad"></section>
<!-- /广告轮播 -->
<!-- 特色介绍 -->
<section></section>
<!-- /特色介绍 -->
<!-- 立即预约 -->
<section></section>
<!-- /立即预约 -->
<!-- 产品推荐 -->
<section></section>
<!-- /产品推荐 -->
<!-- 新闻列表 -->
<section></section>
<!-- /新闻列表 -->
<!-- 合作伙伴 -->
<section></section>
<!-- /合作伙伴 -->
<!-- 脚注区域 -->
<footer></footer>
<!-- /脚注区域 -->
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>
</html>栅格系统
-
Git-Bootstrap-Project:Scio Bootcamp上的Git和Bootstrap案例家庭作业项目-源码
2021-04-11 17:21:06Git＆Bootstrap家庭作业 引导程序类规范 用Bootstrap制作一个普通HTML网站 至少包含7个组件 显示3页内容 必须包括以下组件： 模态 牌 纽扣 将自己的样式表应用于组件（颜色，位置等），SASS变量至少4个不同组成部分... -
《响应式布局》——响应式布局介绍和版心、BootStrap、使用BootStrap步骤、BootStrap入门基础、BootStrap...
2020-10-30 16:27:22文章目录响应式布局一、介绍和版心二、BootStrap使用bootstrap做轮播图案例完整代码效果图总结 响应式布局 一、介绍和版心 前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。 档位划分: 媒体...展开全文响应式布局
一、介绍和版心
前面已经简单接触过。响应式布局就是代码随着屏幕大小的改变显示不同。
档位划分:
- 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位
- w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围）
- 768<= w <992 小屏设备（sm）（平板）
- 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
- 1200<=w 大宽屏设备（lg）（大桌面显示器）
语法：把市场上所有屏幕包括在内；
/* 1. 超小屏幕下 xs 小于 768 */ @media screen and (min-width: 0px) { } /* 2. 小屏幕下 sm 大于等于768 */ @media screen and (min-width: 768px) { } /* 3. 中等屏幕下 md 大于等于 992px */ @media screen and (min-width: 992px) { } /* 4. 大屏幕下 lg 大于等于1200 */ @media screen and (min-width: 1200px) { }版心
-
不同的档位下，版心不同；
-
档位设置：版心；
-
所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需求；
语法：
/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */ @media screen and (max-width: 767px) { .container { width: 100%; } } /* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */ @media screen and (min-width: 768px) { .container { width: 750px; } } /* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px */ @media screen and (min-width: 992px) { .container { width: 970px; } } /* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */ @media screen and (min-width: 1200px) { .container { width: 1170px; } }- 注意：
- 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px；
- 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px； 原因：两边留空白，用户体验好。
- 以上市场默认划分，可根据自己需求添加档位；
二、BootStrap
网址：
版本：
- 2.x.x：停止维护，代码不够简洁，功能不够完善。
- 3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、 移动设备优先的WEB 项目。
- 4.x.x：最新版，目前还不是很流行
超级常见和好用的一个响应式布局模板。
如何使用？
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BootStrap Template</title> <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css--> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--> <!--解决ie9以下浏览器对 css3 Media Query 的不识别 --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- 条件注释:解决小于IE9的版本一些问题 --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> </body> </html>特点就是栅格系统可以非常方便快速地搭建一个网站。
可以查看手册：bootstrap入门基础。
使用bootstrap制作轮播图： 模板
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>使用bootstrap做轮播图案例
- 先将bootstrap所需工具引入到项目中
- 使用bootstrap模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BootStrap Template</title> <!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css--> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题--> <!--解决ie9以下浏览器对 css3 Media Query 的不识别 --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!-- 条件注释:解决小于IE9的版本一些问题 --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>你好，世界！</h1> </body> </html> - 到官网上找轮播图代码，直接拷贝到html中
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
完整代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!--声明文档兼容模式，表示使用IE浏览器的最新模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--设置视口的宽度（值为设备的理想宽度）页面的初始缩放值<理想宽度/可见宽度> initial-scale=1比例值--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/1.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="img/2.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="img/3.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.js"></script> </body> </html>效果图
- 浏览器查看：最大页面
- 缩小页面：自适应
- 手机端显示
总结
bootstrap能够快速搭建一个前端网页，非常好用！尤其适合新手。
- 媒体查询：档位划分；市场上默认的划分；三个节点、四个档位
-
从优站精选上学习Bootstrap案例总结(一)
2019-04-07 15:36:21作为一个小白，实在找不到该从何处入手练项目，只有自己去Bootstrap官网找点好看的界面来练习练习。虽说Bootstrap是一个UI框架，但是我还是要自己去更改里面有些样式。在设计方面还是没有前辈们写的精简。从优站精选... -
Bootstrap案例中，登陆界面自适应
2018-06-20 14:34:00<link rel="stylesheet" href="AMstyle/stylesheets/bootstrap.css" type="text/css"> <script type="text/javascript" src="js/AMjs/jquery.min.js"></script> ...
收藏数
25,862
精华内容
10,344