Bootstrap03

最新推荐文章于 2022-06-04 20:15:47 发布

xxie编程

最新推荐文章于 2022-06-04 20:15:47 发布

阅读量156

点赞数

分类专栏： bootstrap 文章标签： elementui javascript webview

本文链接：https://blog.csdn.net/qq_63531917/article/details/124498171

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例1：实现搜索书籍页面（组件：媒体对象-Media object）

<div class="media">
	<img src="img/1.jpg" style="width: 100px;" class="mr-3" alt="...">
			 <div class="media-body">
			<h5 class="mt-0"><b>冷间谍</b></h5>
					<p>书籍价格：9.9</p>
							<p>书籍作者：张强屌丝</p>
							<p>书籍简介：夏日雁塔和</p>
							<p>
								<button class="btn btn-danger">加入购物车</button>
								<button class="btn btn-danger">立即购买</button>
							</p>
						</div>
					</div>

页面效果

案例2：实现购物车页面布局（页面内容：表格-Table）

                             <tr>
								<th scope="row">颜仲鸡</th>
								<td>9.9</td>
								<td><input type="text" value="1" /></td>
								<td>9.9</td>
								   <td><a href="#">删除</a></td>
							</tr>
							<tr>
								<th scope="row">妇女主任</th>
								<td>10</td>
								<td><input value="2"/></td>
								<td>20</td>
								<td><a href="#">删除</a></td>
							</tr>
							<tr>
								<th scope="row">啥</th>
								<td>12</td>
								<td><input value="2"/></td>
								<td>24</td>
								<td><a href="#">删除</a></td>
							</tr>

页面效果

案例3：实现购物车页面订单信息（组件：模态框-Modal）

首先要导入Modal框

<!-- Modal -->
		<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">
						订单信息
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary">确定</button>
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>

然后导入按钮

<p class="xxx">
						<button class="btn btn-danger">清空购物车</button>
						<button class="btn btn-success">继续购物</button>
						<button class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal">点我结算</button>
					</p>

案例4：图标组件的使用（扩展内容-图标）

首先我们要下载Bootstrap的图标库，然后压缩后会有一个文件夹，找到里面的font文件夹

把整个文件夹copy到我们要用到的jQuery页面中

引入后我们第一步要引入其图片的CSS

		<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css"/>
然后再进行代码的编写（可以进Bootstrap的图标库点击想要用的图标直接copy代码到想要用的地方即可）