bootstrap -- 学习总结

1.bootstrap简介

Bootstrap是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本

bootstrap特点:

(1)响应式框架:一个网站可以应用于多个终端
(2)栅格系统:把视口平均分为12列(行下有列,内容放在列中)
(3)CSS样式的应用:引入列名给标签来获取样式

环境搭建(两种方法):

1.外联引入

先将下载的三个css、jquery、js文件放入项目文件中,然后通过link和script标签分别引入文件

<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="assets/jquery-1.11.0.js"></script>
<script type="text/javascript" src="./assets/bootstrap/js/bootstrap.min.js"></script>
注意:要按照顺序引入文件,jquery文件必须在bootstrap.js文件之前。同时在引入自己写的js文件时必须放在这个js文件之后哦~~要不然会报错的

2.CDN方法

通俗来讲就是通过网络连接的方法进行连接,因此在使用时必须要连网


<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2.bootstrap使用

1. 布局容器

container 固定宽度,支持响应式布局
container-fluid 100%宽度,占据全部视口的容器

2. 栅格系统

响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

在这里插入图片描述

功能:自动分配视口的布局大小,根据视口大小的变化改变页面的整体布局
行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)

网格选项:
超小设备手机(<768px)小型设备平板电脑(>=768px)中型设备台式电脑(>=992px)大型设备台式电脑(>-1200px)
最大容器宽度None(auto)750px970px1170px
最大列宽auto60px78px95px
class前缀.col-xs-.col-sm-.col-md-.col-lg-
每列间隙宽度左右各15px(共30px)左右各15px(共30px)左右各15px(共30px)左右各15px(共30px)
栅格的大致框架:

加入规定的class的同时也可根据自己的需求写入其他的css样式,此时需要定义另外一个class引入样式即可

<style type="text/css">
	.a {
		border: 1px solid #000000;
		height: 30px;
	}

	.b {
		border: 1px solid #C7254E;
		height: 25px;
	}
</style>
<!-- 栅格 -->
<div class="container">
	<div class="row">
		<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6">
			<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
			<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
			<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
			<div class="b col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
		</div>
		<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
		<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
		<div class="a col-lg-3 col-md-4 col-sm-6 col-xs-6"></div>
	</div>
</div>

(1)偏移列
.col-md-offset-*

这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。

(2)嵌套列
在一个已有的 .col-md-* 列内添加一组 .col-md-* 列

(3)列排序
.col-md-push-* / .col-md-pull-*

以一种顺序编写列,然后以另一种顺序显示列

(4)响应式工具

显示:visible-md-
隐藏:hidden-md-
3. CSS样式
1. 排版
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">禁止换行</p>
<p class="text-muted">文本灰色</p>
<p class="text-primary">文本蓝色</p>
<p class="text-success">文本绿色</p>
<p class="text-info">文本蓝色</p>
<p class="text-warning">本文本橘色</p>
<p class="text-danger">文本红色</p>

2. 表格
表格样式类型class名称样式解释
条纹表格table-striped条纹颜色
边框表格table-bordered每个元素都有边框,且边框时圆角的
悬停表格table-hover鼠标悬停时此行会出现浅灰色背景
精简表格table-condensed行内边距减半,表更加紧凑
响应式表格table-responsive可随视口自适应大小
<table class="table table-hover">
	<tr class="active">
		<th>名称</th>
		<th>官网</th>
		<th>性质</th>
	</tr>
	<tr class="warning">
		<td>C语言中文网</td>
		<td>http://c.biancheng.net/</td>
		<td>教育</td>
	</tr>
	<tr class="success">
		<td>百度</td>
		<td>http://www.baidu.com/</td>
		<td>搜索</td>
	</tr>
	<tr class="info">
		<td>当当</td>
		<td>http://www.dangdang.com/</td>
		<td>图书</td>
	</tr>
	<tr class="danger">
		<td>当当</td>
		<td>http://www.dangdang.com/</td>
		<td>图书</td>
	</tr>
</table>

在这里插入图片描述

3. 按钮组

通过按钮组容器 .btn-group 把一组按钮放在同一行里。
按钮组中,除第一个和最后一个按钮外,中间按钮没有圆角

<div class="container">
	<!-- 按钮工具栏 -->
	<div class="btn-toolbar">
		<div class="btn-group-vertical"><!-- vertical(垂直) -->
			<button class="btn btn-default">1</button>
			<button class="btn btn-danger">2</button>
			<button class="btn btn-success">3</button>
			<button class="btn btn-default">4</button>
			<div class="btn-group"> <!-- 嵌套-下拉菜单 -->
				<button class="btn btn-default dropdown-toggle" data-toggle='dropdown'>更多<span class="caret"></span></button>
				<ul class="dropdown-menu">
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
				</ul>
			</div>
		</div>
	</div>
</div>

在这里插入图片描述

4. 表单组
  • 输入框组
<!-- 输入框组 -->
<div class="input-group">
	<span class="input-group-addon">@</span>
	<input type="text" placeholder="UserName" class="form-control"/>
</div>

在这里插入图片描述

  • 输入框组--后按钮
<!-- 输入框组-后按钮 -->
<div class="input-group">
	<input type="text" class="form-control"  placeholder="Username"/>
	<span class="input-group-btn">
		<input type="submit" value="开始搜索" class="btn btn-danger"/>
	</span>
</div>

在这里插入图片描述

  • 输入框组--后下拉菜单
<!-- 输入框组-后下拉栏 -->
<div class="input-group">
	<input type="text" class="form-control" placeholder="Username"/>
	<span class="input-group-btn">
		<button class="btn btn-default dropdown-toggle" data-toggle='dropdown'>
			更多<span class="caret"></span></button>
		<ul class="dropdown-menu">
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
		</ul>
	</span>
</div>

在这里插入图片描述

  • 表单组
<form action="#" method="post" class="form-inline">
	<div class="form-group">
		<label for="email">Email Address</label>
		<input type="text" name="" id="email" class="form-control" placeholder="请输入电子邮箱"/>
	</div>
	<br>
	<div class="form-group">
		<label for="pwd">PassWord</label>
		<input type="text" name="" id="pwd" class="form-control" placeholder="请输入密码">
	</div>
	<br>
	<div class="form-group">
		<label for="fl">Select File</label>
		<input type="file"/>
	</div>
	<br>
	<input type="submit" value="Submit">
	<input type="reset" value="Reset" />
	<!-- 相当于
	<button type="submit">submit</button>
	<button type="button" id="reset">reset</button> -->
</form>
<script type="text/javascript">
	$(function(){
		// 给reset的button绑重置事件
		$('reset').bind('click',function(){
			$('#email').val('')
			$('#pwd').val('')
			$('#fl').val('')
		})
	})
</script>

在这里插入图片描述

5. 导航

Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。
注: .nav-* 类依赖 .nav 基类

<!-- ul导航 -->
<ul class="nav nav-pills">
	<li class="active"><a href="#">历史</a></li>
	<!-- disabled禁用,鼠标悬停时没有样式变化,鼠标箭头变为禁止的标志 -->
	<li class="disabled"><a href="#">文学</a></li> 
	<li><a href="#">物理</a></li>
	<li><a href="#">天文</a></li>
	<li>
		<a href="#" data-toggle='dropdown'>其他
		<span class="caret"></span></a>
		<ul class="dropdown-menu">
			<li>a</li>
			<li>c</li>
			<li>b</li>
		</ul>
	</li>
</ul>

在这里插入图片描述

  • 路径导航

在一个带有层次的导航结构中标明当前页面的位置。
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
给< ol>或< ul>添加 .breakcrumb 可以实现“面包屑”效果。

<!-- ul/ol路径导航 -->
<ul class="breadcrumb">
	<li><a href="#">游戏</a></li>
	<li><a href="#">文章</a></li>
	<li><a href="#">娱乐</a></li>
</ul>

在这里插入图片描述

  • 分页

默认分页

将分页类 .pagination 添加到< ul>标记上,可以实现分页效果。
添加 .disabled 类可以实现禁用状态。
添加 .active 类可以实现激活状态。
给< ul>添加 .pagination-lg 或 .pagination-sm 可以控制分页大小。

<!-- ul分页控件 pagination -->
<ul class="pagination">
	<li class="disabled">
		<span> &laquo; </span>
	</li>
	<li class="active">
		<a href="#">1</a>
	</li>
	<li>
		<a href="#">2</a>
	</li>
	<li>
		<a href="#">3</a>
	</li>
	<li>
		<a href="#">&raquo;</a>
	</li>
</ul>

在这里插入图片描述翻页分页

给< ul>添加 .pager 类,可以实现“上一页”和“下一页”效果。
给< li>添加 .previous 和 .next 可以实现两端对齐。

<!-- 上下页 -->
<nav>
	<ul class="pager">
		<li class="previous"><a href="#">上一页</a></li>
		<li class="next"><a href="#">下一页</a></li>
	</ul>
</nav>

在这里插入图片描述

  • 导航条--品牌图标

将导航条内放置品牌标志的地方替换为 < img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补(padding)和高度(height),你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。

<!-- nav导航条(navbar) -->
<nav class="navbar navbar-default">
	<!-- 导航条头部,可添加logo图片等 -->
	<div class="navbar-header">
		<img src="img/1.jpg" alt="" class="navbar-brand">
	</div>
	<!-- 加入按钮 -->
	<!-- <button type="submit" class="btn navbar-btn">submit</button> -->
	<!-- 加入文本 -->
	<!-- <p class="navbar-text">是的</p> -->
	<div class="collapse navbar-collapse">
		<ul class="nav navbar-nav">
			<li><a href="">a</a></li>
			<li><a href="">b</a></li>
			<li><a href="">c</a></li>
		</ul>
	</div>
</nav>

在这里插入图片描述

  • 导航条--内嵌表单

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态。 使用对齐选项可以规定其在导航条上出现的位置。
使用 .navbar-left 或 .navbar-right 可以实现表单左对齐或右对齐。

<!-- nav导航条内嵌表单 -->
<nav class="navbar navbar-default">
	<div class="navbar-header">
		<img src="img/1.jpg" alt="" class="navbar-brand">
	</div>
	<!-- 内嵌表单(navbar-form) -->
	<form class="navbar-form navbar-left">  <!-- navbar-left 靠左对齐 -->
		<div class="form-group">
			<input type="text" value="" placeholder="please" class="form-control"/>
		</div>
		<button type="submit" class="btn btn-danger">提交</button>
	</form>
</nav>

在这里插入图片描述

  • 徽章

给链接、导航等元素嵌套 < span class=“badge”> 元素,可以很醒目的展示新的或未读的信息条目。

<!-- 徽章badge -->
<!-- 链接式 -->
<a href="javascript:(0)">新闻标题
	<span class="badge">123</span>
</a>
<!-- 按钮式 -->
<button type="button" class="btn btn-primary">未读消息
	<span class="badge">45</span>
</button>

在这里插入图片描述

  • 缩略图

通过缩略图组件扩展 Bootstrap 的 栅格系统,可以很容易地展示栅格样式的图像、视频、文本等内容。使用 .thumbnail 可以实现缩略图效果。

<!-- 缩略图 -->
<div class="row">
	<div class="col-md-3">
		<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
		<div class="caption">
			<h4>bootstrap</h4>
			<p>课程描述</p>
		</div>
	</div>
	<div class="col-md-3">
		<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
		<div class="caption">
			<h4>bootstrap</h4>
			<p>课程描述</p>
		</div>
	</div>
	<div class="col-md-3">
		<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
		<div class="caption">
			<h4>bootstrap</h4>
			<p>课程描述</p>
		</div>
	</div>
	<div class="col-md-3">
		<a href="#" class="thumbnail"><img src="img/1.jpg" alt=""></a>
		<div class="caption">
			<h4>bootstrap</h4>
			<p>课程描述</p>
		</div>
	</div>
</div>

在这里插入图片描述

  • 警告框

为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。
用 .alert-link 工具类,可以为链接设置与当前警告框相符的颜色。

<!-- 警示框 -->
<div class="alert alert-danger alert-dismissable">
	<button type="button" class="close" data-dismiss="alert">&times;</button>
	<strong>Warning!</strong><p>woring...</p>
</div>

在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值