bootstrap学习(二)页面
生活随笔
收集整理的這篇文章主要介紹了
bootstrap学习(二)页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
bootstrap學習(二)頁面
響應式圖片:
//當圖片大的時候,逐漸縮小瀏覽器大小,圖片會顯示為自適應大小 ,img-responsive <div class="container"><div class="row"><img src="../static/1.jpg" class="img-responsive" alt=""></div> </div>標題標簽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>副標題:small
<h1>h1. Bootstrap heading <small>Secondary text</small></h1> small標簽會適應前邊h標簽的大小 自動顯示為小一號字體?
?
頁面主體:
Bootstrap 將全局?font-size?設置為?14px,line-height?設置為?1.428。這些屬性直接賦予?<body>?元素和所有段落元素。另外,<p>?(段落)元素還被設置了等于 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 }?
中心內容:lead,強調p標簽中的文本
.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="跟我學習Bootstrap">學習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>//內聯列表 一行 <ul class="list-inline"><li></li> </ul>//有無class 區別:dt、dd標簽內容是否顯示在同一行 <dl class="dl-horizontal"><dt>標題</dt><dd>標題描述</dd> </dl>?
?
官方:https://v3.bootcss.com/css/#type
posted @ 2019-04-15 22:43 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏總結
以上是生活随笔為你收集整理的bootstrap学习(二)页面的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: bootstrap学习(一)栅格、布局
- 下一篇: spring-data-jpa 二、多对