Bootstrap介绍
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。
image.png
思路（我对Bootstrap的理解）
1）Bootstrap框架通过标签选择器（元素选择器）绑定样式相关的代码（比如：我们发现引入了Bootstrap后，界面上的链接是没有下划线的）
2）Bootstrap框架通过类选择器，id选择器，组合选择器（由基本选择器组成）绑定处理样式的css代码和js代码，我们可以给元素设置class和id，这样的话，处理样式的代码就能够对这些元素真正生效。
使用Bootstrap设计导航
1）引入Bootstrap框架
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
注意：先引入jQuery框架，再引入Bootstrap的js框架
2）设计html代码
<!--导航层-->
<div>
<!--菜单列表-->
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="javascript:void(0);">设为首页</a></li>
<li><a href="javascript:void(0);">手机新浪网</a></li>
<li><a href="javascript:void(0);">移动客户端</a></li>
</ul>
</div>
使用Bootstrap设计带图标的按钮
设计html代码
<div>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 向左对齐
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 赞
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> 赞
</button>
</div>
使用Bootstrap设计带徽章的列表
设计html代码
<div>
<ul class="list-group">
<li class="list-group-item"><a href="#">
<span class="badge" style="background-color: red">1</span> 第一名</a>
</li>
<li class="list-group-item">
<a href="#"><span class="badge" style="background-color: orange;">2</span> 第二名</a>
</li>
<li class="list-group-item"><a href="#">
<span class="badge" style="background-color: green;">3</span> 第三名</a>
</li>
<li class="list-group-item">
<a href="#"><span class="badge">4</span> 第四名</a>
</li>
<li class="list-group-item">
<a href="#"><span class="badge">5</span> 第五名</a>
</li>
</ul>
</div>
使用Bootstrap设计日期控件
引入bootstrap-datetimepicker框架
<link rel="stylesheet" type="text/css" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"/>
<script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
设计HTML代码
<div class="input-group date form_date col-md-3" data-date="" data-date-format="yyyy MM dd" data-link-field="birth" data-link-format="yyyy-mm-dd">
<input name="birth" class="form-control" type="text" value="" readonly>
<span class="input-group-addon">
<span class="glyphicon glyphicon-remove"></span>
</span>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
设计JS代码
<script type="text/javascript">
$(function(){
$('.form_date').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0,
});
$('.form_date').datetimepicker("setDate", new Date());
})
</script>
参考资料
[01] Bootstrap下载及使用
https://v3.bootcss.com/getting-started/
[02] Bootstrap组件
https://v3.bootcss.com/components/
[03] 导航
https://v3.bootcss.com/components/#nav
[04] Glyphicons 字体图标
https://v3.bootcss.com/components/#glyphicons
[05] Bootstrap徽章
https://v3.bootcss.com/components/#badges
[06] Bootstrap表单
https://www.jianshu.com/p/ffbc36965840
[07] 下载bootstrap-datetimepicker
https://github.com/smalot/bootstrap-datetimepicker
[08] Bootstrap日期和时间表单组件
https://www.bootcss.com/p/bootstrap-datetimepicker
[09] Bootstrap3 datetimepicker控件的使用
https://blog.csdn.net/u011127019/article/details/51725081
[10] bootstrap3使用bootstrap datetimepicker日期插件
https://www.jb51.net/article/114598.htm
[11] bootstrap-datetimepicker 初始值
https://blog.csdn.net/shenwb110/article/details/81386523
微信扫一扫关注该公众号【测试开发者部落】
image.png
点击链接加入群聊【软件测试学习交流群】
https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105
网友评论