BootStrap3

最新推荐文章于 2024-04-24 15:41:29 发布
最新推荐文章于 2024-04-24 15:41:29 发布
阅读量257 收藏
点赞数
文章标签： 列表 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45027950/article/details/108863798
版权

[[toc]]

Bootstrap3 环境搭建

下载依赖文件

  1. bootstrap-3.4.1
  2. jquery-1.12.4

快速搭建Bootstrap项目

1.将下载好的Bootstrap压缩包解压到项目目录中
2.在index.html中键入如下代码进行引入

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap3环境搭建</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <h1>你好,Bootstrap3</h1>
    <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap3 栅格系统

布局容器

  1. 固定宽度并支持响应式布局的容器
<div class="container">
  ...
</div>
  1. 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
  ...
</div>

注意：这两个容器不能相互嵌套

行

.row为行，.row必须包含在.container 或 .container-fluid中

<div class="container">
	<div class="row">
		...
	</div>
	<div class="row">
		...
	</div>
</div>

列

列有4类，适用于4种不同的屏幕，具体类与尺寸如下表，列必须放在.row中，并且，.row中只能放置列

类 尺寸说明
.col-xs-* 手机 (<768px)
.col-sm-* 平板 (≥768px)
.col-md-* 桌面 (≥992px)
.col-lg-* 桌面 (≥1200px)

每行有12列，可以通过数字调整列宽

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap3</title>
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			.row{
    margin-bottom: 10px;}
			.row div{
    border: 1px solid red;}
		</style>
	</head>
	<body>

		<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-2">.col-md-2</div>
				<div class="col-md-2">.col-md-2</div>
				<div class="col-md-2">.col-md-2</div>
				<div class="col-md-2">.col-md-2</div>
				<div class="col-md-2">.col-md-2</div>
				<div class="col-md-2">.col-md-2</div>
			</div>
			<div class="row">
				<div class="col-md-3">.col-md-3</div>
				<div class="col-md-3">.col-md-3</div>
				<div class="col-md-3">.col-md-3</div>
				<div class="col-md-3">.col-md-3</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-5">.col-md-5</div>
				<div class="col-md-5">.col-md-5</div>
				<div class="col-md-2">.col-md-2</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="row">
				<div class="col-md-7">.col-md-7</div>
				<div class="col-md-5">.col-md-5</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-9">.col-md-9</div>
				<div class="col-md-3">.col-md-3</div>
			</div>
			<div class="row">
				<div class="col-md-10">.col-md-10</div>
				<div class="col-md-2">.col-md-2</div>
			</div>
			<div class="row">
				<div class="col-md-11">.col-md-11</div>
				<div class="col-md-1">.col-md-1</div>
			</div>
			<div class="row">
				<div class="col-md-12">.col-md-12</div>
			</div>
		</div>

		<script src="jquery.min.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</body>
</html>

如果总列数超出12列，则超出列将进行流式布局，在下一行显示

<div class="container-fluid">
	<div class="row">
		<div class="col-md-7">.col-md-7</div>
		<div class="col-md-7">.col-md-7</div>
	</div>
</div>

如果列中设置了针对不同屏幕的类，则到达小屏幕的临界值时会使用小屏幕类，而大屏幕类将会失效

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-2 col-md-4">自适应屏幕</div>
		<div class="col-xs-2 col-md-4">自适应屏幕</div>
		<div class="col-xs-8 col-md-4">自适应屏幕</div>
	</div>
</div>

.col-*-offset-* 将列向右偏移

<div class="row">
	<div class="col-md-2 col-md-offset-4">col-md-offset-4</div>
</div>

.col-*-push-* 将列向右推
.col-*-pull-* 将列向左拉

<div class="row">
	<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
	<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

针对不同屏幕尺寸隐藏或显示页面内容

超小屏幕
手机 (<768px)		 小屏幕
平板 (≥768px)		 中等屏幕
桌面 (≥992px)		 大屏幕
桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏
.visible-md-* 隐藏 隐藏 可见
.visible-lg-* 隐藏 隐藏 隐藏
.hidden-xs 隐藏 可见 可见
.hidden-sm 可见 隐藏 可见
.hidden-md 可见 可见 隐藏
.hidden-lg 可见 可见 可见

Bootstrap3 全局类

排版

文本对齐类

<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-lowercase">文本全小写</p>
<p class="text-uppercase">文本全大写</p>
<p class="text-capitalize">文本首字母大写，其余字母小写</p>

让引用内容右对齐

<blockquote class="blockquote-reverse">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  	<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

移除列表默认样式

<ul class="list-unstyled">
	<li>list</li>
	<li>list</li>
	<li>list</li>
	<li>list</li>
</ul>

让列表项水平排列

<ul class="list-inline">
	<li>list</li>
	<li>list</li>
	<li>list</li>
	<li>list</li>
</ul>

让dt和dd水平排列

<dl class="dl-horizontal">
	<dt>dt-description</dt>
	<dd>dd-description</dd>
</dl>

表格

基本表格

<table class="table">
  ...
</table>

条纹状表格

<table class="table table-striped">
  ...
</table>

带边框的表格

<table class="table table-bordered">
  ...
</table>

让表格支持鼠标悬停

<table class="table table-hover">
  ...
</table>

让表格更加紧凑

<table class="table table-condensed">
  ...
</table>

设置行或单元格的背景颜色

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<tr>
  <td class="active">鼠标悬停在行或单元格上时所设置的颜色</td>
  <td class="success">标识成功或积极的动作</td>
  <td class="warning">标识警告或需要用户注意</td>
  <td class="danger">标识危险或潜在的带来负面影响的动作</td>
  <td class="info">标识普通的提示信息或动作</td>
</tr>

响应式表格

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表单

普通表单

<form action='...' method='...'>
	<div class="form-group">
		<label for="...">输入框</label>
		<input type="text" class="form-control" id="..."/>
	</div>
	<div class="form-group">
		<label for="...">密码框</label>
		<input type="password" class="form-control" id="..."/>
	</div>
	<div class="form-group">
		<label for="...">文件上传</label>
		<input type="file" id="...">
		<p class="help-block">帮助信息</p>
	</div>
	<div class="checkbox">
		<label>
	    	<input type="checkbox"/> 复选框
	    </label>
	</div>
	<button type="submit" class="btn btn-default">提交按钮</button>
</form>

内联表单

<form class="form-inline">
	...
</form>

将label隐藏

<div class="form-group">
	<label class="sr-only" for="...">邮箱地址</label>
	<input type="email" class="form-control" id="..." placeholder="邮箱"/>
</div>

输入框组

<form class="form-inline">
	<div class="form-group">
		<label class="sr-only" for="...">...</label>
		<div class="input-group">
			<div class="input-group-addon">$</div>
			<input type="text" class="form-control" id="..." placeholder="金额"/>
			<div class="input-group-addon">.00</div>
		</div>
	</div>
</form>

label和控件水平对齐

<form class="form-horizontal">
	<div class="form-group">
		<label for="..." class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="..." placeholder="Email">
		</div>
	</div>
	<div class="form-group">
		<label for="..." class="col-sm-2 control-label">Password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="..." placeholder="Password">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
		        	<input type="checkbox"/> Remember me
		        </label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">Sign in</button>
		</div>
	</div>
</form>

复选框

垂直排列

<div class="checkbox">
	<label>
		<input type="checkbox" value=""/>
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="checkbox disabled">
	<label>
		<input type="checkbox" value="" disabled="disabled"/>
		Option two is disabled
	</label>
</div>

水平排列

<label class="checkbox-inline">
	<input type="checkbox" id="..." value="option1".> 1
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="..." value="option2".> 2
</label>
<label class="checkbox-inline">
	<input type="checkbox" id="..." value="option3".> 3
</label>

不带label文本

<div class="checkbox">
	<label>
		<input type="checkbox" id="..." value="..." aria-label="..."/>
	</label>
</div>

单选按钮

垂直排列

<div class="radio">
	<label>
		<input type="radio" name="..." id="..." value="..." checked/>
		Option one is this and that—be sure to include why it's great
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="..." id="..." value="..."/>
		Option two can be something else and selecting it will deselect option one
	</label>
</div>
<div class="radio disabled">
	<label>
		<input type="radio" name="..." id="..." value="..." disabled='disabled'/>
		Option three is disabled
	</label>
</div>

水平排列

<label class="radio-inline">
	<input type="radio" name="..." id="..." value="..."/> 1
</label>
<label class="radio-inline">
	<input type="radio" name="..." id="..." value="..."/> 2
</label>
<label class="radio-inline">
	<input type="radio" name="..." id="..." value="..."/> 3
</label>

不带label文本

<div class="radio">
	<label>
		<input type="radio" name="..." id="..." value="..." aria-label="..."/>
	</label>
</div>

给表单控件添加校验颜色

<div class="form-group has-success">
	<label class="control-label" for="...">成功</label>
	<input type="text" class="form-control" id="..."/>
</div>
<div class="form-group has-warning">
	<label class="control-label" for="...">警告</label>
	<input type="text" class="form-control" id="..."/>
</div>
<div class="form-group has-error">
	<label class="control-label" for="...">错误</label>
	<input type="text" class="form-control" id="..."/>
</div>

给输入框添加额外的图标

标题与控件垂直排列

<div class="form-group has-success has-feedback">
	<label class="control-label" for="...">成功</label>
	<input type="text" class="form-control" id="..." aria-describedby="..."/>
	<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
	<span id="..."
最低0.47元/天 解锁文章
樊尘大大怪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap 3 学习
weixin_45346719的博客
03-09 1242
http://getbootstrap.com/ 1.meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width属性控制设备宽度，将它设置为device-width确保正确呈现在不同设备上 initial-scale确保网页加载时1:1呈现，不会缩放 在移动设备浏览器上 ，user-scalable=no 可以禁用其缩放（zooming）功能，通常maximum-scale=1.0 与
bootstrap3
02-23
基本结构Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。 CSSBootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及...
Bootstrap3（1）8.15
weixin_68597796的博客
08-15 350
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 类名：container左右留白（指最外部的div）类名：containe
BootStrap
weixin_52655964的博客
03-11 369
核心的样式是和，这两个css是一样的东西，后者是压缩后的样式。bootstrap.min.css.map可以告知我们对应的样式出现在第几行bootstrap.theme.*这些文件是bootstrap为了满足喜欢boostrap2的用户提供的主题样式。一般不用。BootStrap中内置了一个收费的字体图标Glyphicons。GlyphiconsHalflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。
Bootstrap（v3）前端开发框架
最新发布
weixin_65350557的博客
04-24 1193
Bootstrap 是一个流行的前端开发框架，由 Twitter （推特）开发并维护。它是一个开源的工具包，用于创建响应式和移动设备优先的网站和 Web 应用程序。
【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架
shawxlee的CSDN博客
09-13 359
Bootstrap CSS 一、移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap网页标题&l
bootstrap3简单玩法
qq_38104453的博客
11-07 220
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。“行（row）”必须包含在.container（固定宽度）或（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似.row和.col-xs-4。
Bootstrap3通用商城模板
05-28
Bootstrap3通用商城模板是一款响应式的电商网站模板
bootstrap3中文离线手册
02-27
Bootstrap3是中国开发者非常熟悉的一款前端开发框架，它以其简洁、灵活和强大的功能，极大地提高了网页设计和开发的效率。这份“bootstrap3中文离线手册”是专为那些需要在无网络环境下查阅Bootstrap3文档的开发者...
Bootstrap 3 综合实战项目教程，Web前端响应式开发项目实战视频教程带源码资源
02-08
Bootstrap 3 综合实战项目教程，Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程，Web前端响应式开发项目实战视频教程带源码资源Bootstrap 3 综合实战项目教程，Web前端响应式开发项目...
bootstrap3 -入门简学
ysazt的博客
03-12 872
1.前期准备工作 1.1 https://www.bootcss.com/ 1.2 点击下载 1.3解压下载好得东西 2. 版本介绍 Bootstrap 版本 目前市面上使用的最多的是 3.x.x 版本。各个版本的介绍： 2.3.2版本： 2013年之后，停止维护； 支持更广泛的浏览器 代码不够简洁， 功能不够多。 3.x.x 版本： 目前最新的稳定版本。 不支持 IE7 和早期的 Firefox 支持 IE8，单效果不好。 2015年8月发布 4.0.0-alpha
Bootstrap-3
weixin_63823376的博客
04-03 951
提示:使用工具：HBuilder X 网站：https://v5.bootcss.com/ 文章目录 一、引入库 二、案例 1.代码and效果 三.图标的使用 下载 使用详情 引入库 <!-- 引入Bootstrap的CSS --> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <!-- 引入图标库的CSS --> <link ...
Bootstrap3【上手教程】
全栈
05-03 1503
​ 圆角矩形： 圆形/椭圆：这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。 缩略图： ​
bootstrap bootstrap3 学习使用bootstrap v3 中文文档(两天包会)
heshuaicsdn的博客
03-12 3707
bootstrap:学习使用bootstrap3 。中文文档（两天包学会！非常简单！） 它是前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap3学习（一）
qq30211478的博客
05-21 2184
一、Bootstrap简介 Bootstrap来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 （1）基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 （2）CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可...
Bootstrap3基础教程
热门推荐
thinking_fioa的博客
03-20 1万+
一、Bootstrap3基础教程@author 鲁伟林 Bootstrap3是目前最受欢迎的前端框架，非常重要。本教材不包括: Bootstrap插件，有关插件知识，请看另一篇博客 参考网址是：http://www.runoob.com/bootstrap/bootstrap-tutorial.html gitHub地址: https://github.com/thinkingfioa/Notes...
BootStrap3-基础入门
世界和我们都不该止步于此
04-13 739
目录 超常用类名： Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等，助力开发者掌握并使用这一框架。https://www.bootcss.com/我们可以去官网下载对应的bootstrap文件，在HTML页面中引入script：
bootstrap3商城
11-16
使用Bootstrap3开发商城网站有以下几个优势。首先，Bootstrap具有良好的响应式设计，可以适应不同大小的屏幕，确保在不同设备上都能有很好的用户体验。这对于商城网站来说非常重要，因为用户可能使用不同设备来浏览...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值