bootstrap
1.什么是bootstrap？javascript
Bootstrap 是一个用于快速开发 Web 应用程序和网站的开源的UI前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。css
2.为何要用bootstraphtml
容易上手：只要您具有 HTML 和 CSS 的基础知识，您就能够开始学习 Bootstrap。 Copy+Edit前端
响应式设计：Bootstrap 的响应式 CSS 可以自适应于台式机、平板电脑和手机。java
它为开发人员建立接口提供了一个简洁统一的解决方案。jquery
· 它包含了功能强大的内置组件，易于定制。bootstrap
· 它还提供了基于 Web 的定制。浏览器
· 它是开源的。前端框架
开源免费app
兼容性好
容易上手
支持响应式
3.什么是响应式设计
响应式设计：一套代码可以适应多种终端（PC，平板，手机等），也就是该代码在多种设备上良好的显示。不要要的内容被隐藏。
特色：访问该类型的网站时，改变浏览器的宽度，看他是否有滚动条。
优缺点：
优势：开发成本低
缺点：耗流量，用户体验很差
小公司使用
手机网站：专门为移动端开发一套代码，为PC又开发一套代码。百度，京东，淘宝等
PC百度.html 移动端.html;
优缺点：
优势：省流量，用户体验好
缺点：开发成本高
大公司使用
4.基础配置
首先创建html
head配置以下：
5.栅格系统
<body> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> ----------------------------------------- <!--流式布局容器--> <div class="container-fluid"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> ========================================= <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-1">xxxx</div> <div class="col-xs-6 col-md-2">ooooo</div> <div class="col-xs-6 col-md-3">vvvvvv</div> <div class="col-xs-6 col-md-6">,jjjjj</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div> yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy <div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4 clear the XS cols if their content doesn't match in height clear the XS cols if their content doesn't match in height clear the XS cols if their content doesn't match in height</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>
6.表单
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置编码-->
<meta charset="utf-8">
<!--兼容IE-->
<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 核心css样式 -->
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- jquery-->
<script src="static/jquery-2.1.3.min.js"></script>
<!--bootstrap 核心包-->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.myCss2{
border: 1px dashed indigo;
}
.myCss{
border: 1px dashed red;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
<td>价格</td>
</tr>
<tr>
<td>1</td>
<td>ks</td>
<td>j</td>
<td>215</td>
</tr>
<tr>
<td>2</td>
<td>开车</td>
<td>到车</td>
<td>666</td>
</tr>
</table>
-----------条纹--------------------------------
<table class="table table-striped">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
<td>价格</td>
</tr>
<tr>
<td>1</td>
<td>ks</td>
<td>j</td>
<td>215</td>
</tr>
<tr>
<td>2</td>
<td>开车</td>
<td>到车</td>
<td>666</td>
</tr>
</table>
-----------带边框的表格--------------------------------
<table class="table table-bordered">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
<td>价格</td>
</tr>
<tr>
<td>1</td>
<td>ks</td>
<td>j</td>
<td>215</td>
</tr>
<tr>
<td>2</td>
<td>开车</td>
<td>到车</td>
<td>666</td>
</tr>
</table>
-----------鼠标悬停的表格--------------------------------
<table class="table table-hover">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
<td>价格</td>
</tr>
<tr>
<td>1</td>
<td>ks</td>
<td>j</td>
<td>215</td>
</tr>
<tr>
<td>2</td>
<td>开车</td>
<td>到车</td>
<td>666</td>
</tr>
</table>
----------------紧缩表格-----------------
<table class="table table-condensed">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
<td>价格</td>
</tr>
<tr>
<td>1</td>
<td>ks</td>
<td>j</td>
<td>215</td>
</tr>
<tr>
<td>2</td>
<td>开车</td>
<td>到车</td>
<td>666</td>
</tr>
</table>
====================================
<table class="table table-hover">
<!-- On rows -->
--------------------
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
<tr>
<td class="active">ooo</td>
<td class="success">ooo</td>
<td class="warning">ooo</td>
<td class="danger">ooo</td>
<td class="info">ooo</td>
</tr>
<tr>
<td class="active">xxx</td>
<td class="success">xxx</td>
<td class="warning">xxx</td>
<td class="danger">xxx</td>
<td class="info">xxx</td>
</tr>
</table>
======================================
<div class="table-responsive">
<table class="table">
<tr>
<td>编号</td>
<td>开始车站</td>
<td>到达车站</td>
<td>价格</td>
</tr>
<tr>
<td>1</td>
<td>ks</td>
<td>j</td>
<td>215</td>
</tr>
<tr>
<td>2</td>
<td>开车</td>
<td>到车</td>
<td>666</td>
</tr>
</table>
</div>
</body>
</html>
7.滚动播放
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置编码-->
<meta charset="utf-8">
<!--兼容IE-->
<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 核心css样式 -->
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- jquery-->
<script src="static/jquery-2.1.3.min.js"></script>
<!--bootstrap 核心包-->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.myCarousel{
border: 1px dashed red;
height: 100px;
width: auto;
}
</style>
</head>
<body>
<!--<div class="container myCarousel">
.......tttt
</div>-->
<!--<div class="myCarousel" >
</div>-->
<div class="container myCarousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 原点部分-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides 图片部分 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="static/image/lb1.jpg" alt="兔兔" >
<div class="carousel-caption">
图片1
</div>
</div>
<div class="item">
<img src="static/image/lb2.jpg" >
<div class="carousel-caption">
图片2
</div>
</div>
<div class="item">
<img src="static/image/lb3.jpg" >
<div class="carousel-caption">
图片3
</div>
</div>
<div class="item">
<img src="static/image/lb4.jpg" >
<div class="carousel-caption">
图片4
</div>
</div>
</div>
<!-- Controls 左右按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3000,
pause:null
})
</script>
</html>
7.死神效果展现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--设置编码-->
<meta charset="utf-8">
<!--兼容IE-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 适应设备-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其余内容都*必须*跟随其后！ -->
<title>死神</title>
<!-- Bootstrap 核心css样式 -->
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- jquery-->
<script src="static/jquery-2.1.3.min.js"></script>
<!--bootstrap 核心包-->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<!-- <style type="text/css">
.myCarousel{
border: 1px dashed red;
height: 100px;
width: auto;
}
</style>-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="container-fluid">
<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="#">死神</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="#info">简介 <span class="sr-only">(current)</span></a></li>
<a class="navbar-brand" href="#role">人物</a>
<a class="navbar-brand" href="#">其余</a>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登陆</a></li>
<li><a href="#">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<!--滚动播放-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" >
<div class="item active">
<img src="static/image/总览.jpg" class="img-responsive img-circle" width="100%" height="auto" disabled="block"/>
<div class="carousel-caption">
图1
</div>
</div>
<div class="item">
<img src="static/image/十番队队长.jpg" class="img-responsive img-circle"/>
<div class="carousel-caption">
图2
</div>
</div>
<div class="item">
<img src="static/image/最强总队长.jpg" class="img-responsive img-circle"/>
<div class="carousel-caption">
图3
</div>
</div>
<div class="item">
<img src="static/image/虚化黑崎.jpg"class="img-responsive img-circle" width="100%" height="auto" disabled="block" />
<div class="carousel-caption">
图4
</div>
</div>
<div class="item">
<img src="static/image/十番副队.jpg"class="img-responsive img-circle"/>
<div class="carousel-caption">
图5
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--简介-->
<a id="info"></a>
<div class="container">
<!-- 标题-->
<div class="page-header">
<h1 class="page-header-customer">简介<small>改编自fresh果果同名小说</small></h1>
</div>
<!--内容-->
<div class="well">
<p>死神 </p>
<P> 故事的主角黑崎一护，15岁，头发颜色桔色，瞳孔颜色棕色，职业：学生，特技是：能看见幽灵。
故事从两我的的相遇开始……</p>
<p>被露琪亚追捕的虚袭击了一护的家人，( 顺带一提，这一家人都能看见灵，除了一个死硬派的妹妹），露琪亚也身受重伤，为了挚爱的家人，一护将斩魂刀插进本身的胸口，获得了露琪亚的力量，终将虚消灭。</p>
<p>露琪亚由于力量被一护夺走，暂时只能用义骇而呆在人间，而且要求一护在这段时间内成为代理死神，怕麻烦的一护固然拒绝掉了。
虚又出现，露琪亚强行将一护的灵魂推离肉体，却又让一护不要救那个小孩。</p>
<p> 露琪亚：就算你如今救那孩子，若是你没有自觉本身是个死神那还不是同样！由于在你面前受到攻击才就他？你别太天真了。死神必须对全部灵魂一概平等才行！只由于在本身视线范围，可以达到的范围才救他，这只不过是顾本身方便！不要用半调子的心情救他！若是你之后要去救他…那就要觉悟连其余全部的灵也要拯救！不论是哪里都要赶去，就算是牺牲性命也在所不惜。
一护：我才无论什么觉悟不觉悟，应为我想救他，因此我就要救他，……当时你不是自告奋勇救了我吗……既然是自告奋勇，那会想那么多啊！
一番话和眼前的危机境况终于让一护有了作死神的自觉。</p>
</div>
<!--角色介绍-->
<a id="role"></a>
<div class="container">
<div class="page-header">
<h1>角色介绍</h1>
</div>
<!-- 黑崎一护-->
<div class="alert alert-success">
<div class="row">
<div class="col-lg-3">
<img src="static/image/黑崎一护.jpg" class="img-thumbnail">
</div>
<div class="col-lg-4">
<h3>黑崎一护</h3>
<P> 黑崎一护（ Kurosaki Ichigo）是日本动漫《死神》中的男主角，是灭却师与死神结合生下的后代，体内同时拥有死神、灭却师以及虚的多种力量。</p>
<p>在家人遭到虚的袭击时，为了救下家人，从死神朽木露琪亚那里获得了死神之力，从而开启了死神代理的工做。</p>
<p>后来分别在尸魂界篇和虚圈篇拯救同伴于险境，并战胜了想要破坏尸魂界安定的蓝染惣右介，被瀞灵廷授予“尸魂界的英雄”的称呼。战胜蓝染后，一护失去了死神之力，后在完现术篇中从朽木露琪亚那里再次得到。</p>
<p> 在千年血战篇中一护觉醒了本身真正的斩魂刀，靠着同伴们的帮助最终战胜了最强敌人友哈巴赫，解救了尸魂界、现世与虚圈。大决战约十年后，黑崎一护与井上织姬婚后育有一子，名叫黑崎一勇。</p>
</div>
</div>
</div>
<!--花千骨-->
<div class="alert alert-warning" >
<div class="row">
<div class="col-lg-9">
<h3>朽木露琪亚 </h3>
<p>原属尸魂界护廷十三队的十三番队、被分派往空座町执行任务的死神，在追捕“虚”期间赶上黑崎一护，被虚所伤，因而将大半力量传给了一护，后来取得“义骸”，在空座町继续生活了近两个月，和一护四处面对虚、解放游魂，直至被护廷十三队通缉逮捕、带回尸魂界。此事原由正是露琪亚将死神的力量非法传给了人类，露琪亚获尸魂界最高司法组织——中央四十六室判处以死刑。</p>
</div>
<div class="col-lg-3">
<img src="static/image/朽木露琪亚.jpg" class="img-responsive img-circle"/>
</div>
</div>
</div>
<div class="alert alert-danger" role="alert">
<div class="row">
<div class="col-lg-3">
<img src="static/image/十番队队长.jpg" class="img-responsive img-rounded"/>
</div>
<div class="col-lg-9">
<h3>日番谷冬狮郎（十番队队长） </h3>
<p>历史上最年轻成为队长的天才少年，银发，碧绿双眼，身材矮小。西流魂街一地区“润林安”出身，擅长踢足球。与西门的守卫兕丹坊是朋友，并教他“都会准则”。日番谷为人冷静，同时也具备优秀的观察力，最先察觉护廷十三队内部异常的迹象，后来便独自展开调查。而跟护廷队里其余疯疯的死神们比起来，他算是“比较有常识的正常人”。平日喜欢别人叫他“日番谷队长”，讨厌别人直呼其名。与五番队副队长雏森桃是两小无猜的好朋友，幼年时雏森桃总呼他“小白或小狮郎”。进入真央灵术院学习并掌握始解后，雏森桃终以真名称呼他。在瀞灵廷的队长副队长中，除了草鹿八千流以外身高是最低的，所以如何让本身长高是他最烦恼的事情之一，如今正奉行“祖母说多睡觉的孩子会长高”的教诲，总会尽早完成工做而后回队舍睡觉。对于别人常常将他当成小学生一事很反感。
日番谷常被除了祖母和雏森桃以外的人说他“就像冰同样”而敬而远之。另外，他也在还没有成为死神甚至尚未进入术院的那时，就已经听到的冰轮丸的呼唤，天才之说可见一斑。常常被雏森桃规劝进入死神学院，但每每嗤之以鼻，并一再强调不准其再称乎他为小白/小狮郎，然后雏森桃曾许诺“只要你进入死神学院后，我便再也不叫你的小名”。以后碰见与市丸银同辈的死神松本乱菊，被其提醒“去作死神吧。像你这么强的灵压，若是不学习控制它，你的力量可能会杀了你的奶奶”的契机之下，决心去寻找属于本身的力量，而且在听到奶奶说“其实冬狮郎一直在忍耐吧，比起这个奶奶会更难受的”状况下，终于再也不顾虑，踏上了成为死神的道路。 </p>
</div>
</div>
</div>
<div class="alert alert-info" role="alert">
<div class="row">
<div class="col-lg-9">
<h3>最强总队长 </h3>
<p>在全部队长中年事最高。被称为一千年来最强总队长。死神教育学院“真央灵术院”的创始者。身为护廷十三队的总队长，负责做战计划，总指挥队长，副队长，上位席官和普通死神的做战。於建校早年任教,京乐和浮竹是他最优秀的两个学生。因旅祸事件而与浮竹京乐为敌，但蓝染的最终目的暴露后，众人冰释前嫌。在与破面的战斗中，松本、雏森、吉良，修兵都敌不过的犽翁，被他两招即秒。然而犽翁有著秒杀四人的实力，但却被山本总队长快速击倒，可见他的实力远远高出副队长四人之和。
坚决十足地贯彻正义。年事已高，宝刀未老。斩魄刀和死神各战斗方式都具备让人毛骨悚然的威严。足见其厉害程度。</p>
</div>
<div class="col-lg-3">
<img src="static/image/最强总队长.jpg" class="img-responsive img-circle"/>
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
<!-- <footer class="modal-footer">
版权全部：@2016 xxxx 欢迎收看
</footer>-->
</body>
<!--<script type="text/javascript">
$('.carousel').carousel({
interval: 3000,
pause:null
})
</script>-->
</html>
效果：