Bootstrap03

• or
  1. 添加.list-unstyled从而删除浏览器默认列表样式，然后在li中添加.media元素块，也可以根据自己的需要进行间距调整

• or
  1. 添加.list-unstyled从而删除浏览器默认列表样式，然后在li中添加.media元素块，也可以根据自己的需要进行间距调整

 
 
<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
 
    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>
 

• or
  1. 添加.list-unstyled从而删除浏览器默认列表样式，然后在li中添加.media元素块，也可以根据自己的需要进行间距调整

 

<div class="media">
						<img class="align-self-center mr-3" style="width: 150px; height: 200px;" src="img/1.png"
							alt="Generic placeholder image">
						<div class="media-body">
							<h5 class="mt-0">冷间课</h5>
							<p>作者：亨宁曼凯尔</p>
							<p class="mb-0">价格：￥28.50</p>
							<p>出版社：江苏文艺出版社</p>
 
 
							<p>书籍简介：东野圭吾最钦佩的欧洲犯罪小说大师力作。把“哈利波特”拉下畅销榜榜首的侦探小说。
								最匪夷所思的历史真相、最错综复杂的政治斗争、最神秘莫测的间谍形象，最完美的罪犯与最完美的犯罪，
								结局你永远猜不到</p>
 
						</div>
					</div>

 

 

<table class="table table-hover">
								<thead>
									<tr style="background-color: pink; color: #007BFF;">
										<th scope="col"><input type="checkbox" />全选</th>
										<th scope="col">书籍名</th>
										<th scope="col">图片</th>
										<th scope="col">单价</th>
										<th scope="col">数量</th>
										<th scope="col">总价格</th>
										<th scope="col">操作</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th scope="row"><input type="checkbox" /></th>
										<td>冷间课</td>
										<td> <img src="img/1.png" / style="width: 100px;height: 150px;"> </td>
										<td>￥28.50</td>
										<td>
											<div class="input-group" style=" width:100px">
												<div class="input-group-prepend">
													<button class="btn btn-outline-secondary" style="width: 30px;"
														type="button">-</button>
												</div>
												<input type="text" placeholder="" style="width:40px;" aria-label=""
													aria-describedby="basic-addon1">
												<div class="input-group-append">
													<button class="btn btn-outline-secondary" style="width: 30px;"
														type="button">+</button>
												</div>
											</div>
 
										</td>
										<td>￥28.50</td>
										<td>
											<button type="button" class="btn btn-danger">移除</button>
 
										</td>
 
									</tr>
 
									<tr>
										<th scope="row"><input type="checkbox" /></th>
										<td>冷间课</td>
										<td> <img src="img/1.png" / style="width: 100px;height: 150px;"> </td>
										<td>￥28.50</td>
										<td>
											<div class="input-group" style=" width:100px">
												<div class="input-group-prepend">
													<button class="btn btn-outline-secondary" style="width: 30px;"
														type="button">-</button>
												</div>
												<input type="text" placeholder="" style="width:40px;" aria-label=""
													aria-describedby="basic-addon1">
												<div class="input-group-append">
													<button class="btn btn-outline-secondary" style="width: 30px;"
														type="button">+</button>
												</div>
											</div>
 
										</td>
										<td>￥28.50</td>
										<td>
											<button type="button" class="btn btn-danger">移除</button>
 
										</td>
									</tr>
 
 
 
 
								</tbody>
							</table>

 

 
 
$('#myModal').modal(options)
 

 启动一个动态视窗而无需编写JavaScript，在控制元素上设置data-toggle="modal"（如按钮），以及一个data-target="#foo" 或 href="#foo" 来指定特定的动态视窗进行切换

 
 
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
 

目录

 

##代码案例  

---

 
 
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
 
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>