Bootstrap简介

1Bootstrap概要

Bootstrap，源自 Twitter，是现阶段很畅销的后端架构。Bootstrap 是如前所述 HTML、CSS、JavaScript 的，它简约灵巧，使 Web 合作开发更为快捷。

2官方中文网站镜像

http://www.bootcss.com/

3Bootstrap包涵的模块

Bootstrap中包涵了多样的Web模块，依照那些模块，能加速的构筑两个很漂亮、机能完整的中文网站。当中主要包括下列模块:

输入框、按键组、按键输入框、导航系统、导航系统条、方向导航系统、巨集、排印、纯文字、相片Exi、unlock、新闻媒体第一类等

4Bootstrap同时实现相片Exi

<!DOCTYPE html><html><head> <title>相片Exi</title> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1”> <!– 文件引入 –> <link rel=“stylesheet” href=“https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css”> <script src=“https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js”></script> <script src=“https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js”></script> <script src=“https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js”></script> <style> /* 样式设置 */ .carousel-inner

{

width: 1300px

;

height: 800px

;

}

.carousel-inner img

{

width: 100%

;

height: 100%

;

}

</style></head><body><div id=“demo” class=“carousel slide” data-ride=“carousel”> <!– 指示符 –> <ul class=“carousel-indicators”> <li data-target=“#demo” data-slide-to=“0” class=“active”></li> <li data-target=“#demo” data-slide-to=“1”></li> <li data-target=“#demo” data-slide-to=“2”></li> <li data-target=“#demo” data-slide-to=“3”></li> </ul> <!– Exi相片 –> <div class=“carousel-inner”> <div class=“carousel-item active”> <img src=“../images/1.jpg”> <div class=“carousel-caption”> <h3>1</h3> <p>Java资源社区!</p> </div> </div> <div class=“carousel-item”> <img src=“../images/2.jpg”> <div class=“carousel-caption”> <h3>2</h3> <p>Java资源社区!</p> </div> </div> <div class=“carousel-item”> <img src=“../images/3.jpg”> <div class=“carousel-caption”> <h3>3</h3> <p>Java资源社区!</p> </div> </div> <div class=“carousel-item”> <img src=“../images/4.jpg”> <div class=“carousel-caption”> <h3>4</h3> <p>Java资源社区!</p> </div> </div> </div> <!– 左右切换按键 –> <a class=“carousel-control-prev” href=“#demo” data-slide=“prev”> <span class=“carousel-control-prev-icon”></span> </a> <a class=“carousel-control-next” href=“#demo” data-slide=“next”> <span class=“carousel-control-next-icon”></span> </a></div></body></html>

5效果展示

Bootstrap简介