Bootstrap入门（了解）

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>&nbsp;第一名</a>
        </li>
        <li class="list-group-item">
            <a href="#"><span class="badge" style="background-color: orange;">2</span>&nbsp;第二名</a>
        </li>
        <li class="list-group-item"><a href="#">
            <span class="badge" style="background-color: green;">3</span>&nbsp;第三名</a>
        </li>
        <li class="list-group-item">
            <a href="#"><span class="badge">4</span>&nbsp;第四名</a>
        </li>   
        <li class="list-group-item">
            <a href="#"><span class="badge">5</span>&nbsp;第五名</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