響應式佈局 Bootstrap（01）

時間 2019-11-19

原文原文鏈接

1.是什麼？Bootstrap，來自 Twitter，是目前最受歡迎的前端框架，Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷 css

Bootstrap 插件所有依賴 jQuery html

<!DOCTYPE html>
<html lang="zh-cn">  //lang屬性指定當前頁面所用的天然語言 注意是爲瀏覽器自動翻譯提供基礎功能 屏幕閱讀軟件的基礎發音
  <head>
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  //爲小IE存在 跨IE瀏覽器兼容性級別 啓動內核
    <meta name="viewport" content="width=device-width, initial-scale=1">// 重點 （view ）視口的概念  
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> //讓老IE兼容H5新標籤

      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>//讓老IE支持媒體查詢
  </head>
  <body>
    <h1>你好，世界！</h1>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> //這個很少說 jq
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

官網抓來的模板註釋補上，另外爲了方便使用bootlint 須要copy一段啓動代碼，見boot中文網前端

2.css類html5

全局css jquery

按鈕
.btn block .btn-default
.btn .btn-color（ 5種基礎顏色） .btn-lg/sm/xs
（關於size的class）

圖片 .img-circle .img-thumbnail img-responsive .img-round

精彩繼續：bootstrap

列表 .list-unstyle .list-online

文字排版 .textcolor
5種基礎顏色 .bgcolor
5種基礎顏色 .text-uppercase 大寫
.text-lowercase 小寫
.text-capitalize 首字母大 .text-left 對齊方式
.text-right
.text-center
.text-justify

輔助類 .hidden[-lg][-md][-sm][-xs] .pull-left/right
左右浮動
.clearfix 清除浮動 .caret 三角箭頭
.close 關閉按鈕 .table
.tabke-bordered
.table-striped
.table-hover
.table-response

表單默認表單水平表單行內

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

按鈕	.btn block	.btn-default .btn	.btn-color（ 5種基礎顏色）	.btn-lg/sm/xs （關於size的class）
圖片	.img-circle	.img-thumbnail	img-responsive	.img-round

列表	.list-unstyle	.list-online
文字排版	.textcolor 5種基礎顏色	.bgcolor 5種基礎顏色	.text-uppercase 大寫 .text-lowercase 小寫 .text-capitalize 首字母大	.text-left 對齊方式 .text-right .text-center .text-justify
輔助類	.hidden[-lg][-md][-sm][-xs]	.pull-left/right 左右浮動 .clearfix 清除浮動	.caret 三角箭頭 .close 關閉按鈕	.table .tabke-bordered .table-striped .table-hover .table-response
表單	默認表單	水平表單	行內