『壹』 怎麼用普通的bootstrap做出這樣的效果(左側圖片右側文字),求大神做一個例子,謝謝!
為什麼要用bootstrap來做,用最基本的 html + css 就能實現啊:
HTML
<div class="content">
<div class="photo"><img src="images/ql36.jpg"></div>
<div class="intro">
<h3>一串單詞</h3>
<p class="summary">用記住一個單詞的時間,記住一串單詞</p>
<p class="size">共 21 篇文章</p>
</div>
CSS
.photo{
float:left;
width:20%;
}
.intro{
float:right;
width:80%;
求波關注,有問題私信我。
『貳』 bootstrap設置字體怎樣祛背景
1、在桌面上找到「我的電腦」圖標,點擊右鍵,找到「屬性」;彈出如下圖的對框。
2、切換到「高級」選項卡,之後點擊「性能」下面那「設置」按鈕,彈出對話框。
3、切換到「視覺效果」選項卡,之後選擇「自定義」。
4、在列表裡面找到「在桌面上為圖標標簽使用陰影」,在其前面打上一個√。
5、點擊「應用」和「確定」按鈕退出即可完成,這個時候,桌面上的圖標的文字,就不存在任何的背景顏色。
『叄』 Bootstrap 中文字和圖片交替排列
方法步驟:
1、把圖片作為背景,文字直接放上去就行,
2、使用相對定位也可以做到響應式的將文字放在圖片上。
3、下面還是後面,padding或者讓圖片做背景圖
『肆』 bootstrap圖片帶文字輪播怎麼寫啊,哪位大俠知道啊,謝謝了
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 小圓點指標 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 滾動圖片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="圖片路徑1" alt="...">
<div class="carousel-caption">
<h3>鄭鍋集團專業鍋爐70年</h3>
<p>詳情訪問 <a>http://www.ranyouranqiguolu.com </a></p>
</div>
</div>
<div class="item">
<img src="圖片路徑2" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- 切換控制 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">往前</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">往後</span>
</a>
</div>
『伍』 bootstrap導航中PC端是是圖片移動端是文字 怎麼實現的
利用響應式布局來實現的,也就是 css 當中 Media Queries,以及配合 meta 標簽的 viewport 來實現。
通過 Media Queries 來判斷設備寬度,來寫不同的樣式。
詳細建議網路 「Media Queries」 了解~
這里給出實現的思路:
題主給出的兩幅圖片可以當作兩個模塊:A和B,只是當設備寬度大於某個寬度時(中文官網v3版本是768px),B隱藏,A顯示。
(可以參考bootstrap中文文檔)
/*相當於B*/
.navbar-toggle{/*小於768px時*/
position:relative;
float:right;
padding:9px10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
background-image:none;
border:1pxsolidtransparent;
border-radius:4px;
}
@media(min-width:768px){/*大於768px時*/
.navbar-toggle{
display:none
}
}
/*相當於A*/
.collapse{/*小於768px時*/
display:none;
visibility:hidden;
}
@media(min-width:768px){/*大於768px時*/
.navbar-collapse.collapse{
display:block!important;
height:auto!important;
padding-bottom:0;
overflow:visible!important;
visibility:visible!important;
}
}
『陸』 bootstrap的字體圖標怎麼引入
bootstrap引用圖標的方法:
1、下載包並解壓,在『elegant_font』文件夾中會發現「HTML CSS」子文件夾,把它復制到你的項目中。
2、將連接添加到『style.css』,html里添加一個圖標,內容如下:<span class="glyphicon glyphicon-search" aria-hidden="true"></span>,<link rel="stylesheet" href="path/to/elegant-font/style.css">,可以在你HTML里添加圖標,並且使用CSS來更改它們的樣式:<span aria-hidden="true" class="icon_pencil"></span>。
『柒』 bootstrap 導航條 如何添加上圖片,我添加一個圖片,如圖,看著特別別扭,如何修改
為兩個圖片增加如下的樣式即可:
.img-fix{vertical-align:-2px;}/*-2px可根據實際再調整,直到文字居中對齊圖片*/
『捌』 bootstrap使用方法
面板樣式是在很多種情況下都可能會使用到的樣式之一,例如博客的側邊欄、企業網站的公告欄、欄目列表等。
面板樣式除了內容之外,還有一個面板頭部可以添加標題,讓我們通過這篇文章看看Bootstrap面板樣式的使用方法。
Bootstrap面板基本樣式
直接調用面板樣式也非常容易,只需要通過以下代碼即可實現:
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
該樣式僅僅包含了面板樣式的內容部分,而沒有加入頭部,適用於不需要頭部的面板內容。
Bootstrap面板帶標題樣式
上面提到的面板樣式是沒有帶標題的,在一些情況下不夠用,所以Bootstrap面板還提供了帶有標題的面板樣式,讓我們看看應該怎麼去使用:
<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div>
上面這一部分代碼是最為標準的帶有標題的面板結構,為了適應閱讀設備以及SEO搜索引擎優化元素,最好將標題放入h1-h5的標簽中。
Bootstrap面板帶注腳樣式
如果一些解釋說明類的文字無法在面板標題很好地表現出來,可以通過注腳的形式來進行說明,Bootstrap面板同樣提供了注腳這個樣式:
<div class="panel panel-default"> <div class="panel-body"> 面板內容 </div> <div class="panel-footer">面板注腳</div> </div>
通過主次關系來進行標題或者是注腳的選擇,是用好面板組件的關鍵。
Bootstrap面板有意義的樣式
和其他Bootstrap組件一樣,Bootstrap面板樣式同樣具有有意義的樣式,通過引用這幾個樣式可以將該面板的作用直觀展現出來,同樣也是那幾種顏色和樣式名稱:
<div class="panel panel-primary">主要面板樣式</div> <div class="panel panel-success">成功面板樣式</div> <div class="panel panel-info">信息面板樣式</div> <div class="panel panel-warning">警告面板樣式</div> <div class="panel panel-danger">危險面板樣式</div>
Bootstrap面板與表格結合
如果你需要在面板中引入表格樣式,那麼也可以很方便地實現:
<div class="panel panel-default"> <div class="panel-heading">面板標題</div> <table class="table"> 表格內容 </table> </div>
Bootstrap面板與列表結合
就像開頭所說的一樣,如果你想要在面板中引入列表,那也真是再合適不過了,通過以下代碼便可輕松實現:
<div class="panel panel-default"> <div class="panel-heading">面板標題</div> <div class="panel-body"> <p>面板內容簡介</p> </div> <ul class="list-group"> <li class="list-group-item">列表項目1</li> <li class="list-group-item">列表項目2</li> <li class="list-group-item">列表項目3</li> <li class="list-group-item">列表項目4</li> <li class="list-group-item">列表項目5</li> </ul> </div>
『玖』 全面解析Bootstrap排版使用方法(文字樣式)
一、段落
段落是排版中另一個重要元素之一。在Bootstrap中為文本設置了一個全局的文本樣式(這里所說的文本是指正文文本):
1、全局文本字型大小為14px(font-size)。
2、行高為1.42857143(line-height),大約是20px(大家看到一串的小數或許會有疑惑,其實他是通過LESS編譯器計算出來的,當然Sass也有這樣的功能)。
3、顏色為深灰色(#333);
二、文字樣式
在實際項目中,對於一些重要的文本,希望突出強調的部分都會做另外的樣式處理。Bootstrap同樣對這部分做了一些輕量級的處理。
如果想讓一個段落p突出顯示,可以通過添加類名「.lead」實現,其作用就是增大文本字型大小,加粗文本,而且對行高和margin也做相應的處理。
1.粗體:在Bootstrap中,可以使用<b>和<strong>標簽讓文本直接加粗。
2.斜體:在Bootstrap中,可以使用<em>或<i>來實現文本斜體。
三、強調類
.text-muted:提示,使用淺灰色(#999)
.text-primary:主要,使用藍色(#428bca)
.text-success:成功,使用淺綠色(#3c763d)
.text-info:通知信息,使用淺藍色(#31708f)
.text-warning:警告,使用黃色(#8a6d3b)
.text-danger:危險,使用褐色(#a94442)
<div
class="text-muted">.text-muted
效果</div>
<div
class="text-primary">.text-primary效果</div>
<div
class="text-success">.text-success效果</div>
<div
class="text-info">.text-info效果</div>
<div
class="text-warning">.text-warning效果</div>
<div
class="text-danger">.text-danger效果</div>
效果如下:
四、文本對齊
在排版中離不開文本的對齊方式。在CSS中常常使用text-align來實現文本的對齊風格的設置。其中主要有四種風格:
☑
左對齊,取值left
☑
居中對齊,取值center
☑
右對齊,取值right
☑
兩端對齊,取值justify
為了簡化操作,方便使用,Bootstrap通過定義四個類名來控制文本的對齊風格:
☑
.text-left:左對齊
☑
.text-center:居中對齊
☑
.text-right:右對齊
☑
.text-justify:兩端對齊
有了文字樣式,使得排版效果更清晰簡潔,希望大家在自己的作品中多使用一些簡單大方的文字樣式,使作品脫穎而出,更加具有吸引力。