Bootstrap快速入门之媒体对象&表格&模态框&图标&滚动监听

最新推荐文章于 2022-06-15 22:45:34 发布

ning_ning_03

最新推荐文章于 2022-06-15 22:45:34 发布

阅读量718

点赞数 1

文章标签： bootstrap html javascript

本文链接：https://blog.csdn.net/m0_67768699/article/details/124558363

版权

案例1：实现搜索书籍页面

组件：媒体对象-Media object

1.什么是媒体对象

媒体对象是一些抽象元素，是用来建立一些略显复杂繁琐同时又高度重复使用的组件（比如说博客评论、推文模块等）之基础。它支持左对齐内容、右对齐内容、内容对齐选项、嵌套等。

2.列表媒体示例

在<ul> or <ol>添加.list-unstyled从而删除浏览器默认列表样式，然后在li中添加.media元素块

	<!-- 右9-轮播图&新书上架&热门书籍 -->
	<div class="row">
		<div class="col">

		<div id="">
				<ul class="list-unstyled">
					<li class="media">
					<img class="align-self-center mr-3" src="img/1.png"
											alt="Generic placeholder image">
						<div class="media-body">
							<p>
							<h4 class="mt-0 mb-1">冷间客</h4>
							</p>
							<p>作者：落下的流星雨</p>
							<p>价格：&yen;899</p>
							<p>出版社：凤凰出版社</p>
							<p>作品简介：落下的流星雨随即而失去</p>
							<p><button style="width: 120px;"
													class="btn-danger">加入购物车</button>&nbsp;&nbsp;&nbsp;<button
													style="width: 120px;" class="btn-secondary">立即结算</button></p>

							</div>
							</li>
							<hr>
							<li class="media">
								<img class="align-self-center mr-3" src="img/1.png"
											alt="Generic placeholder image">
								<div class="media-body">
									<p>
									<h4 class="mt-0 mb-1">狂人日记</h4>
									</p>
									<p>作者：糯米团团</p>
									<p>价格：&yen;887</p>
									<p>出版社：清华出版社</p>
									<p>作品简介：落下的流星雨随即而失去</p>
									<p><button style="width: 120px;"
													class="btn-danger">加入购物车</button>&nbsp;&nbsp;&nbsp;<button
													style="width: 120px;" class="btn-secondary">立即结算</button></p>

							</div>
							</li>
						<hr>
					      </ul>
					</div>
				</div>
			</div>

案例2：实现购物车页面布局

页面内容：表格-Table

1.表格样式

表格样式及响应式优先于BootStrap全局的其它JavaScript事件

2.表格样式示例

只需要向某个<table>添加一个基类.table，然后通过自定义样式或系统提供的class来起作用。

<table class="table">
	<thead>
		<tr>
			<th><input type="checkbox">全选</th>
			<th>商品名称</th>
			<th>商品图片</th>
			<th>商品单价</th>
			<th>商品数量</th>
			<th>商品总价</th>
			<th>商品操作</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox"></td>
			<td>无间道</td>
			<td><img src="img/1.png" alt=""></td>
			<td>&yen;778</td>
			<td>
				<div style="width: 100px;" class="input-group mb-3">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
					</div>
					<input type="text" class="form-control" value="1" aria-label="Recipient's username"
						aria-describedby="button-addon2">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button" id="button-addon2">+</button>
					</div>
				</div>
			</td>
			<td>&yen;999</td>
			<td>
				<button type="button" class="btn-warning">删除</button>
				<button type="button" class="btn-primary">修改</button>
			</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>无间道</td>
			<td><img src="img/1.png" alt=""></td>
			<td>&yen;778</td>
			<td>
				<div style="width: 100px;" class="input-group mb-3">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
					</div>
					<input type="text" class="form-control" value="1" aria-label="Recipient's username"
						aria-describedby="button-addon2">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button" id="button-addon2">+</button>
					</div>
				</div>
			</td>
			<td>&yen;999</td>
			<td>
				<button type="button" class="btn-warning">删除</button>
				<button type="button" class="btn-primary">修改</button>
			</td>
		</tr>
		<tr>
			<td><input type="checkbox"></td>
			<td>无间道</td>
			<td><img src="img/1.png" alt=""></td>
			<td>&yen;778</td>
			<td>
				<div style="width: 100px;" class="input-group mb-3">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
					</div>
					<input type="text" class="form-control" value="1" aria-label="Recipient's username"
						aria-describedby="button-addon2">
					<div class="input-group-append">
						<button class="btn btn-outline-secondary" type="button" id="button-addon2">+</button>
					</div>
				</div>
			</td>
			<td>&yen;999</td>
			<td>
				<button type="button" class="btn-warning">删除</button>
				<button type="button" class="btn-primary">修改</button>
			</td>
		</tr>
	</tbody>
</table>

案例3：实现购物车页面订单信息

1.模态框的工作原理

（1）弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从<body>中删除滚动事件，以便模态框自身的内容能得到滚动。

（2）点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。

（3）Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为我们相信那样叠加会造成用户体验不佳。

（4）模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，会造成无法布局。

2. 模态框示例

<!-- Modal -->
				<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
				  <div class="modal-dialog modal-lg" role="document">
				    <div class="modal-content">
				      <div class="modal-header">
				        <h5 class="modal-title" id="exampleModalLongTitle">结算页</h5>
				        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				          <span aria-hidden="true">&times;</span>
				        </button>
				      </div>
				      <div class="modal-body">
				        <form>
				          <div class="form-row">
				            <div class="form-group col-md-6">
				              <label for="inputEmail4">Email邮件：</label>
				              <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
				            </div>
				            <div class="form-group col-md-6">
				              <label for="inputPassword4">密码：</label>
				              <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
				            </div>
				          </div>
				          <div class="form-group">
				            <label for="inputAddress">个人地址：</label>
				            <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
				          </div>
				          <div class="form-group">
				            <label for="inputAddress2">个人地址2：</label>
				            <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
				          </div>
				          <div class="form-row">
				            <div class="form-group col-md-6">
				              <label for="inputCity">城市：</label>
				              <input type="text" class="form-control" id="inputCity">
				            </div>
				            <div class="form-group col-md-4">
				              <label for="inputState">地区：</label>
				              <select id="inputState" class="form-control">
				                <option selected>Choose...</option>
				                <option>...</option>
				              </select>
				            </div>
				            <div class="form-group col-md-2">
				              <label for="inputZip">住址：</label>
				              <input type="text" class="form-control" id="inputZip">
				            </div>
				          </div>
				          <div class="form-group">
				            <div class="form-check">
				              <input class="form-check-input" type="checkbox" id="gridCheck">
				              <label class="form-check-label" for="gridCheck">
				                Check me out
				              </label>
				            </div>
				          </div>
				          <button type="submit" class="btn btn-primary">完成关闭</button>
				        </form>
						
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
				        <button type="button" class="btn btn-primary">确认订单</button>
				      </div>
				    </div>
				  </div>
				</div>

案例4：图标组件的使用

扩展内容-图标

导入图标插件实现图标（常规图标示例）

	<div id="">
			手表： <svg class="bi bi-watch" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
				xmlns="http://www.w3.org/2000/svg">
				<path fill-rule="evenodd"
					d="M4 14.333v-1.86A5.985 5.985 0 0 1 2 8c0-1.777.772-3.374 2-4.472V1.667C4 .747 4.746 0 5.667 0h4.666C11.253 0 12 .746 12 1.667v1.86A5.985 5.985 0 0 1 14 8a5.985 5.985 0 0 1-2 4.472v1.861c0 .92-.746 1.667-1.667 1.667H5.667C4.747 16 4 15.254 4 14.333zM13 8A5 5 0 1 0 3 8a5 5 0 0 0 10 0z" />
				<rect width="1" height="2" x="13.5" y="7" rx=".5" />
				<path fill-rule="evenodd"
					d="M8 4.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5H6a.5.5 0 0 1 0-1h1.5V5a.5.5 0 0 1 .5-.5z" />
			</svg>
			
		</div>

<div id="">
	
	WiFi： <svg class="bi bi-wifi" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor"
		xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd"
			d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z" />
		<path fill-rule="evenodd"
			d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z" />
		<path fill-rule="evenodd"
			d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z" />
	</svg>
</div>
<div id="">
	常规搜素： <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
		viewBox="0 0 16 16">
		<path
			d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
	</svg>
</div>

案例5：滚动监听

滚动监听(Scrollspy)

1.什么是滚动监听

滚动监听插件会根据滚动的位置，自动更新导航条的目标，以指示当前窗口中处于活动的状态。

2.滚动监听的工作原理

（1）它必须在Bootstrap nav 导航组年或 list group列表组上使用。

（2）Scrollspy 需要在你监控的元素上使用 position: relative; ，通常是 <body>。

（3）当需要对 <body>以外的元素进行监控时，请确保具有 height 高度值和 overflow-y: scroll; 属性。

（4）锚点 (<a>)是必须的，并且必须指向一个id上。

3.在navbar导航中的示例

滚动导航栏下方的区域，并观看活动列表的变化，下拉项目也会突出显示

  <div id="wokk">
		<nav id="navbar-example2" class="navbar navbar-light bg-light">
			<a class="navbar-brand" href="#">导航</a>
			<ul class="nav nav-pills">
				<li class="nav-item">
					<a class="nav-link" href="#fat">第一</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#mdo">第二</a>
				</li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
						aria-haspopup="true" aria-expanded="false">其他</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#one">one</a>
						<a class="dropdown-item" href="#two">two</a>
						<div role="separator" class="dropdown-divider"></div>
						<a class="dropdown-item" href="#three">three</a>
					</div>
				</li>
			</ul>
		</nav>
		<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
			<h4 id="fat">第一</h4>
			<p>糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯</p>
			<p>糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯</p>
			<p>糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯</p>
			<p>糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯糯</p>
			<h4 id="mdo">第二</h4>
			<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>
			<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>
			<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>
			<p>米米米米米米米米米米米米米米米米米米米米米米米米米米米米米米</p>
			<h4 id="one">one</h4>
			<p>团团团团团团团团团团团团团团团团团团团团团团团团团团团团</p>
			<p>团团团团团团团团团团团团团团团团团团团团团团团团团团团团</p>
			<p>团团团团团团团团团团团团团团团团团团团团团团团团团团团团</p>
			<h4 id="two">two</h4>
			<p>子子子子子子子子子子子子子子子子子子子子子子子子子子子</p>
			<p>子子子子子子子子子子子子子子子子子子子子子子子子子子子</p>
			<p>子子子子子子子子子子子子子子子子子子子子子子子子子子子</p>
			<h4 id="three">three</h4>
			<p>好好好好好好好好好好好好好好好好好好好好好好好好好好好</p>
			<p>好好好好好好好好好好好好好好好好好好好好好好好好好好好</p>
			<p>好好好好好好好好好好好好好好好好好好好好好好好好好好好</p>
		</div>
	</div>

ning_ning_03

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Bootstrap快速入门之媒体对象&表格&模态框&图标&滚动监听

案例1：实现搜索书籍页面1.什么是媒体对象2.列表媒体示例案例2：实现购物车页面布局1.表格样式2.表格样式示例案例3：实现购物车页面订单信息1.模态框的工作原理2. 模态框示例案例4：图标组件的使用导入图标插件实现图标（常规图标示例）案例5：滚动监听1.什么是滚动监听2.滚动监听的工作原理3.在navbar导航中的示例
复制链接

扫一扫