Bootstrap自學筆記

時間  2019-11-09
標籤 bootstrap 自學 筆記 欄目 Bootstarp 简体版
原文   原文鏈接

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<!-- 匹配移動端 移動端優先 -->
<!-- 手機瀏覽器是把頁面放在一個虛擬的窗口-viewport
content:內容
device:設備
width:控制viewport的大小，通常狀況下指定爲device-width(單位爲縮放爲100%的CSS像素),也能夠指定一個固定的值例如600.css

height:和width相應,指定高度。html

initial-scal:初始縮放比例,頁面第一次load的時候的縮放比例。jquery

maximum-scale:容許用戶縮放到的最大比例。bootstrap

minimum-scale:容許用戶縮放到的最小比例。api

user-scalable:用戶是否能夠手動縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1,use-scalable=no">
<title>Bootstrap之文件引入</title>
<!--引入外部的bootstrap中的CSS文件-->
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<!--先引入JQ文件，不要問爲何，聽話 這是百度連接JQ庫-->
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
<!-- 搭配環境完成 -->
</head>
<body>
<!-- 佈局容器 -->
<div class="container"><!-- 固定寬度是1170px 不加這個類名是百分之一百鋪滿 -->
你們好
</div>
<div class="container-fluid"><!-- 寬度是100% -->
內容
</div>
<!--排版標籤-->
<!-- 和普通相比字體變了 加粗取消了 h1是36px h2是30px h3是24px h4是18px h5是14px h6是12px
.page-herder下面還有條線-->
<!--文本右對齊 center居中 left左對其-->
<h1 class="page-header text-right">h1~h6<small>aaa</small><big>bbb</big></h1>
<small></small><!-- 副標題 小一號 字體顏色變了 變成淺灰 -->
<big></big><!-- 副標題 大一號 字體顏色變了 變成淺灰 -->
<p class="uppercase">aaa</p><!-- 文字大小14px uppercase文本大寫 text-lowercase文本小寫 text-capitlize首字母大寫 -->
<strong>推薦使用的加粗</strong>
<em>推薦使用的斜體</em>
<del>推薦使用刪除線 在文字上有條線</del>

<h3>
<ul class="list-unstyled list-inline">
<!--list-unstyled去掉 html和那些列表裏的小樣式 list-inline豎排的列表變成橫排-->
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
</h3>
<!--dl-horizontal內容也變成橫排-->
<dl class="dl-horizontal">
<dt>aaaaa</dt>
<dd>bbbbb</dd>
</dl>
<!--table 變成表格形式 而且有對其方式 可是td內容無表格線-->
<!-- table-bordered成了真正的表格 內容和內容以前有線隔開 -->
<!--table-hover鼠標懸停變色-->
<!--table-striped各行換色-->
<!--table-condensed縮小高度變緊湊-->
<!--PS:狀態類設置的行或td
.active:鼠標懸停在表格行內的所變顏色
.success:標示成功或積極的動做
.info標示普通的提示信息或動做
.warning標示警告或用戶注意
.danger標示危險或者潛在的帶來負面影響的動做
-->
<div class="table-responsive"> <!--響應式佈局 是給table的父元素加 以移動設備爲優先-->
<table class="table table-bordered">
<tr>
<td>編號</td>
<td>物品</td>
<td>狀態</td>
</tr>
<tr>
<td>001</td>
<td>外賣</td>
<td>配送中</td>
</tr>
</table>
</div>瀏覽器


<!--響應式圖片和柵格系統一塊兒使用（廣泛）-->
<div class="container-fluid" style="background:#fff;"></div>
<img src="xxx/1.jip" class="img-responsive"><!--img-responsive圖片響應式處理-->
<!--img-circle圖片在頁面長寬不一致時變橢圓-->
<!--img-rounded圖片在頁面長寬不一致時四角變圓角-->
<!--最經常使用img-thumbnail圖片在頁面長寬不一致時有個外框是圓角的-->
<img src="xxx/1.jip" class="img-responsive" class="img-circle">微信


<!--柵格系統必定要放入容器中 就是<div class="container"></div>或者<div class="container-fluid"></div>-->
<!--柵格系統就是將瀏覽器分紅12列 柵格系統由列col和行row構成頁面的佈局-->
</body>
</html>ide

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Boostrap之表單</title>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<form>
<!--讓郵箱和密碼不是一個組產生空一行效果就建個div加上class="from-group"-->
<div class="from-group">
<label for="cemail">郵箱</label>
<!--from-control輸入框出現圓倒角-->
<input type="email" name="cemail" id="cemail" class="from-control">
</div>
<div class="from-group">
<label for="psd">密碼</label>
<input type="password" name="psd" id="psd" class="from-control">
</div>
<!--加class="checkbox-inline"複選框變好看了就像選的框和字體大小樣式變了還有倒角臥槽形容不了看效果-->
<div class="from-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby">寫代碼1</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">寫代碼2</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">寫代碼3</label>
</div>
<div class="from-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby">寫代碼1</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">寫代碼2</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">寫代碼3</label>
</div>
<div class="from-group">
<!--radio-inline變樣式好看了 lable加disabled表示點擊文字選擇不了出現禁止樣式 input加表示控制就是選擇框禁止了-->
<label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
<label class="radio-inline" disabled><input type="radio" name="sex" value="女" disabled="">女</label>
</div>
<!--輸入框組-->
<!--class="input-group"將成型的搜索樣式和input合成一組 搜索樣式在左邊-->
<div class="input-group">
<!--class="input-group-addon"造成了一個搜索框它與input分開-->
<span class="input-group-addon">搜索</span>
<input type="search" name="sc" id="sc" class="from-control">
</div>
<!--輸入框組方法就是某些註冊帳號裏面 左邊是一個圖案旁邊是輸入框 而主流輸入框圖案在bootsrap裏面有 直接複製就能夠方法就是好比<span class="input-group-addon"><span class="粘貼的東西"></span</span>-->
<!--<from class="from-inline"都在一行了 並不經常使用-->
</form>
</div>
</body>
</html>佈局

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">字體

<meta name="viewport" content="width=device-width,initial-scale=1,use-scalable=no">
<title>Bootstrap之柵格系統</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
<style>
/* 全部的div class包含那個的 增長寫的樣式 */
div[class*="col-"]{
border: 1px solid blue;
}
</style>
</head>
<body style="background:#333333;">
<div class="container" style="background:#fff;">
<!--一行有12列 col-md-1標示一列 那麼col-md-2表示2列
一行裏面有 12列 col-md-2 就是說一行裏面有6列-->
<div class="row">
<div class="col-md-1">col-1</div>
<div class="col-md-1">col-2</div>
<div class="col-md-1">col-3</div>
<div class="col-md-1">col-4</div>
<div class="col-md-1">col-5</div>
<div class="col-md-1">col-6</div>
<div class="col-md-1">col-7</div>
<div class="col-md-1">col-8</div>
<div class="col-md-1">col-9</div>
<div class="col-md-1">col-10</div>
<div class="col-md-1">col-11</div>
<div class="col-md-1">col-12</div>
<!--這列在另一行了-->
<div class="col-md-1">col-13</div>
</div>
</div>
</body>
</html>
<!-- 超小屏幕 手機 (<768px) .col-xs- 列寬是自動的
小屏幕 平板 (≥768px) .col-sm- 列寬是62px
中等屏幕 桌面顯示器 (≥992px) .col-md- 列寬是81px
大屏幕 大桌面顯示器 (≥1200px) .col-lg- 列寬是97px
要作成響應式的用這個分辨率
-->
<!-- offset偏移 只能靠右 靠右是按照本身研究都是從新從另外一行計算
col-xs/sm/md/lg-offset-數值 好比數值2就是偏移2個列 想靠左側怎麼辦 排列 -->

<!-- 想靠左側怎麼辦 排列
col-xs/sm/md/lg-pull-數值 左移 移動是現有s基礎上移動若是會和下排的列有重疊現象
col-xs/sm/md/lg-push-數值 右移 -->

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>輔助類-情境文本顏色</title>
</head>
<body>
<!-- 要有容器包裹 -->
<div class="container" style="background:#e6e6e6"></div>
<p class="text-muted">這是柔和的顏色</p>
<p class="text-primary">這是初始化顏色</p>
<p class="text-success">這是成功的顏色</p>
<p class="text-info">這是提示信息的顏色</p>
<p class="text-warning">這是警告的顏色</p>
<p class="text-danger">這是危險的顏色</p>
<!--背景文本顏色-->
<p class="bg-succese">成功背景顏色</p>
<p class="bg-info">提示背景顏色</p>
<p class="bg.primary">初始化背景顏色</p>
<p class="bg-warning">警告背景顏色</p>
<p class="bg-danger">危險背景顏色</p>
<!--下拉三角形-->
<span class="caret"></span>
<!--快速浮動 仍是要有容器-->
<!--.pull-left .pull-right-->
<!--清除浮動clearfix 給父級加-->
</body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之響應式表單</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<!--必須結合柵格系統 行能夠省去 不須要寫列 作表單時-->
<div class="container" style="background:#e6e6e6;">
<form class="from-horizontal"><!--這是響應式佈局-->
<label class="col-md-2 text-right" for="use">帳號</label><!--用text-right這樣寫帳號和輸入框靠在一塊兒了-->
<div class="col-md-10">
<input type="text" name="use" id="use" class="control">
</div>
</div>
</form>
</body>
</html>

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之按鈕</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<!--.btn是按鈕樣式的基類 想要有樣式必須寫.btn-->
<button class="btn btn-primary">肯定要刪除嘛</button>
<button type="button" value="修改" btn-default></button><!--這是常規按鈕-->
<a href="#" class="btn btn-danger btn-lg"></a><!-- btn-lg是最大的按鈕sm中等xs最小 -->
<a href="#" class="btn btn-warning btn-sm"></a>
<a href="#" class="btn btn-success active btn-xs"></a><!--active激活鼠標放上去顏色由淺變深-->
</div>
</body>
</html>
<!-- primary">這是初始化顏色</p>
success">這是成功的顏色</p>
info">這是提示信息的顏色</p>
warning">這是警告的顏色</p>
danger">這是危險的顏色</p> -->

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之縮略圖</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="background:#e6e6e6;">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<div class="thumnail"></div><!--加圓角的邊框-->
<div src="images/1.jpg" class="img-responsive"><!--增長圖片響應式-->
<div class="caption"><!--裏面要加標題了 caption 元素定義表格標題。-->
<h3 class="bg.-info">這是標題</h3>
<p class="text-muted">這是內容</p>
</div>
<!--這裏我要加兩個按鈕而且讓它靠右邊對齊-->
<div class="text-right">
<button class="btn btn-success btn-xs">我看看</button>
<button class="btn btn-info btn-xs">買了買了</button>
</div>
</div>
</div>
</div>
<!--第二塊加到這-->
</div>
</body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>bootstrap之下拉菜單與標籤頁</title>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
<script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script>
<script src="bootstrap\js\bootstrap.min.js"></script>
</head>
<body><!--這個樣式是登錄按鈕有個小三角 點一下出現各類登錄-->
<div class="container" style="background:#e6e6e6;">
<h2 class="page-herder">下拉菜單</h2>
<div class="dropdown">
<button class="btn btn-success" Data-toggle="dropdown">
登錄<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">QQ/a></li>
<li class="divider"></li><!--每個都有一條分割線-->
<li><a href="#">微信</a></li>
<li><a href="#">郵箱</a></li>
</ul>
</div>
</div>

<h2>標籤頁</h2>
<ul class="nav nav-tabs"><!--這是標籤頁樣式-->
<!--nav-pills是膠囊樣式的標籤頁-->
<!--nav-stacked將標籤縱向-->
<li><a href="#" class="active">home</a></li>
<li><a href="#" class="active">home</a></li>
<li><a href="#" class="active">home</a></li>
</ul>
</body>
</html>
<!--
.dropdown:父類元素 包含觸發的按鈕和下拉列表加樣式
.dropdown-menu:給下拉菜單的內容 給ul樣式
.Data-toggle:按鈕觸發器
.dropdown-menu-left:下拉菜單對齊 .dropdown-menu-right
.divider:每個li之間有條分割線
-->

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>bootstrap之導航</title> <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"> <script src="Bootstrap\jQueryDownload808920161027\jQueryDownload\jquery-3.1.1.min.js"></script> <script src="bootstrap\js\bootstrap.min.js"></script></head><body> <nav class="nacbar nav-default navbar-fixed-top"> <div class="container"><!--加了以後就和內容對齊了 由於它有默認值 否則緊貼左邊--> <!--頁面的頭部--> <div class="bavbar-header"> <a href="#"><img src="#"></a> </div> <!--導航連接--> <div class="collapse naver-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li><!--class="active"是激活--> <li class="active"><a href="#">home</a></li> <li class="active"><a href="#">home</a></li> <li class="active"><a href="#">home</a></li> <li class="active"><a href="#">home</a></li> </ul> </div> </div> </nav> <!--下面的內容其實不用看信息內容要用容器包起來就是了--> <div class="container"> <h3>這是亂加的標題</h3> <p> 22222222222222222222222222222 </p> </div></body></html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程