Bootstrap书籍分类
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap书籍分类
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄：
案例1：首頁輪播圖實現
案例2：首頁書籍分類實現
案例3：首頁新書上架&熱門書籍實現
案例4：首頁整合
案例5：實現登錄
案例1：首頁輪播圖實現
<title>案例1：首頁輪播圖實現</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手機端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表彈性擴大占用父容器剩余空間 設置為0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}</style></head><body><!-- 導航條組件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，歡迎來到xx的廢品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首頁<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登錄</a></li><li class="nav-item"><a class="nav-link" href="#">注冊</a></li><li class="nav-item"><a class="nav-link">我的購物車</a></li></ul></div></div></nav><!-- 大致思路：第一行為搜索區域第二行左3 為書籍分類右9 上為輪播圖下為新書上架-熱門書籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索區域 --><!-- 表單組件 --><form><div class="form-group"><!-- 輸入框組組件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="書籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查詢</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" style="background-color: skyblue;"><div class="col-3">書籍分類</div><div class="col-9" style="background-color: greenyellow;"><div class="row"><div class="col"><!-- 上輪播圖 --><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li><li data-target="#carouselExampleIndicators" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="img/lb1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb3.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb4.jpeg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button"data-target="#carouselExampleIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button"data-target="#carouselExampleIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></div></div><div class="row" style="background-color: deeppink;"><div class="col">下新書上架-熱門書籍</div></div></div></div></div><!-- 引入jQuery的類庫 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的類庫 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
?案例2：首頁書籍分類實現
<title>案例2：首頁書籍分類實現</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手機端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表彈性擴大占用父容器剩余空間 設置為0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}</style></head><body><!-- 導航條組件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，歡迎來到xx的廢品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首頁<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登錄</a></li><li class="nav-item"><a class="nav-link" href="#">注冊</a></li><li class="nav-item"><a class="nav-link">我的購物車</a></li></ul></div></div></nav><!-- 大致思路：第一行為搜索區域第二行左3 為書籍分類右9 上為輪播圖下為新書上架-熱門書籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索區域 --><!-- 表單組件 --><form><div class="form-group"><!-- 輸入框組組件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="書籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查詢</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" style="background-color: skyblue;"><div class="col-3"><!-- 書籍分類 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">書籍分類</a><a href="#" class="list-group-item list-group-item-action">懸疑/a><a href="#" class="list-group-item list-group-item-action">歷史文學</a><a href="#" class="list-group-item list-group-item-action">科幻</a><a href="#" class="list-group-item list-group-item-action ">言情</a><a href="#" class="list-group-item list-group-item-action ">青春讀物</a><a href="#" class="list-group-item list-group-item-action ">都市</a><a href="#" class="list-group-item list-group-item-action ">教育</a><a href="#" class="list-group-item list-group-item-action ">兒童繪本</a><a href="#" class="list-group-item list-group-item-action list-group-item-danger">二次元</a><a href="#" class="list-group-item list-group-item-action ">武俠</a></div></div><div class="col-9" style="background-color: greenyellow;"><div class="row"><div class="col">上輪播圖</div></div><div class="row" style="background-color: pink;"><div class="col">下新書上架-熱門書籍</div></div></div></div></div><!-- 引入jQuery的類庫 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的類庫 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
?案例3：首頁新書上架&熱門書籍實現
<title>案例3：首頁新書上架&熱門書籍實現</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手機端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表彈性擴大占用父容器剩余空間 設置為0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}/* 畫像 */.figure{text-align: center;}</style></head><body><!-- 導航條組件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，歡迎來到xx的廢品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首頁<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登錄</a></li><li class="nav-item"><a class="nav-link" href="#">注冊</a></li><li class="nav-item"><a class="nav-link">我的購物車</a></li></ul></div></div></nav><!-- 大致思路：第一行為搜索區域第二行左3 為書籍分類右9 上為輪播圖下為新書上架-熱門書籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索區域 --><!-- 表單組件 --><form><div class="form-group"><!-- 輸入框組組件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="書籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查詢</button></div></div></div></form></div></div><!-- 第二行 --><div class="row" style="background-color: skyblue;"><div class="col-3">書籍分類</div><div class="col-9" style="background-color: greenyellow;"><div class="row"><div class="col"><!-- 上輪播圖 --></div></div><!-- 下新書上架-熱門書籍 --><div class="row" style="background-color: yellow;"><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div></div><!-- 熱門書籍 --><div class="row" style="background-color: yellow;"><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div></div></div></div></div><!-- 引入jQuery的類庫 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的類庫 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
?案例4：首頁整合
<title>案例4：首頁整合</title><!-- 引入Bootstrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><!-- 支持手機端 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><style>.navbar-collapse {flex-grow: 0;/*1代表彈性擴大占用父容器剩余空間 設置為0表示不占用 在固定容器中*/}.ss {background-color: #DBDBDA;height: 100px;margin-top: 20px;}.form-group {width: 300px;margin-top: 31px;margin-left: auto;margin-right: auto;}/* 畫像 */.figure {text-align: center;margin-top: 20px;}/* 書籍分類上間距 */.list-group{margin-top: 30px;}/* 輪播圖上間距 */#carouselExampleIndicators{margin-top: 30px;}/* 輪播圖 指示燈樣式-背景顏色*/.carousel-indicators li{background-color: blue;}/* 新書上架-熱門書籍樣式 */.xxx{margin-top: 20px;/* 外上間距 */color: white;/* 字體顏色 */background-image: url(img/title_bj.png);/* 背景圖片 */background-repeat: no-repeat;/* 不平鋪 */font-size: 20px;/* 字體大小 */padding-left: 15px;/* 內左間距 */}</style></head><body><!-- 導航條組件 --><nav class="navbar navbar-expand-lg navbar-light bg-light"><!-- 固定容器 --><div class="container"><a class="navbar-brand" href="#">您好，歡迎來到xx的廢品回收站</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">首頁<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">登錄</a></li><li class="nav-item"><a class="nav-link" href="#">注冊</a></li><li class="nav-item"><a class="nav-link">我的購物車</a></li></ul></div></div></nav><!-- 大致思路：第一行為搜索區域第二行左3 為書籍分類右9 上為輪播圖下為新書上架-熱門書籍--><!-- 固定容器 --><div class="container"><!-- 第一行 --><div class="row ss"><div class="col"><!-- 搜索區域 --><!-- 表單組件 --><form><div class="form-group"><!-- 輸入框組組件 --><div class="input-group mb-3"><input type="text" class="form-control" placeholder="書籍名"aria-label="Recipient's username" aria-describedby="button-addon2"><div class="input-group-append"><button class="btn btn-primary" type="button" id="button-addon2">查詢</button></div></div></div></form></div></div><!-- 第二行 --><div class="row"><div class="col-3"><!-- 書籍分類 --><div class="list-group"><a href="#" class="list-group-item list-group-item-action active" aria-current="true">書籍分類</a><a href="#" class="list-group-item list-group-item-action">懸疑</a><a href="#" class="list-group-item list-group-item-action">歷史文學</a><a href="#" class="list-group-item list-group-item-action">科幻</a><a href="#" class="list-group-item list-group-item-action ">言情</a><a href="#" class="list-group-item list-group-item-action ">青春讀物</a><a href="#" class="list-group-item list-group-item-action ">都市</a><a href="#" class="list-group-item list-group-item-action ">教育</a><a href="#" class="list-group-item list-group-item-action ">兒童繪本</a><a href="#" class="list-group-item list-group-item-action ">二次元</a><a href="#" class="list-group-item list-group-item-action ">武俠</a></div></div><div class="col-9"><div class="row"><div class="col"><!-- 上輪播圖 --><div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li><li data-target="#carouselExampleIndicators" data-slide-to="3"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="img/lb1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb2.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb3.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="img/lb4.jpeg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button"data-target="#carouselExampleIndicators" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><button class="carousel-control-next" type="button"data-target="#carouselExampleIndicators" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></div></div><!-- 下新書上架-熱門書籍 --><div class="xxx">新書上架</div><div class="row"><div class="col"><figure class="figure"><img src="img/1.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/2.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/3.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/4.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/5.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div></div><!-- 熱門書籍 --><div class="xxx">熱門書籍</div><div class="row"><div class="col"><figure class="figure"><img src="img/6.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/7.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/8.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/9.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div><div class="col"><figure class="figure"><img src="img/3.png" class="figure-img img-fluid rounded" alt="..."><figcaption class="figure-caption">冷間諜</figcaption></figure></div></div></div></div></div><!-- 引入jQuery的類庫 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的類庫 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
?案例5：實現登錄
<title>登錄</title><!-- 引入Booststrap的CSS --><link rel="stylesheet" type="text/css" href="css/bootstrap.css"/><!-- 支持手機端 --><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style>form{width: 300px;/* 寬度 *//* 左右自適應 */margin-left: auto;margin-right: auto;text-align:center ;/* 水平居中 */margin-top: 120px;/* 上間距 */}/* 按鈕的寬度 */form button{width: 300px;}/* 下間距 */form h2{margin-bottom: 20px;}</style></head><body><form><h2>用戶登錄</h2><div class="form-group"><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"></div><div class="form-group"><input type="password" class="form-control" id="exampleInputPassword1"></div><div class="form-group form-check"><input type="checkbox" class="form-check-input" id="exampleCheck1"><label class="form-check-label" for="exampleCheck1">Remember me</label></div><button type="submit" class="btn btn-primary">登錄</button><div class="form-group "><label class="form-check-label" for="exampleCheck1">©2007-2022</label></div></form><!-- 引入jQuery的類庫 --><script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script><!-- 引入Bootstrap的類庫 --><script src="js/bootstrap.js" type="text/javascript" charset="UTF-8"></script>效果如下：
?
總結
以上是生活随笔為你收集整理的Bootstrap书籍分类的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7远程服务器发生身份验证错误，要求
- 下一篇： Elasticsearch对数字检索——