<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
DropDown Menu
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<div class="btn-group-lg btn-group" role="group">
<div class="btn btn-default" type="button">A</div>
<button class="btn btn-default" type="button">middle</button>
<button class="btn btn-default" type="button">right</button>
<div class="btn-group" role="group">
</div>
<!-- <a></a> element-->
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="#" class="btn btn-default" role="button">Left</a>
<a href="#" class="btn btn-default" role="button">Middle</a>
<a href="#" class="btn btn-default" role="button">Right</a>
</div>
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<a href="" class="btn btn-default" role="button">Left</a>
<a href="" class="btn btn-danger" role="button">Middle</a>
<a href="" class="btn btn-default" role="button">Right</a>
</div>
<!-- button element-->
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<!-- button dropdowns markup changes like btn-info btn-success -->
<div class="component-title"><h2>Dropdown buttons markup</h2></div>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle btn-info" type="button" data-toggle="dropdown">
Action
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header" role="presentation">Dropdown header</li>
<li><a href="#">Action 1</a></li>
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">disable link</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li class="divider"></li>
<li><a href="#">Action 4</a></li>
</ul>
</div>
<!-- stylish and splitted button-->
<div class="btn-group">
<button type="button" class="btn btn-success btn-lg">Action</button>
<button class="btn dropdown-toggle btn-success btn-lg" type="button" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header" role="presentation">Dropdown header</li>
<li><a href="#">Action 1</a></li>
<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">disable link</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li class="divider"></li>
<li><a href="#">Action 4</a></li>
</ul>
</div>
<!--dropup menu-->
<div class="btn-group dropup">
<button type="button" class="btn btn-info">Dropup</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li role="menuitem"><a href="#">Action 1</a></li>
<li role="menuitem"><a href="#">Action 2</a></li>
<li role="menuitem"><a href="#">Action 3</a></li>
<li role="menuitem"><a href="#">Action 4</a></li>
</ul>
</div>
<br/>
<!--input group-->
<div class="component-title"><h2>Inputgroup</h2></div>
<div class="input-group">
<span class="input-group-addon">@</span>
<input placeholder="username" class="form-control" type="text"/>
</div>
<br>
<div class="input-group myInput" style="width: 300px">
<input class="form-control" type="text" width="200px"/>
<span class="input-group-addon">.00</span>
</div>
<!--Navigation bar-->
<div class="component-title">
<h2>Navigation bar</h2>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="containter-fluid">
<div class="navbar-header">
<button type="button" data-toggle="collapse" class="navbar-toggle collapsed"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <!--for horizontal line-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<!--Collect the nav links, forms and other content for toggling-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li class="dropdown">
<div class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<span class="caret"></span>
</div>
<ul class="dropdown-menu"role="menu">
<li class="a" href="#">Action</li>
<li class="a" href="#">Action</li>
<li class="a" href="#">Action</li>
<li class="a" href="#">Action</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
bootstrap基础代码实践
需积分: 32 65 浏览量
2015-07-03
21:44:10
上传
评论
收藏 426KB RAR 举报
bootstrap_test.rar （35个子文件） 
bootstrap_test 
index.html 12KB bootstrap_theme.html 3KB images 
lesson.png 17KB listype-icon.png 2KB list-view.html 3KB js 
jquery-ui.min.js 234KB npm.js 484B jquery-1.11.1.min.js 94KB bootstrap.js 66KB jquery-ui.js 458KB bootstrap.min.js 35KB app.js 85B .idea bootstrap_test.iml 292B misc.xml 132B workspace.xml 30KB .name 14B encodings.xml 171B modules.xml 291B scopes scope_settings.xml 143B vcs.xml 173B test_style.css 2KB fonts glyphicons-halflings-regular.ttf 40KB glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 61KB glyphicons-halflings-regular.woff 23KB css bootstrap-theme.css.map 42KB bootstrap.min.css 111KB bootstrap-theme.min.css 19KB bootstrap-theme.css 22KB bootstrap.css.map 358KB bootstrap.css 134KB tooltip.js 3KB tooltip-jquery.js 4KB style.css 1KB test.html 3KB资源评论
loconomo_018
- 粉丝: 0
- 资源: 1
最新资源
- 高等数学第一章第二节数列的极限
- Python 版冒泡排序算法源代码
- tensorflow-gpu-2.7.2-cp38-cp38-manylinux2010-x86-64.whl
- tensorflow-2.7.3-cp39-cp39-manylinux2010-x86-64.whl
- tensorflow-2.7.2-cp39-cp39-manylinux2010-x86-64.whl
- Python版本快速排序源代码
- Python 语言版的快速排序算法实现
- 450815388207377安卓_base.apk
- 超微主板 X9DRE-TF+ bios 支持 nvme启动
- 基于Python通过下载气象数据和插值拟合离散数据曲线实现对寒潮过程的能量分析
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
