當前位置：首頁 >

积累bootstrap的一些知识

發布時間：2023/12/15 22 豆豆

生活随笔收集整理的這篇文章主要介紹了积累bootstrap的一些知识小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.關于如何將3列內容對齊，如圖所示
可以用BootsTrap中的柵格系統來做并且設置col-md屬性
html代碼

<section id="tese"><div class="container"><div class="row"><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>銀聯支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>銀聯支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>銀聯支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>銀聯支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>銀聯支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>銀聯支付全程保障支付安全</p></div></div></a></div></div></div> </section>

css代碼

#tese{padding:50px 0;border-bottom: 1px solid #c0c0c0; } .icon-uniE907::before{content:"\e907"; } #tese i{font-size:34px; } #tese > .container > .row >div{margin-top:20px;margin-bottom:20px; }

2.如何將文字左右布局（如圖），這就要用到pull-left,pull-right來讓左右浮動,不會出現一上一下的情況。

html代碼

<section id="ljyy"><div class="container"><p class="pull-left"><i class="icon-uniE906"></i>現在有 <span>458</span>人在排隊,累計預約交易成功 <span>7409</span>次。什么是預約投標？<a href="">立即預約</a></p><p class="pull-right"><i class="icon-uniE905"></i>微金所企業宣傳片</p></div> </section>

css代碼

#ljyy{border-bottom:1px solid #c0c0c0; } #ljyy >.container p{line-height:50px;font-size:14px; } #ljyy >.container .pull-left span,#ljyy >.container .pull-left a{color:#E92322; } #ljyy >.container > .pull-left > a:hover{text-decoration: none; } .icon-unoE906:before{content:"\906"; }.icon-uniE905:before{content:"\e905"; }

3.如何做這種盒子中的柵格布局

<div class="col-xs-12 col-sm-6 col-md-4"><div class="panel panel-czbk"><div class="panel-heading">Panel heading without title</div><div class="panel-body"><h5>新手體驗表0008期</h5><div class="row"><div class="col-xs-6 text-left"><p>起步價</p><p><strong>1000.00</strong><sub>萬</sub></p></div><div class="col-xs-6 text-right"><p>起步價</p><p><strong>1000.00</strong><sub>萬</sub></p></div><div class="col-xs-6 text-left"><p>起步價</p><p><strong>1000.00</strong><sub>萬</sub></p></div><div class="col-xs-6 text-right"><p>起步價</p><p><strong>1000.00</strong><sub>萬</sub></p></div></div></div></div></div>

css代碼，因為p標簽在bootstrap中自帶margin-bottom10像素，所以會被撐開，我們將他消除。

#products > .container > .tab-content p{margin-bottom:0px; }

4如何實現tab選項卡加下拉菜單的樣式并且點擊下拉菜單也可以進行跳轉如圖

<ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li><li role="presentation" class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">落下</a><ul class="dropdown-menu" aria-labelledby="myTabDrop1" ><li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown2">@fat</a></li><li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li></ul></li></ul><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home">...</div><div role="tabpanel" class="tab-pane" id="profile">.21</div><div role="tabpanel" class="tab-pane" id="messages">.212.</div><div role="tabpanel" class="tab-pane" id="dropdown1">bbbbb</div><div role="tabpanel" class="tab-pane" id="dropdown2">aaaaaaaa</div></div>

5.針對這種縮放之后超出了手機屏幕寬度（如圖），我們可以采用overflow-x:scroll,給他添加橫向滾動條，

首先解決排版亂的問題，因為父元素沒有寬度，所以先動態設置一個寬度

/*控制標簽頁的標簽容器寬度*/var $ulContainer = $('.nav-tabs');//獲取所有子元素的寬度和var width = 30; //因為原本ul上有padding-left:20//遍歷子元素$ulContainer.children().each(function(index,element){//console.log(element.clientWidth)width += element.clientWidth;});//此時width等于所有li寬度的總和$ulContainer.css('width',width);

這樣就讓字在同一行顯示了，并會出現上面超出手機寬度的問題，如何解決給父元素添加一行css代碼

#products > .container >.ul-wapper{overflow-x: scroll; }

這下就沒有下面的橫向滾動條了。
6.如何修改radio默認樣式如圖，其實就是偽元素的應用

html代碼

css代碼

input[type="radio"]:hover, input[type="radio"]:focus {outline: none; } .radio_type {width: 20px;height: 20px;appearance: none;position: relative; } .radio_type:before {content: "";width: 15px;height: 15px;border: 1px solid #000;display: inline-block;border-radius: 50%;vertical-align: middle; } .radio_type:checked::before {content: "";width: 15px;height: 15px;border: 1px solid #c30e23;display: inline-block;border-radius: 50%;vertical-align: middle; } .radio_type:checked::after {content: "";width: 9px;height: 9px;text-align: center;background: #c30e23;border-radius: 50%;display: block;position: absolute;top: 8px;left: 3px; }

總結

以上是生活随笔為你收集整理的积累bootstrap的一些知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。