安装bootstrap
-
打开官网，点击download按钮
官网页面 -
下载好了之后，它是一个文件夹，里面有css和js 两个子文件夹
-
新创建一个html，然后把下面这几句放到head里面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta charset="utf-8" /> <title></title> <!--这里是呼唤bootstrap的咒语--> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--这里是呼唤bootstrap的咒语--> </head> <body> </body> </html>
上手尝试
-
我们先在在body里面包含一个container的div,并且创建一个新的行，在行下面包含一个子元素--列
<body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> </div> </div> </div> </body>
clearfix 是一种 CSS 技巧，可以在不添加新的 html 标签的前提下，解决让父元素包含浮动的子元素的问题。
col-md=12 column: 这里的意思是，我们设置一个长度为12（bootstrap的框架下面，每一行的长度就是12），具体的怎么设置列的大小，可以参考下面这个图
导航栏
我想做一个关于女神的介绍网页，所以这个导航栏也是和女神相关的
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Introduction</a>
</div>
</div>
</nav>
</div>
nav : 是html的一个导航栏标签
role属性：作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。
ontainer-fluid: width是100％，而container的width是用媒体查询获得的动态尺寸。并且由于padding的原因两者不可用嵌套，他们就是提供两种视觉风格。
navbar-header: 这里我们先创建了一个比较大的导航栏项目头
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Introduction</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Movies</a></li>
<li><a href="#">Awards</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Links
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">movie resources</a></li>
<li><a href="#">family</a></li>
<li><a href="#">relative actors</a></li>
<li class="divider"></li>
<li><a href="#">Oascar winners</a></li>
<li class="divider"></li>
<li><a href="#">IMDB website</a></li>
</ul>
</li>
</ul>
</div>
</div>
active: 表示这一个选项是被触发的状态
a href="#"： 这里指的是导航栏的跳转链接，暂时没有设置
dropdown：是bootstrap下拉菜单的一个插件
toggle：是可以点击下拉的按钮
dropdown-menu：是点击之后显示的下拉菜单
divider : 显示一条分割线
<b class="caret"></b>： 增加了一个加粗(b标签)的三角图标
效果如下图：
轮播效果
<div class="carousel slide" id="carousel-181466">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-181466">
</li>
<li data-slide-to="1" data-target="#carousel-181466">
</li>
<li data-slide-to="2" data-target="#carousel-181466">
</li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img alt="" src="娜1.jpg" />
<div class="carousel-caption">
<h4 class="My_h4">
Léon (1994)
</h4>
</div>
</div>
<div class="item">
<img alt="" src="娜2.png" />
<div class="carousel-caption">
<h4 class="My_h4">
Dior(2011)
</h4>
</div>
</div>
<div class="item">
<img alt="" src="娜3.png" />
<div class="carousel-caption">
<h4 class="My_h4">
Muse (forever)
</h4>
</div>
</div>
<!--这里添加控制图片左右滑动的按钮-->
</div> <a class="left carousel-control" href="#carousel-181466" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-181466" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
使用 Bootstrap 轮播（Carousel）插件显示了一个循环播放元素的通用组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。
-
效果如下图：
超大屏幕（Jumbotron）
Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：
- 创建一个带有 class .jumbotron. 的容器 <div>。
- 除了更大的 <h1>，字体粗细 font-weight 被减为 200。
我们的示例代码：
<div class="jumbotron" style="background-color:beige">
<h1>
Natalie Portman
</h1>
<p>
Natalie Portman is the first person born in the 1980s to have won the Academy Award for Best Actress (for Black Swan (2010)).After high school,she graduated with honors, and her academic achievements allowed her to attend Harvard University.
</p>
</div>
隐藏功能
方法一
代码实现
<button type="button" class="btn btn-primary" data-toggle="collapse"
data-target="#demo">
Learn More
</button>
<div id="demo" class="collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
<button> ：标签定义一个按钮
button 的type属性：有button、reset、submit三个选项，用于规定按钮的类型
class属性：这里的“btn btn-primary”其实是在召唤bootstrap中已经写好了的按钮，更多的按钮教程请点击这里我们这个例子中，我选择了最普通的原始按钮样式。
data-toggle：这个属性是bootstrap里面特有，我理解的意思是，把这里的数据连接到与“collapse”功能中去。
data-target: 这里相当于，告诉这一个按钮，这里触发之后，会对id是demo的数据做处理。
<div id="demo" class="collapse in">:这里的collapse in的作用是，当按钮被点击之后，这里数据的操作就是会被显示出来。
方法二--折叠面板
这个的效果和上面有些不同，这个是在一个框框里变化，相当于标题、收缩和展开都是在一个框里，所以也有人把这个效果叫做“手风琴”
代码实现
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
View details
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Is one of 6 actresses to have been pregnant at the time of winning the Academy Award. Portman was 5 months pregnant with her son Aleph when she won the Best Actress Oscar for Black Swan (2010). She was pregnant again when she was nominated for Best Actress in 2017.
</div>
</div>
</div>
</div>
panel-group: bootstrap中已经定义好了，我们只是把它召唤出来，后面的id=accordion也是在召唤“手风琴”这个效果。之后把panel放到panel-group的这个标签之内，作为它的子元素。
panel panel-default: 这里选择的面板类型是最普通的default 类型，大家可以换成panel-primary之类的。
面板标签内的布局： 有点像html文档中body,head,title的布局，我画了一个示意图，大约是这样的
最后实现的效果是这样的，点击“view details”面板会收起或放下
一行多列
其实我也不知道这个效果应该怎么称呼，大概就是把一行分成好几栏的样子，最终效果是这样的
- 代码实现
首先是整体的代码架构：
这里为什么是col-md-4: 因为一行有三列，一行的长度是12（见前文的图），所以每一列的长度是4
每一列的具体代码：
这里没有什么特别的可说之处，整体和html的普通方式一样，有两个注意的地方
small_img：是我自己定义的一个CSS样式，如果对于CSS样式不了解，可以参考我之前写的一个介绍CSS的文章。
手风琴效果:这里我直接复制了上面讲到代码来实现这个效果，但是大家要注意更改每一不同版面的id="collapseOne"还有“href属性中的collapseOne”，因为id是独一无二的，每个内容只能有一个名字。
最终效果
*注：本文章的代码和案例有参考网上教程
