使用Bootstrap框架写的一个小实例

今天学习了一下Bootstrap框架，，写一个小实例练练手，感受一下bootstrap兼容三端的强大。

<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><style type="text/css">img{width:100%;}.my1{margin-top: 50px;height: 500px;overflow: hidden;}.my2 img{width: auto;}.my3{margin-top: 50px;}.my4{margin: 50px auto;}.my4 > hr{border: 1px solid antiquewhite;}</style></head><body><!-- 导航 --><nav class="navbar navbar-inverse navbar-fixed-top"><div class="container"><!-- 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><!-- Collect the nav links, forms, and other content for toggling --><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 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="#">Chrome</a></li><li><a href="#">Firefox</a></li><li><a href="#">Safari</a></li><li><a href="#">Opera</a></li><li><a href="#">IE</a></li></ul></li><li><a href="javascript:;" data-toggle="modal" data-target="#myModal">关于</a></li></ul><ul class="nav navbar-nav navbar-right"></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><!-- 轮播 --><div id="carousel-example-generic" class="carousel slide my1" data-ride="carousel" data-interval="2000"><!-- 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><li data-target="#carousel-example-generic" data-slide-to="3"></li><li data-target="#carousel-example-generic" data-slide-to="4"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="data:images/chrome-big.jpg" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="data:images/firefox-big.jpg" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="data:images/ie-big.jpg" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="data:images/opera-big.jpg" alt="..."><div class="carousel-caption"></div></div><div class="item"><img src="data:images/safari-big.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 class="container my3"><div class="row"><div class="col-md-4 my2 text-center"><img src="data:images/chrome-logo-small.jpg" alt="..."><div class="caption"><h3>chrome</h3><p>...</p><p><a href="#" class="btn btn-default" role="button">点我下载</a></p></div></div><div class="col-md-4 my2 text-center"><img src="data:images/firefox-logo-small.jpg" alt="..."><div class="caption"><h3>firefox</h3><p>...</p><p><a href="#" class="btn btn-default" role="button">点我下载</a></p></div></div><div class="col-md-4 my2 text-center" ><img src="data:images/safari-logo-small.jpg" alt="..."><div class="caption"><h3>safari</h3><p>...</p><p><a href="#" class="btn btn-default" role="button">点我下载</a></p></div></div></div></div><!-- 线 --><div class="container my4"><hr ></div><!-- 标签页 --><div class="container"><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#chrome" aria-controls="chrome" role="tab" data-toggle="tab">chrome</a></li><li role="presentation"><a href="#firefox" aria-controls="firefox" role="tab" data-toggle="tab">firefox</a></li><li role="presentation"><a href="#ie" aria-controls="ie" role="tab" data-toggle="tab">ie</a></li><li role="presentation"><a href="#opera" aria-controls="opera" role="tab" data-toggle="tab">opera</a></li><li role="presentation"><a href="#safari" aria-controls="safari" role="tab" data-toggle="tab">safari</a></li></ul><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="chrome"><div class="container-fluid"><div class="row"><div class="col-md-7"><h3>chrome你懂的</h3></div><div class="col-md-5"><img src="data:images/chrome-logo.jpg" ></div></div></div></div><div role="tabpanel" class="tab-pane" id="firefox"><div class="container-fluid"><div class="row"><div class="col-md-7"><h3>firefox你懂的</h3></div><div class="col-md-5"><img src="data:images/firefox-logo.jpg" ></div></div></div></div><div role="tabpanel" class="tab-pane" id="ie"><div class="container-fluid"><div class="row"><div class="col-md-7"><h3>ie你懂的</h3></div><div class="col-md-5"><img src="data:images/ie-logo.jpg" ></div></div></div></div><div role="tabpanel" class="tab-pane" id="opera"><div class="container-fluid"><div class="row"><div class="col-md-7"><h3>opera你懂的</h3></div><div class="col-md-5"><img src="data:images/opera-logo.jpg" ></div></div></div></div><div role="tabpanel" class="tab-pane" id="safari"><div class="container-fluid"><div class="row"><div class="col-md-7"><h3>safari你懂的</h3></div><div class="col-md-5"><img src="data:images/safari-logo.jpg" ></div></div></div></div></div></div><!-- 版权  --><div class="container">&copy;玉面大蛟龙</div><!-- 模态框 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script><!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script></body>
</html>

虽然有两三百行代码，但是写起来也就二十分钟的事情，不得不说bootstrap真是又方便又强大！

看一下界面效果吧~~~~

设计得不咋好看，主要目的还是练习一下bootstrap的使用。

一个导航条，下面是一个轮播图，导航条是始终保持在顶部的。

下面是一个栅格，里面的文字就偷懒没写了~~~

整体看上去是这样：

再下面是一个标签页，做得也比较简洁

还有一些小功能，例如点击按钮会出现下拉框、模态框什么的，这里就不多记录了。

总之，以往纯CSS需要花费几天几夜的项目，使用bootstrap十几分钟就完成了。

学无止境，我们一直在路上。

使用Bootstrap框架写的一个小实例相关推荐

html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例
class(类)和id的一个小实例在上一节中我们了解了如何为特定的标签定义样式,例如我们利用 "h1{font-size: 12px;}"将页面内所有的标题1的字体大小改为了12 ...
Jmeter Web 性能测试入门 (四)：一个小实例带你学会 Jmeter 脚本编写
测试场景: 模拟并发100个user,在TesterHome 站内搜索VV00CC 添加线程组添加HTTP信息头管理器添加HTTP Sampler 填写HTTP Sampler中的信息添加监听器 ...
西门子行贿门情报列表，我自己写的一个小软件自动搜集到的。
西门子行贿门消息列表我自己写的一个小软件自动搜集到的. 其他类型情报也能自动收集. · 编号:1 西门子在华行贿案或涉及权力部门_中华财经 http://invest.8bio.com/ ...
一个小实例——借书Demo
一个小实例--借书Demo Step 1 布局文件 Step 2 初始化控件 Step 3 初始化数据第一步创建数据model 第二步初始化数据 Step 4 添加监听器实现基本功能 Step ...
本地修改远端 SAP UI5 框架文件的一个小技巧
这是 Jerry 2021 年的第 64 篇文章,也是汪子熙公众号总共第 341 篇原创文章. Jerry 的前一篇文章纪念特洛伊英雄 Sinon - SAP UI5 Mock Server 使用步 ...
熬夜写了一个小游戏，向SpaceX聊表敬意
2019独角兽企业重金招聘Python工程师标准>>> 这是我长久放在桌面上的一张图片. 这张照片的名字叫做 Pale Blue Dot(暗淡蓝点),是旅行者1号在距地球64亿公里回 ...
杜邦接口还有一个跟他相反的叫什么_C++｜一个小实例理解STL六大部件
STL主要包含容器(containers).迭代器(iterators).空间配置器(allocator).配接器(adapters,或叫适配器).算法(algorithms).仿函数(functor ...
aspose 转pdf表格大小乱了_自己写了一个小工具类：pdf转word，没有页数和大小限制，保真！...
昨天下午遇到一个问题,想把一个比较大的pdf转化为word,结果使用了各种工具都收费.想着干脆写一个小工具吧,一开始使用的python等等试了好几个网上的代码,结果全都失真.于是乎不得不花了一下午自己 ...
html病毒编写,用bat写的一个小病毒
用了三天才看完=.=,感觉作者整理整理可以把博客当书买了... 然后自己突发其想,想到了一个小病毒程序,其实也算不上病毒,只能算是个恶作剧程序吧,其原理就是不断打开cmd程序,占用系统资源...呵呵. ...

使用Bootstrap框架写的一个小实例

使用Bootstrap框架写的一个小实例相关推荐

最新文章

热门文章