bootstrap框架:常用内容一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
**代码IE=edge告诉IE使用最新的引擎渲染网页
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- 禁止用户缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Bootstrap 101 Template</title>
<style type="text/css">
</style>
<!-- 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ***导航条*** 务必使用 <nav> 元素，或者，如果使用的是通用的 <div> 元素的话，务必为导航条设置 role="navigation" 属性 添加 .navbar-fixed-top 类可以让导航条固定在顶部-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 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 class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
<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>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<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>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- .container 类用于固定宽度并支持响应式布局的容器。 -->
<div class="container">
<div class="row">
<!-- xs总是水平排列的,自适应宽度 -->
<div class="col-xs-8" style="background: pink;">你好，世界！</div>
<div class="col-xs-3" style="background: red;margin-left: 20px;">你好，中国！</div>
</div>
<div class="row">
<!-- 因为相对于md中等电脑屏幕来说,宽度大于970时才会堆叠 -->
<div class="col-md-3" style="background: yellow;">第一块</div>
<div class="col-md-3" style="background: green;">第二块</div>
<div class="col-md-3" style="background: gray;">第三块
<div class="row">
<div class="col-md-4" style="background: tan;">内嵌第一个</div>
<div class="col-md-4" style="background: orange;">内嵌第二个</div>
</div>
</div>
<!-- 可同时设置两个类来控制不同屏幕下的布局,并且用offset进行右偏移 -->
<div class="col-md-3 col-xs-6 col-md-offset-2" style="background: blue;">第四块</div>
</div>
</div>
<!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6" style="background: pink;">你好，世界！</div>
<div class="col-xs-6" style="background: red;">你好，中国！</div>
</div>
</div>
<!-- Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。 -->
<h1>你好，世界！<small>副标题</small></h1>
<a href="###">你好，世界！</a>
<p>
<!-- 通过添加 .lead 类可以让段落突出显示 ,mark 加颜色底色突出,del 删除文本(加中间线),u 下划线 ,small 小号字体, em 斜体, 设置 .text-right 等类是文档对齐, .text-uppercase 字母大写, .text-capitalize 首字母大写-->
<div class="lead">兰亭序 作者：王羲之</div>
<mark>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。</mark>群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅，仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，<u>信可乐也。</u>
<del>夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；</del>或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，曾不知老之将至。及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀。况修短随化，终期于尽。<small>古人云：“死生亦大矣。”岂不痛哉！</small>
<em>每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。</em>固知一死生为虚诞，齐彭殇为妄作。 <blockquote>
<!-- 这个可以再文档前面加一道杠 -->
<p>悲夫！故列叙时人</p>
</blockquote>后之视今，亦犹今之视昔。悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。<p class="text-right">后之览者，亦将有感于斯文。</p>
<p class="text-uppercase">hello-world!</p>
<p class="text-capitalize">hello-world!</p>
<!-- 通过给dl添加 .dl-horizental 类来是描述水平排列 -->
<dl class="dl-horizontal">
<dt>你好</dt><dd>一种打招呼的方式</dd>
<dt>谢谢</dt><dd>表示感谢的意思</dd>
</dl>
<!-- 带有基本样式的***表格*** -->
<div class="container">
<table class="table table-hover">
<caption>这是一个表格</caption>
<tr>
<th>#</th>
<td class="active">姓名</td>
<td>年龄</td>
<td>爱好</td>
</tr>
<tr>
<th>1</th>
<td>小明</td>
<td>58</td>
<td>下棋</td>
</tr>
<tr>
<th>2</th>
<td>小红</td>
<td>79</td>
<td>跳舞</td>
</tr>
</table>
</div>
<!-- ***表单操作*** -->
<form>
<!-- 将控件包裹在 .form-group 中可以获得最好的排列 -->
<!-- 用label可进行方便选取 强烈建议为所有输入框添加 label 标签!!!!-->
<!-- 想要获取水平的表单,需用一个类名为.form-horizental 的div将表单包裹起来 -->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" style="width: 200px;">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" style="width: 200px;">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!-- 内联表单 .form-inline 注意一定下添加label标签 -->
<!-- Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。 -->
<form class="form-inline">
<!-- 在输入框里设置图标:设置相应的 .has-feedback 类并添加正确的图标即可 -->
<div class="form-group has-feedback">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="name" style="width: 300px;color: red;">
<!-- 在输入框右边添加一个搜索图标 -->
<span class="glyphicon glyphicon-search form-control-feedback" style="color: red;"></span>
</div>
<div class="form-group has-error">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
<!-- 通过在**文本输入框** <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 类，可以给 .form-control 的前面或后面添加额外的元素。 -->
<div class="input-group" style="width: 300px;">
<span class="input-group-addon">请填写</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<!-- 单选框与多选框 默认外观是堆叠样式 设置.checkbox-inline或.radio-inline可使水平排列-->
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<!-- 设置disabled 使其不可选择 -->
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
</p>
<!-- 下拉列表 -->
<select class="form-control" style="width: 200px;">
<option>请选择</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!-- ***下拉菜单*** -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
欢迎选择
<!-- 这是表示有下拉的箭头 -->
<span class="caret"></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>
<!-- 把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了 -->
<!-- 给按钮设置大小,在button标签内设置 btn-lg,sm,xs,md -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></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>
<!-- 分裂式按钮下拉菜单 -->
<!-- 给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。-->
<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>
<!-- **按钮类** -->
<!-- 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。 -->
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<button type="button" class="btn btn-primary btn-sm">（首选项）Primary</button>
<!-- 使用active类可以使按钮处在已经被按下的状态 -->
<button type="button" class="btn btn-success active">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- 使用.disabled类可是按钮处于禁止状态 -->
<button type="button" class="btn btn-danger disabled">（危险）Danger<span class="glyphicon glyphicon-star" aria-hidden="true"></span></button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<!-- 关闭按钮 -->
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
