Boostrap(4)
1.按钮
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>用户</a>
</body>
</html>
2.按钮群组
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="btn-group">
<button class="btn btn-default" type="button">左对齐</button>
<button class="btn btn-default" type="button">居中</button>
<button class="btn btn-default" type="button">右对齐</button>
</div>
</div>
</body>
</html>
3.带下拉菜单的按钮
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">按钮<small>带有下拉的按钮</small></h1>
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >字体<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">黑体</a></li>
<li><a href="#">黑体</a></li>
<li><a href="#">黑体</a></li>>
</ul>
</div>
</div>
</body>
</html>
4.导航
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">导航</h1>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
</div>
</body>
</html>
5.导航菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>start</title>
<link href="../CSS/bootstrap.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">出驾</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">链接1</a></li>
<li ><a href="#">链接2</a></li>
<li class="dropdown">
<a href="#" type="button" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li><a href="#">选项3</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">链接3</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
<li class="divider"></li>
<li><a href="#">选项3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Boostrap(4)的更多相关文章
- Boostrap入门(一)
1.第一步:下载Boostrap有关文件 Boostrap中文网:http://www.bootcss.com/ -->--> 2.第二步: 如下代码:引入相关文件即可. <!DOC ...
- Boostrap
基本认知: Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面. Bootstrap的优缺点: 缺点: 1. ...
- 【转】Validate + Boostrap tooltip 表单验证示例
一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0 jquery.validate.min.j ...
- 用H5+Boostrap做简单的音乐播放器
前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做完这个Demo也算是暂告一段落,接下来是j ...
- vue.js+boostrap最佳实践
一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
- 我发现调用boostrap的弹框
在引用了boostrap.js和boostrap.css之后 本来boostrap是基于jQuery的.但是我们的项目里没有用jQuery,而是用的zepto. 调用boostrap的弹框有两种方式: ...
- Boostrap栅格系统
Boostrap排版.链接样式设置了基本的全局样式.分别是:为body元素设置 布局容器:Bootstrap需要为页面内容和栅格系统包裹一个:container容器.Bootstrap提供了两个作此用 ...
- boostrap中lg,md,sm,xs
boostrap中lg,md,sm,xs分别表示多少px? .col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示 ...
- AngularJS Boostrap Pagination Sample
首先,样式是这样的 首先,Service端是Webapi REST JSON格式 第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里 ...
- H5+Boostrap的音乐播放器
H5+Boostrap做简单的音乐播放器 前言:这个是综合一下我最近在学的东西做的小Demo,到实际使用还有距离,但是用来练手巩固知识点还是不错的,最近在二刷JS书和Boostrap.css的源码,做 ...
随机推荐
- hdu 4856 Tunnels （记忆化搜索）
Tunnels Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- （转）c++类的成员函数存储方式（是否属于类的对象）---一道面试题引发的思考
昨天去面试一家公司,面试题中有一个题,自己没弄清楚,先记录如下: class D { public: void printA() { cout<<"printA"< ...
- nopcommerce商城系统--如何编写一个插件
原址:http://www.nopcommerce.com/docs/77/how-to-write-a-nopcommerce-plugin.aspx plug-in (或 plugin)是一个为更 ...
- nopcommerce3.3简洁版
从nopcommerce里面分离出了基础框架,包括了用户.新闻.单页面.投票等模块,可以作为快速开发asp.net mvc项目的方案,有兴趣的朋友可以下载看看,由于时间仓促可能会有一些多余的文件没有清 ...
- Oracle 数据库优化-分析现有的sql
在做数据库sql优化时,首先要对现有的数据库sql进行优化,主要包括以下几种: 1.数据库正在执行的SQL是? 2.已经执行过得SQL是? 3.最耗时的的前几条SQL是? 4.最耗IO的SQL是? 5 ...
- UVA-10828 (概率期望+高斯消元)
题意: 给个有向图,每个节点等概率转移到它的后继节点,现在问一些节点的期望访问次数; 思路: 对于一个点v,Ev=Ea/d[a]+Eb/d[b]+Ec/d[c];a,b,c是v的前驱节点; 然后按这个 ...
- string 类的实现
. #include<iostream> . #include<iomanip> . using namespace std; . . class String{ . frie ...
- Unity 跑酷Demo难题总结
问题1:路面拼接处理 在拼接路的时候,如果两个路挨的太近就会出现贴图闪烁,如下所示 解决办法 如果把路改小就会出现断层,但不会出现贴图闪烁 PS:我是把贴图放在Cube上的,所以路是有厚度. 附注 刚 ...
- 027医疗项目-模块二：药品目录的导入导出-导入功能的Action的编写
前一篇文章我们写了Service层,这篇文章我们写一下Action层. 实现的功能: 1:我们先下载模板:然后按照模板里面的规则,插入数据.比如存在d盘. 2:然后浏览找到那个文件,上传上去. 然后把 ...
- git详细教程
Table of Contents 1 Git详细教程 1.1 Git简介 1.1.1 Git是何方神圣? 1.1.2 重要的术语 1.1.3 索引 1.2 Git安装 1.3 Git配置 1.3.1 ...