您的位置：首页 > Web前端 > BootStrap

Bootstrap学习笔记

2017-12-17 17:15 225 查看

以Bootstrap3为例学习！

需要使用Bootstrap做一个响应式布局的页面,学习一下

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

下载地址：http://getbootstrap.com/

一个使用了Bootstrap的html模板

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

移动设备优先是 Bootstrap 3 的最显著的变化。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">
//img-responsive类
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

display 属性设置为 block，以块级元素显示。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

使用.center-block类居中

网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统（Grid System）的工作原理

- 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

- 使用行来创建列的水平组。

- 内容应该放置在列内，且唯有列可以是行的直接子元素。

- 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

- 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

Bootstrap 网格的基本结构：

<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
<div class="container">....

按钮样式很多

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 按钮选项</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

</body>
</html>

btn-lg大 btn-sm中 btn-xs小

图片

Bootstrap 提供了三个可对图片应用简单样式的 class

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

常见的辅助类

close 得到关闭图标

caret 的元素插入符表示下拉功能和方向

使用 class pull-left 或 pull-right 来把元素向左或向右浮动

center-block 来居中元素

.show 和 .hidden 来强行设置元素显示或隐藏

.sr-only 来把元素对所有设备隐藏，除了屏幕阅读器

字体图标

http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

<span class="glyphicon glyphicon-search"></span>

带有字体图标的导航栏

<span class="glyphicon glyphicon-home">Home</span></a>

下拉菜单

使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可

<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>

按钮组

按钮组用于把一组按钮放在同一行里，按钮之间没有间隙.用法很简单,只需要将一组按钮放在
..中即可.

<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>

<input type="button" class="btn btn-default" value="点我" />
</div>

//垂直<div class="btn-group-vertical">
//两端对齐(按钮组拉伸到100%宽度)只适用于<a>元素
<div class="btn-group btn-group-justified">
<a class="btn btn-default">Left</a>
<a class="btn btn-default">Middle</a>
<a class="btn btn-default">Right</a>
</div>

input控件组

搜索框（实质就是文本框+按钮）

<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control"/>

<span class="input-group-btn">
<input type="button" name="search" value="search" class="btn btn-default"/>
</span>
</div>

搜索框+文字

<div class="input-group" style="width:500px;margin:0px auto;">
<input type="text" class="form-control" />
<span class="input-group-addon">
输入完成后回车
</span>

</div>

列表组

<div style="width:100px;">
<ul class="list-group">
<li class="list-group-item"><a href="">选项一</a></li>
<li class="list-group-item"><a href="">选项二</a></li>
<li class="list-group-item"><a href="">选项三</a></li>
<li class="list-group-item"><a href="">选项四</a></li>
</ul>
</div>

其他元素展现为列表的样子

<div class="class="list-group" style="width:200px;">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">英格兰战胜威尔士</h4>
<p>最新欧洲杯战况英格兰2:1战胜威尔士....</p>
</a>

<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">乌克兰对北爱尔兰</h4>
<p>乌克兰对北爱尔兰....</p>
</a>

<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">德国对波兰</h4>
<p>德国队波兰....</p>
</a>
</div>

为列表组添加徽章,Bootstrap会自动将徽章放置在右边

<div style="width:150px;">
<ul class="list-group">
<li class="list-group-item">
<!-- 即使将徽章放在前面,最终还是会居右放置-->
<span class="badge">52</span>
<a href="">中国队金牌</a>
</li>

<li class="list-group-item">
<span class="badge">48</span>
<a href="">美国队金牌</a>
</li>

<li class="list-group-item">
<span class="badge">41</span>
<a href="">俄罗斯队金牌</a>
</li>
</ul>
</div>

分页

<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
//上一页下一页
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>

缩略图

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 缩略图</title>
<link href="../../css/bootstrap/css/bootstrap.css" rel="stylesheet">

</head>
<body>

<div class="row">
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
<div class="col-sm-6 col-md-3">
<a href="#" class="thumbnail">
<img src="../../img/cat.png"
alt="通用的占位符缩略图">
</a>
</div>
</div>

<script src="../../js/jquery/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>
</html>

面板

//最简单的面板
<div class="panel panel-default">
<div class="panel-body">基础面板示例</div>
</div>

//页头页脚
<div class="panel panel-default" style="width:500px;">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板内容省略...</div>
<div class="panel-footer">面板页脚</div>
</div>

进度条

进度条常用于文件的上传和下载、内容的加载等场景,Bootstrap提供了多种进度条样式供选择.Bootstrap以及其他前端组件只解决进度条的样式问题,追踪进度扔需依赖服务端程序.

<div class="progress" style="width:500px;">
<div class="progress-bar" style="width:60%;"></div>
</div>

模态对话框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>演示分页组件</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>

</head>

<body>

<h2>创建模模态对话框（Modal）</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<div class="modal fade" id="myM  odal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
模态对话框示例
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div>
</div>
</div>

<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>
</body>

</html>

根据代码分析,完整的模态对话框功能主要分为两个部分:出发按钮和对话框.出发按钮可以是一个button，也可以是一个链接，只需要加入两个元素:

data-toggle=” modal”触发器

data-target=”#myModal”,用于和相应的对话框id进行对应.

对话框部分主要分3层.

第一层:
…,这一层使用class=”modal”设置样式并设置模态对话框的触发类,提供id和触发按钮的data-target属性的值进行对应，还可以添加其他的配置属性.

第二层:…,设置一个居中的对话框.

第三层:…,设置具体的内容.

注意:不要在一个模态框上重叠另一个模态框.

开发中,选项参数可以通过data属性或JavaScript进行传递。对于data属性,需要将选项名称放到data-之后,例如data-backdrop=””，具体的参数可以参考官方文档.

标签页切换

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#intro" data-toggle="tab">商品介绍</a></li>
<li><a href="#parameter" data-toggle="tab">规格参数</a></li>
<li><a href="#qingdan" data-toggle="tab">包装清单</a></li>
<li><a href="#pingjia" data-toggle="tab">商品评价</a></li>
<li><a href="#shouhou" data-toggle="tab">售后保障</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="intro">我是商品介绍</div>
<div class="tab-pane" id="parameter">我是规格参数</div>
<div class="tab-pane" id="qingdan">我是包装清单</div>
<div class="tab-pane" id="pingjia">我是商品评价</div>
<div class="tab-pane" id="shouhou">我是售后保障</div>
</div>

Tooltip

Tooltip插件的效果是鼠标悬停在目标元素上时,显示额外的提示

<a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>

其中data-toggle=”tooltip”是插件触发器,title的内容是提示文字,data-placement属性用于指定提示出现的位置。

要使该插件生效,需要在页面底部添加JavaScript代码完成初始化:

$("#myTooltip").tooltip();

开发者可以为tooltip()函数添加参数,或者在标签内添加”data-参数名”进行配置,比如上面例子中的data-placement=”right”.

提示信息

一般来说,任务执行成功或失败后,用户需要得到一个提示信息,这个信息可以出现在页面跳转后的新页面,也可以是Ajax执行成功后的回调。

<div id="my-alert" class="alert alert-danger fade in" style="width:400px;">
警告,服务器挂了!
<a href="#" class="close" data-dismiss="alert">X</a>
</div>

图片轮播

//由3部分组成:控制器、内容部分、标识符.控制器负责控制幻灯的翻页，标识符告诉我们页码,内容部分负责展现内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>演示幻灯片组件</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link>

</head>

<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:730px;">
<!--标识符:告诉我们页码-->
<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>
</ol>

<!-- 幻灯片内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../img/1.jpg">

</div>

<div class="item">
<img src="../../img/2.jpg">

</div>

<div class="item">
<img src="../../img/3.jpg">

</div>
</div>

<!-- 控制器: 负责上一页/下一页 -->
<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>

<script src="../../css/bootstrap/js/jquery-2.1.4.js"></script>
<script src="../../css/bootstrap/js/bootstrap.js"></script>

</body>

</html>

导航条

Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求.

//水平胶囊导航
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>

//垂直胶囊导航
<div style="width:140px;text-align:center;">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>

</div>

//面包屑导航
<ul class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">资料库</a></li>
<li><a href="#">数据</a></li>
</ul>

//头部导航
<nav class="navbar navbar-default">
<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="#">网站Logo</a>
</div>

<!—这里设置网站的链接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<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>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</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">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<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>
//具体分析头部导航主要分为两层结构,第一层是最外面的 <nav class="navbar navbar-default">…</nav>，这一层用于设置导航的基本样式
将.navbar-default类替换为 .navbar-inverse类,则显示为反色的导航(黑底白字)
第二层有两个并列的元素: <div class="navbar-header">…</div>内部用于设置标题内容.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">….</div>内部则用于编写具体的导航链接、搜索表单、下拉菜单等具体的导航内容。

Bootstrap提供了在小窗口下导航 收起/展开的功能

东西很多，继续努力！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap javascript css html

相关文章推荐

新的分享

章节导航