11.13學習筆記

一:前端框架（bootstrap）

（1）：快速的開發

（2）：響應式佈局

（3）：html5+css3寫成的

（4）：頁面搭建比較好看

二:下載安裝（bootstrap） 3.0版本 地址:https://v3.bootcss.com/getting-started/

（1）：安裝bootstrap

（2）：引入bootstrap2個css文件
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet"/>

(3)bootstrap以下：

  bootstrap 文本

（h1-h6/.h1-.h6） class="h1-h6" 任何一個標籤都擁有

<small>字體變小</small>

<mark>標記</mark>

<del>刪除標記</del>

<ins>下劃線</ins>

<u> 下劃線 </u>

 

 

段落對齊方式：
.text-left
.text-center
.text-right

.text-lowercase 大寫內容轉換爲小寫
.text-uppercase 小寫的內容轉換爲大寫
.text-capitalize 全部內容首字母變爲大寫

列表：
ul： 去除小黑點
.list-unstyled
內聯列表
.list-inline:放入一排
<ul class="list-inline">
<li><a href="#">首頁</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">招聘</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">練習</a></li>
</ul>

 

 

bootstrap中的排版-表格 table
.table-bordered   帶邊框表格 
.table-striped       條紋狀表格 
 .table-hover          懸停變色
 .table-condensed 緊湊風格

顏色：
 .danger 紅色 
.waring 警告
.info 藍色
.success 標誌成功
.active 鼠標懸停在行或者單元格上面

bootstrap中的排版-表單 form

h5屬性：

placeholder="這是一個輸入框"
.form-control :控制表單 (是全部form表單裏面的屬性都擁有這個.form-control屬性)
.form-group :組件
.form-inline :把全部的表單控件放到水平排列 .has-success:改變整個組的狀態 同時使用
.input-lg;使輸入框變大(默認的屬性)
.input-sm:使輸入框變小
.sr-only:使提示信息消失
.control-label :改變邊框的顏色 (默認的屬性)
.has-success : 改變整個組的狀態
<from class="form-inline">
<div class="form-group has-success">
<label for="" calss="sr-only">這是一個輸入框:</label> 提示標籤
<label for="" calss="has-success">這是一個輸入框:</label> 提示標籤
<input class="form-control input-lg"> .form-control
</div>

 

bootstrap 按鈕(屬性)

.btn 按鈕class屬性
按鈕的風格：
1： .btn-primary :我是原始按鈕 深藍
2: .btn-info :我是info按鈕            淺藍
3: .btn-success:我是成功按鈕    綠
4: .btn-danger:我是危險按鈕         紅   
5: .btn-warning:我是警告按鈕      黃
6: .btn-inverse:我是翻轉按鈕       白
7: .btn-link:我是link按鈕           帶a帶下劃線的按鈕
8: .btn btn-info btn-block :我是link按鈕 .btn-block:全屏   全屏按鈕
9: <a href=」」 class=」btn btn-danger」>我是a標籤按鈕</a>

 .btn-lg變大   .btn-sm變小  .active 懸浮 .btn-block全屏

bootstrap 圖片(屬性)

1： .img-responsive 響應式圖片
2： .img-rounded 圓角
3: .img-circle 圓形圖片
4: .img-thumbnail 縮略圖

 

 

在meta標籤裏面加入（響應式佈局）寫在meta標籤裏面頭部位置
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 初始化瀏覽器的時候 讓寬度等於瀏覽器的寬度 initial-scale 讓頁面加載的時候 縮放的比例100% -->

bootstrap 網格佈局(柵格佈局)

//盒子佈局

//網格佈局

.container :容器 （居中）
col-xs- <=768px 超小屏幕的手機
col-sm- >=768 小平板
col-md- 中等屏幕 >=992px
col-lg- >1200屏幕 
<!-- 定義一行 row -->
<!-- 定義容器 -->
<!-- <div class="container"> container:居中

.hidden-xs 在小屏幕下隱藏掉
.visible-xs 當尺寸縮小到手機屏幕時候顯示
.clearfix:清除浮動
.alert-info :強調
.col-md-offset-6:向右邊偏移
.col-md-push-8:向右走 push:推
.col-md-pull-4:拉 向左移動 pull：拉

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
<div class="row">
<div class="col-md-4 -col-md-offset-5 -col-md-push-5">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻</p>
</div>

<div class="col-md-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>


</div>

</div>
<div class="col-md-8 col-sm-8 col-xs-8">
<h1>阿斯蒂芬</h1>
<p>sdfgdsf</p>
<div class="row">
<div class="col-md-4 -col-md-push-4 col-md-pull-8">
<h1>阿斯蒂芬</h1>
<p>嘻嘻嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>


<div class="col-md-4">
<h1>阿斯蒂芬</h1>
<p>嘻嘻哈哈嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
</div>
</div>
</div>
</div>
</div>

bootstrap 按鈕菜單 btn

//組件（js）
導入bootstrap核心js文件
導入jquery包(要10.0以上的版本)
1：.btn-group ：組
     .dropdown-toggle:下拉效果
2: .btn btn-default dropdown-toggle
3: data-toggle="dropdown" //js組件使用
4: <span class="caret"></span> .caret：s三角形
5: .dropdown-menu :下拉按鈕
<ul class="dropdown-menu">

 

bootstrap 膠囊型（導航） nav

設置的狀態不同，選中的狀態不一樣
1: .nav nav-pills  選中藍
2: .active :選中轉態 激活的
3： .disabled:不能選 禁用的
4: .nav nav-tabs 選中相似長城

 

二級導航
<ul class="nav nav-pills">
<li><a href="#">首頁</a></li>
<li><a href="#">詳情頁</a></li>
<li><a href="#">諮詢頁</a></li>
<li><a href="#">聯繫咱們</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">php</a>
</li>
<li>
<a href="#">java</a>
</li>
<li>
<a href="#">js</a>
</li>
</ul>
</li>
<li></li>
</ul>

麪包屑導航 : .breadcrumb  導航列表間價格豎槓

<ul class="breadcrumb">
<li><a href="">首頁</a></li>
<li><a href="">詳情頁</a></li>
<li><a href="">諮詢頁</a></li>
<li><a href="">聯繫咱們</a></li>
</ul>

基礎導航:

.navbar 基礎導航
.navbar-default 默認導航樣式 灰
.navbar-inverse 導航黑色
組合使用：
.navbar navbar-default navbar-inverse

<div class="navbar navbar-default navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="">網站介紹</a></li>
<li><a href="">系列教程</a></li>
<li><a href="">名師介紹</a></li>
<li><a href="">成功案例</a></li>
</ul>
</div>

加入導航的標題
.navbar-header
.navbar-brand
.navbar-inverse 翻轉(黑色)

<div class="navbar navbar-default navbar-inverse">
<div class="navbar-header">
<a href="" class="navbar-brand">歡迎</a>
</div>
<ul class="nav navbar-nav">
<li><a href="">首頁</a></li>
<li><a href="">詳情頁</a></li>
<li><a href="">諮詢頁</a></li>
<li><a href="">聯繫咱們</a></li>
<ul>
</div>

組合表單使用

.navbar-fixed-bottom 底部
.navbar-form navbar-right :form 表單居右
.form-group：組
.form-control :文本內容
placeholder="請輸入「

<div class="navbar navbar-default ">
<div class="navbar-header">
<a href="" class="navbar-brand">歡迎</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">首頁</a></li>
<li><a href="#">詳情頁</a></li>
<li><a href="#">諮詢頁</a></li>
<li><a href="#">聯繫咱們</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">php</a>
</li>
<li>
<a href="#">java</a>
</li>
<li>
<a href="#">js</a>
</li>
</ul>
</li>
<li></li>
</ul>
<form action="" class="navbar-form navbar-right " >
<div class="form-group">

<input type="text" class="form-control" name="" placeholder="請輸入">
<button type="submit" class="btn btn-info">搜索</button>
</div>
</form>

</div>

boostrap 分頁：
.pagination
.active:選中
.disabled：禁用
&laquo <<
&raquo >>
<ul class="pagination">
<li><a href="">&laquo;</a></li>
<li class="active"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li class="disabled"><a href="">7</a></li>
<li><a href="">&raquo;</a></li>
</ul>

bootstrap 縮略圖

.thumbnail 給a標籤一些樣式  加個藍框
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="./images/11.jpg" alt="" style="height:180px;width:100%;display:block;"/>
</a>
</div>

bootstrap 警告框

.alert :警告框
.alert alert-success :恭喜您操做成功
.alert alert-info :請確認密碼
.alert alert-warning :您還有一次機會輸入密碼
.alert alert-danger :您的密碼輸入有誤
帶關閉按鈕的alert
class="close" data-dismiss="alert"
&times; 按鈕
.alert-dismissable : 帶關閉按鈕的alert
<div class="alert alert-danger alert-dismissable ">
<button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

 

列表項:
.list-group 列表組
.list-group-item 列表項
<div class="list-group">
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>
<a class="list-group-item" href="">1</a>

</div>

 

bootstrap panel 面板

.panel-body 設置中部的樣式
.panel-heading 設置頭部的樣式
.panel-footer 設置尾部的樣式
.panel-default 默認的樣式 灰
.panel-primary 原始的樣式 藍
.panel-success 成功的
.panel-danger 危險的

bootstrap 巨幕
.jumbotron :巨幕 <div class="jumbotron"> <div class="container"> <h1>web基礎階段告一段落！</h1> <h1>這段時間認識你們很高興</h1> <p>可是，下一階段仍是我</p> <p> <a href="" class="btn btn-success btn-lg">更多</a> </p> </div> </div>