<!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基础代码实践
共35个文件
js:9个
xml:6个
css:6个
需积分: 32 26 下载量 57 浏览量
2015-07-03
21:44:10
上传
评论
收藏 426KB RAR 举报
温馨提示
bootstrap基础代码实践源代码。bootstrap是web前端自适应布局非常常用的框架
资源推荐
资源详情
资源评论
收起资源包目录
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
共 35 条
- 1
资源评论
loconomo_018
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功