<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>bootstrap组件</title>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="jquery-3.2.1.js"></script>

    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

</head>

<style>

    .glyphicon-asterisk{

    color: green;

    font-size: 100px;

    }

</style>

<body>

    <span class="glyphicon glyphicon-asterisk"></span>

<!-- 字体图标 -->

    <button class="btn btn-default">

        <span class="glyphicon glyphicon-thumbs-up"></span>

        这是一个按钮

    </button>

<!-- 下拉菜单 -->

    <div class="dropdown">

        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">这是按钮

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu">

            <li>

                <a href="http://www.baidu.com">

                    百度

                </a>

            </li>

            <li>

                    <a href="http://www.baidu.com">

                        百度

                    </a>

                </li>

                <li>

                        <a href="http://www.baidu.com">

                            百度

                        </a>

                    </li>

        </ul>

    </div>

<!-- 控件组 -->

    <div class="input-group">

        <span class="input-group-addon">$</span>

        <input type="text" class="form-control">

    </div>

<!-- 导航 -->

<ul class="nav nav-tabs">

    <li class="active"><a href="http://www.baidu.com">百度</a></li>

    <li><a href="http://www.baidu.com">百度</a></li>

    <li><a href="http://www.baidu.com">百度</a></li>

</ul>

<ul class="nav nav-pills">

        <li class="active"><a href="http://www.baidu.com">百度</a></li>

        <li><a href="http://www.baidu.com">百度</a></li>

        <li><a href="http://www.baidu.com">百度</a></li>

</ul>

<ul class="nav nav-pills nav-stacked">

        <li class="active"><a href="http://www.baidu.com">百度</a></li>

        <li><a href="http://www.baidu.com">百度</a></li>

        <li><a href="http://www.baidu.com">百度</a></li>

    </ul>

<!-- 分页 -->

<nav>

    <ul class="pager">

        <li class="previous">

                <a href="http://www.baidu.com">向左</a>

        </li>

        <li class="next">

                <a href="http://www.baidu.com">向右</a>

        </li>

    </ul>

    <ul class="pagination pagination-lg">

        <li>

                <a href="http://www.baidu.com">1</a>

        </li> 

        <li>

                <a href="http://www.baidu.com">2</a>

        </li>

        <li>

                <a href="http://www.baidu.com">3</a>

        </li>

        <li>

                <a href="http://www.baidu.com">4</a>

        </li>

        <li>

                <a href="http://www.baidu.com">5</a>

        </li>

    </ul>

</nav>

<!-- 进度条 -->

<div class="progress">

    <div class="progress-bar" style="width:60%">60%</div>

</div>

<div class="progress">

        <div class="progress-bar progress-bar-success" style="width:60%">60%</div>

    </div>

<div class="progress">

            <div class="progress-bar progress-bar-warning" style="width:60%">60%</div>

</div>

<div class="progress">

        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:60%">60%</div>

 </div>

  <!-- 列表 -->

 <ul class="list-group">

     <li class="list-group-item active">

         这是一个列表

         <span class="badge">14</span>

     </li>

     <li class="list-group-item disabled">

            这是一个列表

            <span class="badge">14</span>

        </li>

        <li class="list-group-item list-group-item-info">

                这是一个列表

                <span class="badge">14</span>

            </li>

 </ul>

<!-- 面板 -->

 <div class="panel panel-danger">

     <div class="panel-heading">弹出层！</div>

     <div class="panel-body">内容</div>

     <div class="panel-footer">脚注</div>

 </div>

 <!-- 弹窗 -->

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

 弹窗

 </button>

 <!-- <button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#danger">

这是测试按钮

 </button>

 <div id="danger">这是一个内容</div> -->

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span>$times;</span><span class="sr-only">关闭弹窗</span></button>

                <h4 class="modal-title" id="myModalLabel">标题</h4>

            </div>

            <div class="modal-body">

                学习

            </div>

            <div class="modal-footer">

                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                   <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>

            </div>

        </div>

    </div>

</div>

</body>

</html>

bootstrap实例的更多相关文章

  1. Bootstrap 实例 - 模态框（Modal）插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. bootstrap实例 之 响应式表格-----2017-05-15

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情 ...

  3. 我的第一个bootstrap实例

    先上代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8 ...

  4. Bootstrap 标签的变体 实例样式

    Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的 ...

  5. Bootstrap两端对齐的导航实例

    Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...

  6. bootstrap 仿实例

    bootstrap实现一个网页 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta ...

  7. bootstrap简单使用实例

    表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...

  8. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  9. Android studio 3.4.1 使用 bootstrap 中的组件实例

    电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中 ...

随机推荐

  1. python后端开发面试总结

    网络协议 通信计算机双方必须共同遵从的一组约定,只有遵守这个约定,计算机之间才能相互通信交流 TCP / IP TCP/IP(传输控制协议/网际协议)是指能够在多个不同网络间实现信息传输的协议簇.TC ...

  2. SpringCloud --服务调用Feign

    介绍 服务间通信简介 一个系统可以由不同的微服务构成,比如一个电商系统可以由订单服务.商品服务.用户服务等共同组成. 这些服务相互独立,但又相互依赖.由于它们相互依赖,所以需要通过通信的方式来进行相互 ...

  3. Java springboot支付宝小程序授权，获取用户信息，支付及回调

    参考官方文档https://opendocs.alipay.com/mini/introduce/pay 支付宝小程序的支付和微信小程序的支付一样第一步都是要获取到用户的唯一标识,在微信中我们获取到的 ...

  4. js的函数-function

    function函数 function的英文是[功能],[数] 函数:职责:盛大的集会的意思 在js里,就是函数的意思.在Java里叫做方法. 定义函数 function fun(参数){ //函数体 ...

  5. 根据业务摸索出的一个selenium代码模版（python）

    前言 总算入行上班几个月了,不得不说业务是真的不消停啊.. 本人工作上经常遇到一种场景:为甲方做自动化接口处理工具,登录需要短信验证码,, 嘛算是摸索出了一套selenium代码模板,主要解决如下痛点 ...

  6. mysql锁表问题

    查看当前所有的进程信息: show full processlist; 查看当前所有的事务 select * from information_schema.innodb_trx; 查看当前出现的锁 ...

  7. [Usaco2012 Dec]Running Away From the Barn

    题目描述 给出以1号点为根的一棵有根树,问每个点的子树中与它距离小于等于l的点有多少个. 输入格式 Line 1: 2 integers, N and L (1 <= N <= 200,0 ...

  8. 探索微软开源Python自动化神器Playwright

    相信玩过爬虫的朋友都知道selenium,一个自动化测试的神器工具.写个Python自动化脚本解放双手基本上是常规的操作了,爬虫爬不了的,就用自动化测试凑一凑. 虽然selenium有完备的文档,但也 ...

  9. 大数据系列1：一文初识Hdfs

    最近有位同事经常问一些Hadoop的东西,特别是Hdfs的一些细节,有些记得不清楚,所以趁机整理一波. 会按下面的大纲进行整理: 简单介绍Hdfs 简单介绍Hdfs读写流程 介绍Hdfs HA实现方式 ...

  10. SQL Server 邮箱告警配置

    目录 配置数据库邮件 * 手动启用数据库邮件功能 * 配置数据库邮件 * 测试数据库邮件 实现 JOB 任务运行状态的检测 * 定义操作员 * 新建死锁警报 * 设置 SQL Server 代理 创建 ...