bootstrap实例
<!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实例的更多相关文章
- Bootstrap 实例 - 模态框（Modal）插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap实例 之 响应式表格-----2017-05-15
Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机,现在就bootstrap的响应式举一个例子: 如上图所示,要实现该表格在手机等移动端上只显示代号.名称.和价格,其他以查看详情 ...
- 我的第一个bootstrap实例
先上代码: <!doctype html><html lang="en"><head> <meta charset="UTF-8 ...
- Bootstrap 标签的变体 实例样式
Bootstrap 标签样式,代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签的 ...
- Bootstrap两端对齐的导航实例
Bootstrap两端对齐的导航,样式剥离出来代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- bootstrap 仿实例
bootstrap实现一个网页 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta ...
- bootstrap简单使用实例
表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- Android studio 3.4.1 使用 bootstrap 中的组件实例
电脑环境: ubuntu18.04 + Android studio 3.4.1 + bootsrtap4 Android studio中板式设计主要使用的 XML 布局文件,而在bootstrap中 ...
随机推荐
- Apache伪静态(Rewrite).htaccess文件详解
Htaccess(超文本访问)是一个简单的配置文件,它允许设计师,开发者和程序员通过它来改变Apache Web服务器的配置.这些功能包括用户重定向.URL重写(url rewrite,国内很多称为伪 ...
- 一键配置网卡IP（win10）脚本
前两天有个小伙伴问我,如何快速配置IP,在公司在家里在宿舍,快速配置IP,然后我特别为这个小伙伴写了一个脚本. @echo off mode con: cols=60 lines=25 title 网 ...
- 【函数分享】每日PHP函数分享(2021-1-8)
explode() 使用一个字符串分割另一个字符串. array explode( string $delimiter , string $string [, int $limit ]) 参数描述de ...
- LeetCode222 判断是否为完全二叉树并求节点个数
给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最左边的若干位置.若最底 ...
- LeetCode662 二叉树最大宽度
给定一个二叉树,编写一个函数来获取这个树的最大宽度.树的宽度是所有层中的最大宽度.这个二叉树与满二叉树(full binary tree)结构相同,但一些节点为空. 每一层的宽度被定义为两个端点(该层 ...
- Redis 设计与实现 10：五大数据类型之有序集合
有序集合 sorted set (下面我们叫zset 吧) 有两种编码方式:压缩列表 ziplist 和跳表 skiplist. 编码一:ziplist zset 在 ziplist 中,成员(mem ...
- Java 基于 mysql-connector-java 编写一个 JDBC 工具类
用到的 jar 包 jar包地址: mysql-connector-java-5.1.47.jar junit-4.13.jar Maven: <!-- mysql驱动 --> <d ...
- C#中foreach的实现原理
C#中foreach的实现原理 在探讨foreach如何内部如何实现这个问题之前,我们需要理解两个C#里边的接口,IEnumerable 与 IEnumerator. 在C#里边的遍历集合时用到的相关 ...
- ctfshow—web—web2
打开靶机,根据提示是SQL注入 打开后看到登录窗口 方法一.手工注入 抓取数据包 开始SQL注入测试 利用万能密码,登录成功 查看回显位置 查询数据库 查询数据库内数据表 如果想整齐一点显示可以添加g ...
- kafka安装流程
本文是作者原创,版权归作者所有.若要转载,请注明出处. 安装前的环境准备 1.由于Kafka是用Scala语言开发的,运行在JVM上,在安装之前需要先安装JDK(省略) 2.kafka依赖zookee ...