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中 ...
随机推荐
- HarmonyOS分布式任务调度开发之--你必须知道的bundleName
背景 最近基于HarmonyOS在写一个通讯录的项目,已经完成了一个java版本的通讯录,通讯录数据全部存储在sqlite数据库中.现在在着手写一个JS版本的通讯录,这时候关于JS版本中数据的读取,我 ...
- 4.k8s存储之Volume、PV、PVC和StatefulSet
3.Volume 容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题.首先,当容器崩溃时,kubelet 会重启它,但是容器中的文件将丢失--容器以干净的状态(镜像最初的 ...
- 容器编排系统K8s之APIService资源
前文我们聊到了k8s上crd资源的使用和相关说明,回顾请参考:https://www.cnblogs.com/qiuhom-1874/p/14267400.html:今天我们来了解下k8s的第二种扩展 ...
- python基础学习总结
python管理cisco设备:http://www.linuxeye.com/program/1680.html 学习:https://www.liaoxuefeng.com/wiki/001431 ...
- hugo建站 | 我的第一个博客网站
前言 博客地址 - https://billie52707.cn 1. 建博客的初衷? 2020那一年,八月的第一天,我还是像往常一样打开我的域名网站,本以为还是会像以前一样显示每日一图的界面,结果出 ...
- 【IMP】IMP导入表的时候，如果表存在怎么办
在imp导入的时候,如果表存在的话,会追加数据在表中, 所以如果不想追加在表中的话,需要将想导入的表truncate掉后,在imp SQL: truncate table TEST1; imp tes ...
- Github Python计算器开源项目 二次开发--增加函数图形
先上原项目链接:https://github.com/xhf79/Calculator_pyqt python+Qt 开发的计算器 原项目界面和功能如图所示: 科学计算的内容基本都有,但按照项目的提示 ...
- oracle RAC和RACOneNode之间的转换
Convert RAC TO RACOneNode 1.查看资源状态 [grid@rac01 ~]$ crsctl status res -t 从这里看到,数据库的名字叫racdb 2.查看实例 [o ...
- [Ceoi2004]Journey
题目描述 给出N个点,及你的出发点K. 接下来N-1行描述有关边的开始点,结束点,边长.保证图中不会有环 接下来给出数字J,代表你要走多少个点. 接下来J个数字,代表你要走过的点的编号.当然你可以自己 ...
- ROS教程（二）：创建工作空间（图文）
ros教程:创建工作空间 目录 前言 一.工作空间? 二.创建一个工作空间 1.创建目录 2.编译 前言 使用catkin创建一个工作空间 一.工作空间? 在ROS系统下,我们所有的项目都放在一个工作 ...