bootstrap学习(二)页面
生活随笔
收集整理的這篇文章主要介紹了
bootstrap学习(二)页面
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
bootstrap學(xué)習(xí)(二)頁面
響應(yīng)式圖片:
//當(dāng)圖片大的時候,逐漸縮小瀏覽器大小,圖片會顯示為自適應(yīng)大小 ,img-responsive <div class="container"><div class="row"><img src="../static/1.jpg" class="img-responsive" alt=""></div> </div>標(biāo)題標(biāo)簽h
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> 或 <span class="h1">aaaaaa</span> <span class="h2">aaaaaa</span> <span class="h3">aaaaaa</span> <span class="h4">aaaaaa</span>副標(biāo)題:small
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> small標(biāo)簽會適應(yīng)前邊h標(biāo)簽的大小 自動顯示為小一號字體?
?
頁面主體:
Bootstrap 將全局?font-size?設(shè)置為?14px,line-height?設(shè)置為?1.428。這些屬性直接賦予?<body>?元素和所有段落元素。另外,<p>?(段落)元素還被設(shè)置了等于 1/2 行高(即 10px)的底部外邊距(margin)。
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff } p {margin: 0 0 10px }?
中心內(nèi)容:lead,強調(diào)p標(biāo)簽中的文本
.lead {margin-bottom: 20px;font-size: 16px;font-weight: 300;line-height: 1.4 }@media (min-width: 768px) {.lead {font-size: 21px} }?
對其方式:text-right? /text-conter/? ...
縮略語:abbr
<abbr title="跟我學(xué)習(xí)Bootstrap">學(xué)習(xí)bootstrap</abbr>?
?地址:
<address><strong>Twitter, Inc.</strong><br>1355 Market Street, Suite 900<br>San Francisco, CA 94103<br><abbr title="Phone">P:</abbr> (123) 456-7890 </address><address><strong>Full Name</strong><br><a href="mailto:#">first.last@example.com</a> </address>?
?
列表:
//無樣式列表 <ul class="list-unstyled"><li></li> </ul>//無序 <ul><li></li> </ul><ol><li></li> </ol>//內(nèi)聯(lián)列表 一行 <ul class="list-inline"><li></li> </ul>//有無class 區(qū)別:dt、dd標(biāo)簽內(nèi)容是否顯示在同一行 <dl class="dl-horizontal"><dt>標(biāo)題</dt><dd>標(biāo)題描述</dd> </dl>?
?
官方:https://v3.bootcss.com/css/#type
posted @ 2019-04-15 22:43 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏總結(jié)
以上是生活随笔為你收集整理的bootstrap学习(二)页面的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: bootstrap学习(一)栅格、布局
- 下一篇: spring-data-jpa 二、多对