Bootstrap安装使用

Bootstrap的安装引入

Bootstrap的安装

通过链接:https://www.bootcss.com/进行下载安装。
Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
可根据需求自行选择。

文件结构

预编译的 Bootstrap

当下载 Bootstrap 的已编译的版本,解压缩 ZIP 文件,您将看到下面的文件/目录结构:
在这里插入图片描述

Bootstrap 源代码

如果您下载了 Bootstrap 源代码,那么文件结构将如下所示:
在这里插入图片描述
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

Bootstrap的引用

将所下载的文件中css、js、fonts文件复制到自己的项目里。在对其引用

		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<!--导入自己的js文件-->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<!--导入自己的css文件-->

1、必须先引入bootstrap的支持 ,包括js、css、font文件。
2、引入的文件必须先有jQuery的核心文件,再引入bootstrap的js文件,再引入自己的文件。
3、css文件必须先引入bootstrap的css文件再引入自己的文件
4、font文件无需在页面上引入,但是需要在项目的目录中存在

Bootstrap的使用

Bootstrap 网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
当一行中列没有占满,多余的位置会空下来。

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<style>
			div{
			background-color:greenyellow;
			border: solid royalblue 1px;
			}
		</style>
	</head>
<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-6">列1</div>
				<div class="col-lg-6">列2</div>
			</div>
			<div class="row">
				<div class="col-lg-4">列1</div>
				<div class="col-lg-4">列2</div>
				<div class="col-lg-4">列3</div>
			</div>
			<div class="row">
				<div class="col-lg-2">列1</div>
				<div class="col-lg-2">列2</div>
				<div class="col-lg-2">列3</div>
				<div class="col-lg-2">列4</div>
				<div class="col-lg-2">列5</div>
				<div class="col-lg-2">列6</div>
			</div>
		</div>
	</body>

运行效果:
在这里插入图片描述
1.行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
2.使用行来创建列的水平组。
3.内容应该放置在列内,且唯有列可以是行的直接子元素。
4.预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

offset偏移效果

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

运行效果:
在这里插入图片描述

Bootstrap 表单

垂直或基本表单

1.向父 元素添加 role=“form”。
在这里插入图片描述
2.把标签和控件放在一个带有 class .form-group 的

中。
在这里插入图片描述
3.向所有的文本元素 、 和 添加 class .form-control。
在这里插入图片描述
代码:

	<form role="form" >
			<div class="form-group">
				<label for="name">用户名</label>
				<input class="form-control" name="name" />
			</div>
			<div class="form-group">
				<label for="name">密码</label>
				<input class="form-control" type="password" name="name" />
			</div>
		</form>

默认为垂直效果:
在这里插入图片描述

内联表单

如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向 标签添加 class .form-inline。

			<form role="form" class="form-inline">
			<div class="form-group">
				<label for="name">用户名</label>
				<input class="form-control" name="name" />
			</div>
			<div class="form-group">
				<label for="name">密码</label>
				<input class="form-control" type="password" name="name" />
			</div>
		</form>

在这里插入图片描述

水平表单

1.向父 元素添加 class .form-horizontal。
2.把标签和控件放在一个带有 class .form-group 的

中。
3.向标签添加 class .control-label。
结合网格效果:
在这里插入图片描述
运行效果:
在这里插入图片描述

Bootstrap 导航栏

1.向nav标签添加 class .navbar、.navbar-default。(向上面的元素添加 role=“navigation”,有助于增加可访问性。)

			<nav class="nav navbar-default" role="navigation" >

2.向 div元素添加一个标题 class .navbar-header,内部包含了带有 class navbar-brand 的 a 元素。这会让文本看起来更大一号。

				<div class="navbar-header">
					<a href="#" class="navbar-brand">笔记本电脑</a>
				</div>

3.为了向导航栏添加链接,只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

<ul class="nav navbar-nav">

完整代码:

		<div class="container">
			<nav class="nav navbar-default" role="navigation">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">笔记本电脑</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">神舟</a></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" >联想<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">小新</a></li>
								<li><a href="#">拯救者</a></li>
							</ul>
						</li>
						<li><a href="#">惠普</a></li>
					</ul>
				</div>
			</nav>		
		</div>

运行效果:
在这里插入图片描述

Bootstrap 分页组件

默认分页

		<div class="container">
			<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="">下一页</a></li>
			</ul><br />
			</div>

运行效果:在这里插入图片描述
通过disabled与active,当位于第一页的时候上一页无法点击。
在这里插入图片描述

不同分页之间的大小

			<ul class="pagination">//默认大小
			<ul class="pagination pagination-sm">//小
			<ul class="pagination pagination-lg">//大

运行效果:
在这里插入图片描述

翻页

如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。

			<ul class="pager">
				<li class="previous"><a href="">Previous</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 class="next"><a href="">next</a></li>
			</ul>

运行效果
在这里插入图片描述

Bootstrap 字体图标

		<div class="container">
			<span class="glyphicon glyphicon-search"></span> search
			<span class="glyphicon glyphicon-home"></span> home
			<span class="glyphicon glyphicon-file"></span> file
			<span class="glyphicon glyphicon-film"></span> film
			<span class="glyphicon glyphicon-trash"></span> trash
			<button type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-plus"></span> plus
 			</button>
			
			<button type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-user"></span> 用户
			</button>
		</div>

运行效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值