Bootstrap，来自 Twitter，emmm听说是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它有自带的css样式，也可以在此基础上自己添加css。emmmm 这两天练习了一下，并没有感觉有多么的简单，噗~~~
1.bootstrp模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2.dropdown
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle = "dropdown">dropdown<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labrlledby="dropdownMenu1">
<li class="dropdown-header">Dropdown header</li>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
3.按钮组
<div class="btn-group">
<button class="btn btn-default">向左</button>
<button class="btn btn-danger">中间</button>
<button class="btn btn-default">向右</button>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<button class="btn btn-default">向左</button>
<button class="btn btn-danger">中间</button>
<button class="btn btn-default">向右</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button class="btn btn-default">向左</button>
<button class="btn btn-danger">中间</button>
<button class="btn btn-default">向右</button>
</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">
<button class="btn btn-default">向左</button>
<button class="btn btn-danger">中间</button>
<button class="btn btn-default">向右</button>
</div>
</div>
4、分裂式下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<br />
<br />
<br />
<div class="btn-group dropup">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
5.inputgroup
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username"/>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username"/>
<span class="input-group-addon">@</span>
</div>
<div class="input-group">
<span class="input-group-addon">email</span>
<input type="text" class="form-control" placeholder="Username"/>
<span class="input-group-addon">Sure</span>
</div>
6.表单
<form action="" method="post" role="form">
<div class="form-group">
<label for="username">用户名</label>
<input name="username" id="username" type="text" class="form-control"><br />
</div>
<div class="form-group">
<label for="password">密码</label>
<input name="password" id="password" class="form-control"><br />
</div>
<div class="btn-group">
<input type="submit" class="btn btn-success"/>
<input type="reset" class="btn btn-danger" />
</div>
</form>
7.垂直表单
<span>按钮一</span> <span>按钮二</span> <span>按钮三</span>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
8.横向表单
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
9.导航
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
<ul class="nav nav-pills" role="tablist">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
<ul class="nav nav-pills nav-stacked" role="tablist">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
<ul class="nav nav-pills nav-justified" role="tablist">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
10.导航条
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">
<img alt="Brand" src="img/01.png" />
</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
</div>
</nav>
11.控件
<form role="form" style="width: 400px;">
<input type="date" class="form-control" />
<input type="email" class="form-control" />
<input type="color" />
<input type="url" />
<input type="submit" />
</form>
<form>
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state" disabled="disabled">
<input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state" readonly="readonly">
</form>
12.栅格系统
<div class="container">
<div class="row">
<div class="bg-primary col-sm-2">A</div>
<div class="bg-success col-sm-2">B</div>
<div class="bg-info col-sm-2">C</div>
</div>
</div>
网友评论