<!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. 学生成绩管理系统： 统计成绩排序并打印（c++）（内含读取文件.txt及将文件输出excel的方法）

    实验要求:输入30个学生的学号.姓名和5门课程的成绩,计算总分并按照总分排出名次,最后按照学号顺序打印成绩单, 并把成绩单输出为excel文件. txt数据: 2015020981 甲 90 89 9 ...

  2. Docker学习笔记之查看Docker

    命令: 使用history命令查看镜像历史 使用cp命令复制容器中的文件到主机 使用commit命令把修改过的容器创建为镜像 使用diff命令检查容器文件的修改 使用inspect命令查看容器/镜像详 ...

  3. MySQL select join on 连表查询和自连接查询

    连表查询 JOIN ON 操作 描述 inner join 只返回匹配的值 right join 会从右表中返回所有的值, 即使左表中没有匹配 left join 会从左表中返回所有的值, 即使右表中 ...

  4. 发票校验BAPI_INCOMINGINVOICE_CREATE

    CALL FUNCTION 'BAPI_INCOMINGINVOICE_CREATE'    EXPORTING      headerdata                = headerdata ...

  5. 环境配置-Java-01-安装

    本文使用JDK1.8在windows64位系统下举例,其他版本在windows下的安装过程类似 0.百度云盘链接 考虑到官网下载需要登陆,这里给大家提供百度云盘链接(就是官网安装包),不过下载速度会比 ...

  6. 1.5V升压3V集成电路升压芯片

    干电池1.5V升压3V的升压芯片,适用于干电池升压产品输出3V供电 1.5V输入时,输出3V,电流可达500MA. PW5100是一款效率大.10uA低功耗 PW5100输入电压:0.7V-5V PW ...

  7. uni-app开发经验分享十九： uni-app对接微信小程序直播

    uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情>      记录这两个参数直播 ...

  8. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

  9. Elasticsearch从入门到放弃：浅谈算分

    今天来聊一个 Elasticsearch 的另一个关键概念--相关性算分.在查询 API 的结果中,我们经常会看到 _score 这个字段,它就是用来表示相关性算分的字段,而相关性就是描述一个文档和查 ...

  10. Caffeine 缓存库

    介绍 Caffeine是一个基于Java8开发的提供了近乎最佳命中率的高性能的缓存库. 缓存和ConcurrentMap有点相似,但还是有所区别.最根本的区别是ConcurrentMap将会持有所有加 ...