Bootstrap

sHy-shark

于 2021-10-03 10:44:11 发布

阅读量346

点赞数 1

分类专栏： Java 文章标签： bootstrap html jquery

本文链接：https://blog.csdn.net/little_fish_hsy/article/details/120555926

版权

Java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.Bootstrap是什么？有何用途？

1.Bootstrap是目前流行的HTML,CSS,JS框架。
2.用于开发响应式布局、移动设备优先的web项目。（响应式布局：简言之就是一个网站可以兼容多个终端，而不是为每一个终端做一个特定的版本）

2.使用步骤

解压Bootstrap的压缩包
把css,js,fonts文件夹复制到项目下
用link标签导入Bootstrap样式，如有需要再导入Bootstrap.js（注意：在导入Bootstrap.js之前要先导入jQuery.js,因为Bootstrap.js是基于jQuery.js的）
新建一个HTML文档，把基本模板复制过去，然后根据需要修改即可
至此，一个最简单的Bootstrap页面就完成了

3.栅格系统

栅格系统用于：通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
要注意：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
实例：使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
栅格参数：注意不同设备栅格系统的行为以及类前缀。
实例：手机、平板、桌面

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

最多是12列，如果一行里面超过了12列，多余的列（column）将另起一行排列。

4.表单

基本实例：根据需要进行修改即可。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

内联表单：为 form元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。（在网页中主要是搜索部分）
注意：一定要添加 label 标签。如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label、aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。
表单校验（用户名校验，如果输入字符少于4个，则提示字符少了，并且加上错误样式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/jquery-migrate-1.2.1.js"></script>
		<script>
			$(function() {
				$("#login").on("click",function(){
					//获取用户名
					var username = $("#username").val();
					//用正则表达式判断
					if(/\w{4,}/.test(username)){
						$("#user").removeClass("has-error").removeClass("has-success").addClass("has-success");
						$("#helpBlock2").html("").removeClass("glyphicon glyphicon-ok").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok");
					}else{
						$("#user").removeClass("has-error").removeClass("has-success").addClass("has-error");
						$("#helpBlock2").html("用户名至少是4个字符！").removeClass("glyphicon glyphicon-ok").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-remove");
					}
				})
			})
		</script>
	</head>
	<body>
		//.container设置row为固定宽度
		<div class="container" style="margin-top: 20px">
			//form-horizontal设置表单水平排列，可以让每一个form-group表现为栅格系统中的行（row）
			<div class="form-horizontal col-md-6">
				<div class="form-group" id="user">
					<input type="text" class="form-control" id="username" placeholder="用户名">
					<span id="helpBlock2" class="help-block"></span>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" id="inputWarning1">
				</div>
				<div class="form-group">
					<input type="text" class="form-control" id="inputError1">
				</div>
				<div class="form-group">
					<div class="btn-group-justified">
						<div class="btn-group">
							<button id="login" type="submit" class="btn btn-info">登录</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

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

5. 图片

图片形状：通过为元素添加以下相应的类，可以让图片呈现不同的形状。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

请添加图片描述

6.媒体对象（新闻）

默认样式：默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

设置图片与内容的对齐方式：图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。（.media-top .media-middle .media-bottom）
媒体对象列表：用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。

<div class="container">
			<div class="row">评论：</div>
			<ul class="media-list">
			  <li class="media">
			    <div class="media-left">
			      <a href="#">
			        <img class="media-object" src="img/tx.png">
			      </a>
			    </div>
			    <div class="media-body">
			      <h4 class="media-heading">用户1</h4>
			      <p class="bg-info">用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。</p>
			    </div>
			  </li>
			  <li class="media">
			    <div class="media-left">
			      <a href="#">
			        <img class="media-object" src="img/tx.png">
			      </a>
			    </div>
			    <div class="media-body">
			      <h4 class="media-heading">用户2</h4>
			      <p class="bg-info">用一点点额外的标记，就能在列表内使用媒体对象组件（对评论或文章列表很有用）。</p>
			    </div>
			  </li>
			</ul>
		</div>

请添加图片描述

7.下拉菜单（用到时要导入bootstrap.js）

单按钮下拉菜单

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <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>
</div>

分裂式按钮下拉菜单

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <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>
</div>

8.面板

带标题的面板

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

实例（带标题、内联表单、表格、分页的面板）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">用户基本信息</h3>
				</div>
				<div class="panel-body">
					<form class="form-inline">
						<div class="form-group">
							<label for="exampleInputName2">姓名</label>
							<input type="text" class="form-control" id="exampleInputName2" placeholder="请输入姓名">
						</div>
						<button type="submit" class="btn btn-success">查询</button>
					</form>
				</div>
				<div class="panel-body">
					<table class="table table-bordered table-striped table-hover table-condensed">
						<tr>
							<th>姓名</th>
							<th>年龄</th>
						</tr>
						<tr>
							<td>hsy</td>
							<td>21</td>
						</tr>
						<tr>
							<td>kun</td>
							<td>22</td>
						</tr>
					</table>
				</div>
				<div class="col-md-4"></div>
				<div class="panel-body col-md-4">
					<nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a href="#" aria-label="Previous">
					        <span aria-hidden="true">&laquo;</span>
					      </a>
					    </li>
					    <li><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="#" aria-label="Next">
					        <span aria-hidden="true">&raquo;</span>
					      </a>
					    </li>
					  </ul>
					</nav>
				</div>
			</div>
		</div>
	</body>
</html>

请添加图片描述

9.导航

标签页

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

胶囊式标签页

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

带下拉菜单的标签页

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

带下拉菜单的胶囊式标签页

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

如何实现标签页的切换？

<script>
			$(function() {
				$("li").click(function() {
					$.each($("li"), function(i, item) {
						$(this).removeClass("active");
					});
					$(this).addClass("active");
				})
			})
</script>

10.导航条

默认样式的导航条

<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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <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>

案例：小米官网导航条

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			a {
				font-size: 12px;
			}
		</style>
		
	</head>
	<body>
		<nav class="navbar navbar-inverse">
			<div class="container">
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米商 </a></li>
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米商 </a></li>
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米商 </a></li>
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米商城 </a></li>
						<li><a href="#">小米</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">登录</a></li>
						<li><a href="#">注册</a></li>
						<li><a href="#">消息通知</a></li>
						<li><a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>  购物车</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</body>
</html>

11.JS插件之轮播图

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/jquery-migrate-1.2.1.js"></script>
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div style="width: 600px;margin:10px auto">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
				<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>
			
				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/1.jpg" alt="..." style="height: 400px;">
						<div class="carousel-caption">
							认真的人很帅！
						</div>
					</div>
					<div class="item">
						<img src="img/2.jpg" alt="..." style="height: 400px;">
						<div class="carousel-caption">
							cool!
						</div>
					</div>
					<div class="item">
						<img src="img/bz.jpg" alt="..." style="height: 400px;">
						<div class="carousel-caption">
							warm!
						</div>
					</div>
				</div>
			
				<!-- Controls -->
				<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>
			</div>
		</div>
	</body>
</html>

效果：
请添加图片描述
注意事项：

因为轮播图是JS插件，所以要导入bootstrap.js
.carousel-caption：图片上显示的字
最外层div可以用来设置轮播图的宽度和位置，然后把图片的高度设置为一致即可。
data-interval=“3000” 表示每3秒切换一张图，注意位置写在哪。

12.巨幕（用于展示网站上的关键内容）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="jumbotron container">

			<h1>Hello, world!</h1>
			<p>这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。</p>
			<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

		</div>
	</body>
</html>

效果：
请添加图片描述

sHy-shark

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

1.Bootstrap是什么？有何用途？1.Bootstrap是目前流行的HTML,CSS,JS框架。2.用于开发响应式布局、移动设备优先的web项目。（响应式布局：简言之就是一个网站可以兼容多个终端，而不是为每一个终端做一个特定的版本）2.使用步骤解压Bootstrap的压缩包把css,js,fonts文件夹复制到项目下用link标签导入Bootstrap样式，如有需要再导入Bootstrap.js（注意：在导入Bootstrap.js之前要先导入jQuery.js,因为Bootstra
复制链接

扫一扫