什么是bootstrap重慢?
bootstrap是由css今阳,js組成的一個(gè)輕量級(jí)的ui框架师溅,css提供了一種布局方式,和組件樣式,js提供了插件盾舌,而本文是通過(guò)快速的知識(shí)點(diǎn)學(xué)習(xí)墓臭,讓同學(xué)能夠?qū)W習(xí)到通過(guò)bootstrap布局,并且能夠懂得css和js來(lái)自己寫組件和布局妖谴。
我們將通過(guò)學(xué)習(xí)窿锉,使用原生css和bootstrap實(shí)現(xiàn)下面考題
要學(xué)習(xí)Bootstrap需要懂得以下知識(shí)
1.html
2.css
3.js
3.jquery
4.bootstrap
首先提出幾個(gè)問(wèn)題,為什么需要Bootstrap膝舅,它的比原生好在哪里嗡载?它的實(shí)現(xiàn)原理是什么?
要搞明白這幾個(gè)問(wèn)題仍稀,就要從最原始的布局方法開始講起洼滚。
HTML
1.快速理解html
html本身是不具備功能的,就是一個(gè)為了讓瀏覽器解析容器技潘,容器中裝著css判沟,js,所以html標(biāo)簽具備什么功能崭篡,長(zhǎng)什么樣子挪哄,都是css和js決定的,瀏覽器對(duì)html都有自己css默認(rèn)值琉闪,和一些自有或公有的屬性用于內(nèi)置的功能迹炼。
2.基礎(chǔ)的html架構(gòu)
有的標(biāo)簽是唯一的,他們?cè)趆tml只能夠出現(xiàn)一次颠毙,有html斯入,head, title, body
引入順序:
1.css引入盡量要寫在head中
2.css引入要將自己的css后引入
3.js引入盡量要寫在html中的最后
4.js引入時(shí)依賴需要先引入
bootstrap文件下載:
下載后創(chuàng)建一個(gè)文件夾object
|++css
|--bootstrap.css
|++img
|++js
|--bootstrap.js
| index.html
https://v3.bootcss.com/css/
推薦v3版本的入門文檔,
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ico是一個(gè)16*16的一個(gè)圖片文件 -->
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
具體標(biāo)簽屬性:
a
ul
img
form
input
table
table的寫法有兩種蛀蜜,
第一種是以列為開頭
<table border="1" cellspacing="0">
<tr>
<th>身高</th>
<td>160cm</td>
<td>158cm</td>
</tr>
<tr>
<th>體重</th>
<td>50kg</td>
<td>55kg</td>
</tr>
</table>
另外一種是以行為開頭
<tr>
<th>身高</th>
<th>體重</th>
</tr>
<tr>
<td>170cm</td>
<td>50kg</td>
</tr>
<tr>
<td>165cm</td>
<td>60kg</td>
</tr>
因此不同的瀏覽器對(duì)標(biāo)簽的解析是不同的刻两,就會(huì)有瀏覽器兼容的問(wèn)題
所以為了讓布局很聽話,我們將所有標(biāo)簽都會(huì)進(jìn)行樣式重置滴某。
*{
margin: 0;
padding: 0;
border: 0;
}
css選擇器的基本語(yǔ)法
1.css的引入方式:
行內(nèi)磅摹,內(nèi)聯(lián)滋迈,外聯(lián)
2.css的格式:
選擇器{key:value}
常見選擇器:
class,id户誓,tag饼灿,后代選擇器,子代選擇器帝美,分組選擇器
對(duì)于同一個(gè)元素的選擇器優(yōu)先級(jí):
行內(nèi)樣式:1000
id選擇器:100
class選擇器:10
tag選擇器:1
.father table{
border-spacing: 0;
background:red;
}
html>body>table{
border-spacing: 0;
background:black;
}
但是選擇器優(yōu)先級(jí)并不是簡(jiǎn)單的相加碍彭,而是相同的優(yōu)先級(jí)以最大的優(yōu)先級(jí)選擇器做對(duì)比,在兩個(gè)相同的選擇器中悼潭,又以后加載的優(yōu)先級(jí)高于先加載的
注意:越精確優(yōu)先級(jí)越高
<style>
.wrap p{
color: red;
}
div>p>span{
color:yellow;
}
</style>
<div class="wrap">
<p>
<span>測(cè)試</span>
</p>
</div>
盒模型:
盒模型決定了一個(gè)標(biāo)簽在排版上所占據(jù)的寬度庇忌,和高度
盒模型分為內(nèi)部結(jié)構(gòu)和外部結(jié)構(gòu):
內(nèi)部結(jié)構(gòu)會(huì)改變自身的寬高,
而外部結(jié)構(gòu)控制的是與兄弟元素相關(guān)的屬性
內(nèi)部結(jié)構(gòu)有:border舰褪,padding皆疹,content
外部結(jié)構(gòu)有:margin,position
content:又分為width和hight
帶領(lǐng)大家將這幾個(gè)css屬性看一遍抵知,以及如何設(shè)置
而默認(rèn)整個(gè)元素的寬高是由border+padding+content計(jì)算而來(lái)
而有沒有辦法讓border和padding計(jì)算入content中呢墙基?
box-sizing:border-box;//bootstrap已經(jīng)默認(rèn)設(shè)置了全部元素
border:
border:1px solid #000;
margin的坑
1.margin穿透我們有一個(gè)正常嵌套刷喜,一個(gè)block中嵌套一個(gè)inline-block
2.給inline-block一個(gè)margin-top残制,會(huì)傳遞給父級(jí)
<div style="backgound:red;height:50px;">
<div style="margin-top:100px;"></div>
</div>
解決辦法:
1.給父級(jí)添加border
2.給父級(jí)添加overflow:hidden
3.用padding取代margin
4.將內(nèi)部塊變?yōu)閮?nèi)聯(lián)塊
margin上下折疊
<div style="background:red;height:50px;margin-bottom:100px;"></div>
<div style="background:yellow;height:50px;margin-top:100px;"></div>
解決辦法:
1.將div變?yōu)閮?nèi)聯(lián)塊
2.將margin減少
瀏覽器文檔流:
1.所有標(biāo)簽 排版默認(rèn)都是從上到下,從左到右
2.并且后一個(gè)標(biāo)簽只會(huì)出現(xiàn)在上一個(gè)標(biāo)簽之后掖疮,
3.如果上一行放不下就會(huì)另起一行
小作業(yè):一個(gè)總寬高20px正方體初茶,padding:4px,帶有border:1px的一個(gè)div元素
position
position是一種使元素脫離文檔流的屬性
都具有top浊闪,bottom恼布,left,right四個(gè)方向的值搁宾,和z-index
默認(rèn)值:position:static折汞;
position:relative;相對(duì)于當(dāng)前位置
position:absolute盖腿;相對(duì)于往上層的最先找到的具有relative的元素
position:fixed爽待;相對(duì)于窗口
常見的display
display是html中必有的css元素,display決定html的默認(rèn)排版方式翩腐,以及受一些屬性的影響方式鸟款,和盒模型的計(jì)算方式
常見的display有:block,inline-block茂卦,inline何什,none
分為塊,內(nèi)聯(lián)塊, 內(nèi)聯(lián)
block:是一個(gè)塊元素等龙,具有寬高处渣,獨(dú)占一行伶贰,
inline-block:是一個(gè)內(nèi)聯(lián)塊元素,具有寬高霍比,但是不獨(dú)占一行幕袱,margin暴备,padding正常起作用
inline:是一個(gè)內(nèi)聯(lián)元素悠瞬,沒有寬高,寬高由內(nèi)容決定,margin只有左右起作用涯捻,padding不占據(jù)寬高
常見的塊元素:
div浅妆、p、h1~h6障癌、ul凌外、ol、dl涛浙、li康辑、dd、table轿亮、hr疮薇、blockquote、address我注、table按咒、menu、pre
常見的內(nèi)聯(lián)塊元素:
img但骨、lable励七、input、abbr(縮寫)奔缠、em(強(qiáng)調(diào))掠抬、big、cite(引用)textarea校哎、select两波、button
常見的內(nèi)聯(lián)元素:
span,a,i
嵌套的規(guī)則:
內(nèi)聯(lián)元素不嵌套塊元素
5.布局開始
根據(jù)使用的css屬性,分為普通流布局贬蛙,浮動(dòng)布局雨女,定位布局,flex布局
首先我們用剛剛學(xué)的display和盒模型進(jìn)行普通流布局
使用的屬性有:width阳准,height氛堕,display, font-size, background,vertical-align,
<style>
*{
margin:0;
/* font-size: 0; */
}
.wrap{
width: 500px;
height: 500px;
margin:auto;
}
.header{
width: 500px;
height: 100px;
background:pink;
}
.aside{
display: inline-block;
width: 100px;
height: 400px;
background:red;
vertical-align: middle;
}
.content{
display: inline-block;
width: 400px;
height: 400px;
background:yellow;
vertical-align: middle;
}
.main{
height: 300px;
background:green;
}
.footer{
height: 100px;
background:fuchsia;
}
</style>
<div class="wrap">
<div class="header">header</div>
<div class="aside">aside</div><div class="content">
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</div>
普通流布局的坑:
使用display:inline-block野蝇;會(huì)受到折行或者空行的影響讼稚,
解決辦法:
1.font-size:0括儒;
2.或者去掉空格;
float浮動(dòng)
float多用于文字環(huán)繞效果锐想,后來(lái)被廣泛應(yīng)用到了排版中帮寻,半脫離文檔流,不占據(jù)寬高赠摇,但是會(huì)阻擋元素固逗。
需要注意:兩個(gè)元素同時(shí)使用float,后一個(gè)使用float的藕帜,會(huì)在前面烫罩;
需要注意:使用float后,塊元素自身會(huì)變?yōu)閮?nèi)聯(lián)塊元素洽故;
float的坑
1.當(dāng)使用float后元素的父級(jí)會(huì)塌陷贝攒。
解決辦法:
添加第三個(gè)元素,使用清除浮動(dòng)
div{
clear:both;
}
或者給父級(jí)加上
.clearfix::after{
content:"";
height:1px;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
或給父級(jí)加上:overflow:auto | hidden
又或者給父級(jí)加上:float屬性
行內(nèi)元素的設(shè)置
設(shè)置文字:
color,font-size,font-weight,font-famliy
設(shè)置文字的排版:
text-align,line-height
設(shè)置段落:
words-spacing,word-break,word-wrap
注意:行內(nèi)元素具有遺傳性时甚,會(huì)影響內(nèi)部嵌套的所有元素
常用設(shè)置
背景設(shè)置:
background隘弊,background-image,background-repeat荒适,background-size, background-clip,background-position
background-image: url('./img/image.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
background-clip: content-box;
background-position: 10px 10px;
用處:雪碧圖,動(dòng)畫
.test{
margin:auto;
width:58px; height:100px; background-image:url('./img/bird.jpeg'); background-repeat:no-repeat; background-position:-32px -190px; background-size:400px;
-webkit-animation:test_anim 2.2s steps(4) both;
animation:test_anim 2.2s steps(4) both ;
animation-iteration-count:infinite;
}
@-webkit-keyframes test_anim{
0%{ background-position:-32px -190px;}
100%{ background-position:-308px -190px;}
}
@keyframes test_anim{
0%{ background-position:-32px -190px;}
100%{ background-position:-308px -190px;}
}
邊框設(shè)置:
border梨熙,border-radius,box-shadow
透明度設(shè)置:
opacity吻贿,rgba
元素居中的常用方法:
塊元素的居中方法:
.father {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.son {
width: 50px;
height: 50px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: yellow;
}
使行內(nèi)元素居中的方法:
.father{
width:100px;
height:100px;
background:red;
text-align:center;
line-height:100px;
}
.son{
display:inline-block;
background:yellow;
}
高級(jí)選擇器
:hover
隨堂測(cè)試:
1.利用hover做:會(huì)變色的a標(biāo)簽
.title{
color:#000;
text-decoration: none;
}
.title:hover{
color:red;
}
<a class="title" href="#">鏈接</a>
2.使用ul與li寫一個(gè)nav常見的特效
background:red串结;fuchsia;
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:100px;
text-decoration:none;
color:white;
background-color:purple;
padding:4px 12px;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
隨堂測(cè)試
圖片
http://www.w3school.com.cn/i/tulip_peach_blossom_w_s.jpg
文字
This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box. This is some text that is placed in the transparent box.
---------------------------------------以上是原生css布局------------------------------------------
bootstrap布局
又稱為柵格布局或網(wǎng)格系統(tǒng)(grid system):
整個(gè)布局被區(qū)分為:
行(row)列(col)
一行具有12列
v3版本中規(guī)定:col必須要放置在row中舅列,row必須要放置在容器中
容器:分為container和container-fluid
container:使容器兩邊有具有margin和padding
container-fluid:使容器寬度具有100%
簡(jiǎn)單使用默認(rèn)設(shè)置:
<style>
.test{
height: 100px;
background:coral;
}
.test1{
height: 200px;
background:red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 test"></div>
<div class="col-lg-6 test1"></div>
</div>
</div>
可以理解為元素默認(rèn)是獨(dú)占一行的肌割,當(dāng)觸發(fā)設(shè)置的屏幕寬度,將會(huì)把執(zhí)行所設(shè)置的寬度進(jìn)行水平排列
偏移
當(dāng)觸發(fā)設(shè)置的屏幕大小時(shí)帐要,執(zhí)行偏移
<style>
.test{
height: 100px;
background:coral;
}
.test1{
height: 100px;
background:red;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 test"></div>
<div class="col-lg-1 test1 col-md-offset-1"></div>
</div>
</div>
作業(yè):
bootstrap v3的布局
柵格布局
在原生布局當(dāng)中把敞,大家體會(huì)到了原生css的布局繁瑣,并且自適應(yīng)效果并不理想榨惠,不能夠滿足現(xiàn)在日益復(fù)雜的自適應(yīng)要求奋早,由此bootstrap提供了一種新的布局方式:柵格布局。
我們通常布局都是需要多個(gè)元素在同一排赠橙,使用display:inline-block耽装;會(huì)受到空格影響,由此誕生了float布局期揪,然而使用float布局會(huì)遇到float的一些坑和問(wèn)題掉奄,不注意仍然會(huì)以隱形的方式破壞布局,并且不利于頁(yè)面維護(hù)凤薛。
而bootstrap提供的布局方式姓建,具有簡(jiǎn)單易用诞仓,維護(hù)方便的特點(diǎn),在前后端不分離的項(xiàng)目中被極大的推崇速兔。
柵格布局的下載:
https://v3.bootcss.com/
選擇最左邊的下載選項(xiàng)
當(dāng)下載后滑到頁(yè)面的下面部分墅拭,可以發(fā)現(xiàn)有很多已經(jīng)排好版的實(shí)例,需要單獨(dú)下載
柵格布局的原理:
@media (min-width: 768px) and (max-width: 1000px){
.test-xs-6{
background:pink;
width: 600px;
height: 600px;
}
}
@media(min-width:100px) and (max-width:768px){
.test-ss-1{
background:orangered;
width: 100px;
height: 100px;
}
}
<div class="test-xs-6 test-ss-1">
</div>
柵格布局的理念:
將頁(yè)面排版分為行(row)和列(col)的概念涣狗,并且使用class進(jìn)行設(shè)置谍婉,使用方便,并且基于此排版屑柔,還提供了:push屡萤,pull珍剑,offset等用法掸宛。
要點(diǎn):頁(yè)面必須采取 容器 > row > column 的形式
名詞解釋
容器:有.container(固定寬度)和 .container-fluid (100% 寬度)兩種。
行(row):使用 .row 來(lái)定義一個(gè)行
列(column):使用 .col 來(lái)定義一列,列的類名組成為:col-設(shè)備寬度-寬度
槽(gutter):每一列的左右內(nèi)邊距
偏移(offsets):是以列寬計(jì)算的margin-left招拙,用法:col-md-offset-*
<div class="container-fluid">
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
</div>