Bootstrap页面布局

书籍页面

<title>案例1:实现搜索页面</title>
	    <!-- 引入Bootstrap的css(样式) -->
	    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">   
		<style type="text/css">
		    .navbar-collapse{
				flex-grow:0;/* 固定容器中 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
			}
			.form-group{
				width:300px;/* 宽度 */
				margin-left:auto;/*左间距自适应 自动  */
				margin-right:auto;/*右间距自适应 自动  */
				margin-top:31px;/* 100-38=62/2=31px */
				margin-bottom:auto;
			}
			.input-group{
				margin-left:auto;
				margin-right:auto;
				width:300px;
				margin-top:30px;
			}	
			.ss{
				height:100px;/*高度 */
				margin-top:30px;/* 上间距 */
				background-color:#6F6E64;/* 背景颜色 */
			}
			/* 列表组-上间距 */
			.list-group,.media{
			margin-top:30px;/* 上间距 */
			}
			.media-body p{
				line-height:15px;
				letter-spacing:5px;
			}
			.media-body p button{
				height:30px;
				line-height:10px;
			}

购物页面