bootstrap基本样式

最新推荐文章于 2021-08-23 08:51:27 发布
最新推荐文章于 2021-08-23 08:51:27 发布
阅读量417 收藏 2
点赞数
分类专栏： bootStrap HTML 文章标签： bootStrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43462019/article/details/102821091
版权

bootstrap列表：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</head>

	<body>
		<!--bootstrap列表-->
		<ul class="list-inline">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
	</body>

</html>

效果图：

bootstrap按钮：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</head>

	<body>
		<!--bootstrap按钮-->
		<a class="btn btn-default" href="#" role="button">确定</a>
		<button type="button" class="btn btn-danger" disabled="disabled">（危险）</button>
	</body>

</html>

效果图：

bootstrap导航条：

<!--bootstrap导航条-->
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- 导航图标及汉堡按钮 -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      	<!-- 阅读器专用的样式 -->
        <span class="sr-only">这是汉堡按钮</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="navbar-brand" href="#">首页</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-expanded="false">更多 <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="#">我们的电话</a>
								</li>
								<li>
									<a href="#">我们的宗旨</a>
								</li>
								<li>
									<a href="#">我们的环境</a>
								</li>
								<!-- 分割线 -->
								<li class="divider"></li>
								<li>
									<a href="#">我们的地址</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">您的建议</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-right" role="search">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入信息">
						</div>
						<button type="submit" class="btn btn-default">查询</button>
					</form>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>

效果图：

bootstrap轮播图：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</head>

	<body>
		<!--bootstrap轮播图-->
		<!--data-interval代表轮播图自动切换时间-->
		<!--若有多个轮播图需要赋予唯一id-->
		<div id="lunbotu1" class="carousel slide" data-ride="carousel" data-interval="1000">
			<!-- 定位小圆点 -->
			<ol class="carousel-indicators">
				<!-- data-target和上面的轮播图id一致 -->
				<li data-target="#lunbotu1" data-slide-to="0" class="active"></li>
				<li data-target="#lunbotu1" data-slide-to="1"></li>
				<li data-target="#lunbotu1" data-slide-to="2"></li>
			</ol>

			<!-- 轮播图 图片主体部分 -->
			<div class="carousel-inner" role="listbox">
				<!--active表示先显示-->
				<div class="item active">
					<img src="img/图片一.jpg" alt="...">
					<div class="carousel-caption">
						这是图片一的说明信息
					</div>
				</div>
				<div class="item">
					<img src="img/图片二.jpg" alt="...">
					<div class="carousel-caption">
						这是图片二的说明信息
					</div>
				</div>
				<div class="item">
					<img src="img/图片三.jpg" alt="...">
					<div class="carousel-caption">
						这是图片三的说明信息
					</div>
				</div>
			</div>

			<!-- 左右控制按钮 -->
			<!-- href也需要更改和轮播图id一致 -->
			<a class="left carousel-control" href="#lunbotu1" 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="#lunbotu1" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</body>

</html>

效果图：

bootstrap排版：

<!--bootstrap排版-->
		<div class="text-center">
			今天天气好晴朗
		</div>

bootstrap表单：

<div class="form-group">
			<label for="exampleInputEmail1">Email address</label>
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
		</div>
		<form class="form-horizontal">
			<!-- 空格隔开 has-error表单表示正确的样式 -->
			<div class="form-group has-success">
				<label for="inputEmail3" class="col-sm-2 control-label">用户名：</label>
				<div class="col-sm-3">
					<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
				</div>
			</div>
			<!-- has-error表单表示错误的样式 -->
			<div class="form-group has-error">
				<label for="inputPassword3" class="col-sm-2 control-label">密码：</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
          <input type="checkbox"> 记住密码
        </label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">登录</button>
				</div>
			</div>
		</form>

效果图：

bootstrap分页：

<!--bootstrap分页-->
		<nav>
			<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>
				<!--active激活状态-->
				<li class="active">
					<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>

效果图：

最终集合： 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
	</head>

	<body>
		<!--bootstrap列表-->
		<ul class="list-inline">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
		<!--bootstrap按钮-->
		<a class="btn btn-default" href="#" role="button">确定</a>
		<button type="button" class="btn btn-danger" disabled="disabled">（危险）</button>
		<!--bootstrap导航条-->
		<nav class="navbar navbar-inverse">
			<div class="container-fluid">
				<!-- 导航图标及汉堡按钮 -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      	<!-- 阅读器专用的样式 -->
        <span class="sr-only">这是汉堡按钮</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="navbar-brand" href="#">首页</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-expanded="false">更多 <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li>
									<a href="#">我们的电话</a>
								</li>
								<li>
									<a href="#">我们的宗旨</a>
								</li>
								<li>
									<a href="#">我们的环境</a>
								</li>
								<!-- 分割线 -->
								<li class="divider"></li>
								<li>
									<a href="#">我们的地址</a>
								</li>
								<li class="divider"></li>
								<li>
									<a href="#">您的建议</a>
								</li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-right" role="search">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="请输入信息">
						</div>
						<button type="submit" class="btn btn-default">查询</button>
					</form>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>
		<!--bootstrap轮播图-->
		<!--data-interval代表轮播图自动切换时间-->
		<!--若有多个轮播图需要赋予唯一id-->
		<div id="lunbotu1" class="carousel slide" data-ride="carousel" data-interval="1000">
			<!-- 定位小圆点 -->
			<ol class="carousel-indicators">
				<!-- data-target和上面的轮播图id一致 -->
				<li data-target="#lunbotu1" data-slide-to="0" class="active"></li>
				<li data-target="#lunbotu1" data-slide-to="1"></li>
				<li data-target="#lunbotu1" data-slide-to="2"></li>
			</ol>

			<!-- 轮播图 图片主体部分 -->
			<div class="carousel-inner" role="listbox">
				<!--active表示先显示-->
				<div class="item active">
					<img src="img/图片一.jpg" alt="...">
					<div class="carousel-caption">
						这是图片一的说明信息
					</div>
				</div>
				<div class="item">
					<img src="img/图片二.jpg" alt="...">
					<div class="carousel-caption">
						这是图片二的说明信息
					</div>
				</div>
				<div class="item">
					<img src="img/图片三.jpg" alt="...">
					<div class="carousel-caption">
						这是图片三的说明信息
					</div>
				</div>
			</div>

			<!-- 左右控制按钮 -->
			<!-- href也需要更改和轮播图id一致 -->
			<a class="left carousel-control" href="#lunbotu1" 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="#lunbotu1" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<!--bootstrap排版-->
		<div class="text-center">
			今天天气好晴朗
		</div>
		<!--bootstrap表单-->
		<div class="form-group">
			<label for="exampleInputEmail1">Email address</label>
			<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
		</div>
		<form class="form-horizontal">
			<!-- 空格隔开 has-error表单表示正确的样式 -->
			<div class="form-group has-success">
				<label for="inputEmail3" class="col-sm-2 control-label">用户名：</label>
				<div class="col-sm-3">
					<input type="email" class="form-control" id="inputEmail3" placeholder="用户名">
				</div>
			</div>
			<!-- has-error表单表示错误的样式 -->
			<div class="form-group has-error">
				<label for="inputPassword3" class="col-sm-2 control-label">密码：</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
          <input type="checkbox"> 记住密码
        </label>
					</div>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-default">登录</button>
				</div>
			</div>
		</form>
		<!--bootstrap分页-->
		<nav>
			<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>
				<!--active激活状态-->
				<li class="active">
					<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>
	</body>

</html>

 

小仓桑
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap样式
09-29
bootstrap样式和时间bootstrap样式和时间bootstrap样式和时间bootstrap样式和时间
Bootstrap基本样式学习笔记之图片(6)
09-01
这篇“Bootstrap基本样式学习笔记之图片(6)”将深入探讨如何使用Bootstrap来定制和优化图片样式。 首先，Bootstrap图片基本样式通常涉及以下几种类型： 1. **原始图片**: 默认情况下，Bootstrap中的图片会保持其...
BootStrap基本样式
10-13 253
Bootstrap基本样式的使用 一、准备工作 1，响应式布局 Bootstrap是一种响应式布局框架，可以自动适配不同设备大小的显示模式，使用方式：在head标签中引入以下代码： <meta name="viewport" content="width=device-width, initial-scale=1"> 其中 initial-scale=1表...
Bootstrap基本样式
lxy123456qqq的博客
08-23 311
一、按钮样式 1.类 btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式（未被操作） .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作
Bootstrap样式
六月星海的博客
04-01 623
1.Bootstrap的使用场景PC端、移动端、响应式网页、后台网页等2.注意事项：从3.x版本开始网页头部必须多加一行代码：&lt;meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /&gt; 意思是：默认情...
BootStrap基础之常用样式总结
Satosere的博客
11-15 1922
BootStrap基础之常用样式总结 文章目录BootStrap基础之常用样式总结前言一、简介二、优点2.1 定义了很多的css样式和js插件。直接可以使用这些样式和插件得到丰富的页面效果2.2 支持响应式布局，同一套页面可以兼容不同分辨率的设备。三、常用的CSS样式3.1 容器3.1.1 container-fluid3.1.2 container3.2 栅格系统(极其有用)3.2.1 简介3.2.2 语法3.2.3 设备代号 前言 我使用的是bootstrap4.3.1 一、简介 一个前端开发的
Bootstrap基本样式学习笔记之表格(2)
09-01
Bootstrap 的基本表格样式是 `.table` 类，它可以将表格的默认样式替换为Bootstrap的样式，使其更加美观和一致。下面是一个基础的Bootstrap表格的例子： ```html 序号 姓名 年龄 <!-- ... --> ``` ### 2...
Bootstrap基本样式学习笔记之表单(3)
09-01
在Bootstrap中，表单的基本样式主要依赖于预定义的CSS类。例如，在标题中提到的“样式1”中，我们看到了一个标准的登录界面，其HTML结构如下： ```html 用户名 用户名"> 密 码 密码"> 记住我吗...
Bootstrap基本样式学习笔记之按钮(4)
09-01
在本文中，我们将深入探讨Bootstrap中的一个关键组件——按钮（Buttons），特别是关于其基本样式和尺寸调节。 首先，让我们来看看按钮的基本样式。在Bootstrap中，任何HTML元素只要添加了`class="btn"`，就会自动...
Bootstrap基本样式学习笔记之标签(5)
09-01
首先，让我们回顾一下在Bootstrap中如何创建一个基本的标签。Bootstrap标签是通过`<span>`或`<button>`元素结合`.label`类来实现的。在提供的代码示例中，可以看到三种不同类型的标签： 1. `.label.label-danger`: ...
bootstrap比较新颖全面的样式模板
02-02
bootstrap比较新颖全面的样式模板，里面含有大量的bootstrap的样式
bootstraps样式包
10-19
本文件为网页前端设计资源库，资源包括全局css、fonts和js文件。
bootstrap 几套样式合集
03-21
bootstrap 样式合集，都可以用，有完整的例子，能用浏览器直接打开
两款漂亮的bootstrap分页样式
12-13
这是两款漂亮的bootstrap分页样式。他们在元素bootstrap3分页样式的基础上，通过简单的CSS3代码来对它进行美化，生成漂亮的分页样式。
Bootstrap3.0预定义样式
11-06
将整个网站扒下来的可以离线查看 比较好的一个版本 预定义样式 Bootstrap3.0
Bootstrap（二）基本样式
踟蹰千年的博客
10-19 370
表格 受支持的表格标签 受支持的表格标签列表以及使用方法。 标签 描述 &lt;table&gt; 包裹以表格形式展示数据的元素 &lt;thead&gt; 包含表头(&lt;tr&gt;) 的容器 &lt;tbody&gt; 包含表格内容(&lt;tr&gt;)的容器 &lt;tr&gt; 单元格 (&lt;td&gt; 或 &lt;t
bootstrap样式的整理
zhan19861022的专栏
04-02 7220
Bootstrap基本样式学习笔记 最近在项目中开始试用twitter的前端工具包bootstrap，目前只应用了它的css class，真的挺好用的，效果很清新，感觉很不错。在浏览basecss介绍时随便做了些笔记，故发篇blog以作备份，图片的效果应该没有官方地址清晰，这里附上传送门http://twitter.github.com/bootstrap/ 传图太麻烦了。。放弃。。
bootstrap常用样式整理
weixin_33963189的博客
01-17 256
栅栏模式 container 把页面切换成12格 xs sm md 分别用于 手机 平板 pc文字效果 <u>下划线</u> <del>删除</del> <s> 中划线</s>段落效果class ='text-lowercase'小写 class ='text...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值