http://www.51pansou.comBootStrap瑙嗛涓嬭浇锛?spans"/>

[Bootstrap]7澶╂繁鍏ootstrap鍏ラ棬鍑嗗

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Bootstrap]7澶╂繁鍏ootstrap鍏ラ棬鍑嗗相关的知识，希望对你有一定的参考价值。

鏍囩锛?/p>

鐢变簬鐢宠浜嗕竴涓煙鍚嶏紝涓€涓簯涓绘満锛屽紑濮嬪紕涓汉缃戠珯銆?/p>

鍙戠幇Bootstrap闈炲父鏂逛究锛屽拰閲嶈锛屾晠寮€濮嬪涔犱笌鍒嗕韩鍏充簬Bootstrap鐨勬妧鏈€?/p>

 

鎺ㄤ釜骞垮憡

涓汉缃戠珯锛?span style="color: #0000ff;">http://www.51pansou.com

BootStrap瑙嗛涓嬭浇锛?span style="color: #0000ff;">Bootstrap瑙嗛

BootStrap婧愮爜涓嬭浇锛?span style="color: #0000ff;">Bootstrap婧愮爜

 

鏈妭鐩綍锛?/span>

 

 

 

绠€浠?/strong>

Bootstrap鏄洰鍓嶆渶娴佽鐨勫墠绔紑鍙戞鏋讹紝鐢盩witter鐨勪袱浣嶅墠 鍛樺伐Mark Otto鍜孞acob Thornton鍦?010骞?鏈堜唤鍒涘缓銆傚畠鏄竴濂?鍩轰簬Less鐨勫墠绔紑鍙戝簱锛堟渶鏂扮増涔熷寘鍚簡Sass婧愮爜锛夛紝鎻愪緵浜嗗緢澶氬父瑙佸苟甯哥敤鐨勫悇绉岰SS鍜孞avaScript鍚堥泦锛屼互渚垮紑鍙戜汉鍛橀殢鏃朵笂鎵嬨€?/p>

 

Bootstrap鎻愪緵浜嗗涓嬮噸瑕佺殑鐗规€э細

  • 涓€濂楀畬鏁寸殑鍩虹CSS鎻掍欢銆?/li>
  • 涓板瘜鐨勯瀹氫箟鏍峰紡琛ㄣ€?/li>
  • 涓€缁勫熀浜巎Query鐨凧S鎻掍欢闆嗐€?/li>
  • 涓€涓潪甯哥伒娲荤殑鍝嶅簲寮忥紙Responsive锛夋爡鏍肩郴缁燂紝骞朵笖宕囧皻绉诲姩鍏堣锛圡obile First锛夌殑鎬濇兂銆?/li>

浠嶸3.1.0寮€濮嬶紝Bootstrap鐨凩icense鎺堟潈鏀规垚浜哅IT鍗忚銆?MIT鏄洰鍓嶆渶涓哄鏉剧殑鍗忚锛屽ぇ瀹跺彲浠ユ斁蹇冨湴鍦ㄥ悇绉嶅晢涓氱幆澧冧腑浣跨敤瀹冦€?/p>

 

鍏ラ棬

cdn锛?/p>

?
1
2
3
4
5
6
7
8
9
10
11
<!-- 鏂?Bootstrap 鏍稿績 CSS 鏂囦欢 -->
<linkrel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
 
<!-- 鍙€夌殑Bootstrap涓婚鏂囦欢锛堜竴鑸笉鐢ㄥ紩鍏ワ級 -->
<linkrel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 
<!-- jQuery鏂囦欢銆傚姟蹇呭湪bootstrap.min.js 涔嬪墠寮曞叆 -->
<scriptsrc="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 
<!-- 鏈€鏂扮殑 Bootstrap 鏍稿績 javascript 鏂囦欢 -->
<scriptsrc="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

銆€銆€

Bootstrap妗嗘灦鐨勬枃浠跺拰婧愮爜鍙互鍦ㄥ叾瀹樻柟缃戠珯 锛坵ww.getbootstrap.com锛変笅杞姐€?a href="http://v3.bootcss.com/getting-started/#download" target="_blank">鐐瑰嚮閾炬帴鍙互鐪嬪埌3涓笅杞介摼鎺?/p>

鎶€鏈垎浜? src=

 

涓嬭浇Bootstrap锛屼笅杞界殑鍐呭鏄紪璇戝悗鍙互鐩存帴浣跨敤銆傚寘鎷湭缁忓帇缂╃殑鏂囦欢鍜岀粡杩囧帇缂╁鐞嗙殑鏂囦欢銆?/p>

涓嬭浇婧愮爜锛屾槸鐢ㄤ簬缂栬瘧CSS鐨凩ess婧愮爜锛屼互鍙婂悇涓彃浠剁殑JS婧愮爜銆?/p>

涓嬭浇Sass椤圭洰锛屾槸鐢ㄤ簬缂栬瘧CSS鐨凷ass婧愮爜锛屼互鍙婂悇涓彃浠剁殑JS婧愮爜銆?/p>

 

鏂囦欢缁撴瀯

bootstrap/
鈹溾攢鈹€ css/
鈹?  鈹溾攢鈹€ bootstrap.css
鈹?  鈹溾攢鈹€ bootstrap.css.map
鈹?  鈹溾攢鈹€ bootstrap.min.css
鈹?  鈹溾攢鈹€ bootstrap-theme.css
鈹?  鈹溾攢鈹€ bootstrap-theme.css.map
鈹?  鈹斺攢鈹€ bootstrap-theme.min.css
鈹溾攢鈹€ js/
鈹?  鈹溾攢鈹€ bootstrap.js
鈹?  鈹斺攢鈹€ bootstrap.min.js
鈹斺攢鈹€ fonts/
    鈹溾攢鈹€ glyphicons-halflings-regular.eot
    鈹溾攢鈹€ glyphicons-halflings-regular.svg
    鈹溾攢鈹€ glyphicons-halflings-regular.ttf
    鈹溾攢鈹€ glyphicons-halflings-regular.woff
    鈹斺攢鈹€ glyphicons-halflings-regular.woff2

3.X鐗堝拰2.X绯诲垪鐗堟湰鏈変竴涓緢澶у尯鍒紝灏辨槸2.x绯诲垪鐗堟湰鐢ㄤ簬灞曠ずicon灏忓浘鏍囩殑.png鍥?鐗囦笉瑙佷簡锛屽彇鑰屼唬涔嬬殑鏄痜onts鐩綍鐨?绉嶇被鍨嬬殑瀛椾綋鏂囦欢銆傛垜浠О杩欑鏂瑰紡涓篅font-face鐗堟湰鐨刬con瀹炵幇锛岃瀛椾綋鏉ヨ嚜glyphicons.com缃戠珯锛屽苟寰楀埌鍏嶈垂鎺堟潈銆傞€氳繃杩欑鎶€鏈樉绀哄浘鏍囩殑濂藉鏄紝鍥炬爣鍙互琚换鎰忕缉鏀俱€佹敼鍙橀鑹层€?/p>

瀵规枃浠剁殑css銆乯s鏂囦欢澶瑰悕绉?杩涜闅忔剰閲嶅懡鍚嶏紝浣嗘槸涓嶈兘瀵筬onts鏂囦欢澶硅繘琛岄噸鍛藉悕锛屽洜涓篊SS 鏂囦欢閲岀殑婧愮爜浣跨敤浜嗙浉瀵硅矾寰勶紙../fonts/锛?/p>

娉ㄦ剰bs鐨勬墍鏈塲s鎻掍欢閮芥槸鍩轰簬jQuery鐨勶紝瑕佺‘淇濆湪浣跨敤杩欎簺鍔熻兘鐨勬椂鍊欏紩鐢ㄧ浉搴旂殑jQuery鏂囦欢銆?/span>

 

鍩烘湰妯℃澘

鎶€鏈垎浜? src=
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 涓婅堪3涓猰eta鏍囩*蹇呴』*鏀惧湪鏈€鍓嶉潰锛屼换浣曞叾浠栧唴瀹归兘*蹇呴』*璺熼殢鍏跺悗锛?-->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn鈥榯 work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>浣犲ソ锛屼笘鐣岋紒</h1>

    <!-- jQuery (necessary for Bootstrap鈥榮 JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
鎶€鏈垎浜? src=

鐢变笂杩版ā鏉夸唬鐮佸彲浠ョ湅鍑猴紝3.x鍜?.x鐗堟湰鐩告瘮锛屾湁涓€涓緢澶х殑 鍖哄埆锛屽氨鏄浜嗕互涓嬩竴琛屼唬鐮侊細

<meta name="viewport" content="width=device-width, initial-scale=1">

杩欏氨鏄垜浠墠闈㈡彁鍒扮殑锛孊ootstrap浠?.0鐗堟湰寮€濮嬪叏闈㈡敮鎸佺Щ鍔ㄥ钩鍙颁簡锛屽苟灏嗚疮褰荤Щ鍔ㄥ厛琛岋紙Mobile First锛夌殑瀹楁棬銆?/p>

涓婅堪浠ｇ爜 鐨勬剰鎬濇槸锛岄粯璁ゆ儏鍐典笅锛孶I甯冨眬鐨勫搴﹀拰绉诲姩璁惧鐨勫搴︿竴鑷达紝缂╂斁澶у皬涓哄師濮嬪ぇ灏忋€?/p>

 

CSS鍩烘湰璇硶

Bootstrap鐨凜SS缁勪欢鐨勬牳蹇冨氨鏄€夋嫨鍣ㄧ殑瀹氫箟浠ュ強鍦ㄥ悇鑷紭鍏堢骇涓婄殑澶勭悊銆?/p>

 

濡備綍纭畾CSS鐨勪紭鍏堢骇锛?/p>

杩欓噷鎴戜滑瑕佸厛寮曞叆涓€涓満鍒讹紝鍒嗗埆 鐢?涓暟瀛楋紙a锛宐锛宑锛宒锛夎〃绀轰紭鍏堢骇缁勫悎.

绗竴涓暟瀛楋紙a锛夎〃绀簊tyle灞炴€э紝浼樺厛绾ф渶楂樸€傜敱浜庝竴鑸兘 鏄痗lass鏍峰紡锛屾墍浠ヨ鍊间竴鑸兘鏄?銆?/p>

绗簩涓暟瀛楋紙b锛夋槸璇SS閫夋嫨鍣ㄤ笂鐨刬d鏁伴噺鐨勬€诲拰锛屼竴鑸兘 鏄?涓€?/p>

绗笁涓暟瀛楋紙c锛夋槸鐢ㄥ湪璇SS閫夋嫨鍣ㄤ笂鐨勫叾浠栧睘鎬SS閫夋嫨 鍣ㄤ互鍙婁吉绫荤殑鎬诲拰銆傝繖閲屽寘鎷琧lass锛?btn锛夊拰灞炴€SS閫夋嫨鍣紙姣?濡俵i[id=red]锛夈€?/p>

绗洓涓暟瀛楋紙d锛夎绠楀厓绱狅紙灏卞儚table銆乸銆乨iv绛夛級鍜屼吉鍏?绱狅紙灏卞儚first-child绛夛級銆?/p>

 

 

閫夋嫨鍣?/p>

杩欓噷绠€鍗曚粙缁?涓父鐢ㄧ殑锛?/p>

瀛愰€夋嫨鍣細

element element div p 閫夋嫨 <div> 鍏冪礌鍐呴儴鐨勬墍鏈?<p> 鍏冪礌銆?/td> 1
element>element div>p 閫夋嫨鐖跺厓绱犱负 <div> 鍏冪礌鐨勬墍鏈?<p> 鍏冪礌銆?/td>

鍏勫紵閫夋嫨鍣細

element+element div+p 閫夋嫨绱ф帴鍦?<div> 鍏冪礌涔嬪悗鐨勬墍鏈?<p> 鍏冪礌銆?/td>
element1~element2 p~ul 閫夋嫨鍓嶉潰鏈?<p> 鍏冪礌鐨勬瘡涓?<ul> 鍏冪礌銆?/td>

 

鎵╁睍锛?/p>

div,p琛ㄧず澶氫釜閫夋嫨鍣ㄥ悓鏃惰閫夋嫨

浼被鐢ㄤ簬鍚戞煇浜涢€夋嫨鍣ㄦ坊鍔犵壒娈婄殑鏁堟灉銆傚a:hover a:link

 

 

濯掍綋鏌ヨ

濯掍綋鏌ヨ鏄繘琛屽搷搴斿紡璁捐鐨勬牳蹇冭绱狅紝鍏跺姛鑳介潪甯稿己澶с€?nbsp;

Bootstrap涓昏鐢ㄥ埌min-width銆乵ax-width锛屼互鍙奱nd璇硶锛?鐢ㄤ簬鍦ㄤ笉鍚岀殑鍒嗚鲸鐜囦笅璁剧疆涓嶅悓鐨凜SS鏍峰紡銆?/p>

?
1
2
3
4
5
6
7
8
9
10
11
12
@media (max-width:767px) {
    /*鍦ㄥ皬浜?68鍍忕礌鐨勫睆骞曢噷,杩欓噷鐨勬牱寮忔墠鐢熸晥*/
}
@media (min-width:768px) and (max-width:991px) {
    /*鍦?68鍜?91鍍忕礌涔嬮棿鐨勫睆骞曢噷,杩欓噷鐨勬牱寮忔墠鐢熸晥*/
}
@media (min-width:992px) and (max-width:1199px) {
    /*鍦?92鍜?199鍍忕礌涔嬮棿鐨勫睆骞曢噷,杩欓噷鐨勬牱寮忔墠鐢熸晥*/
}
@media (min-width:1200px) {
    /*鍦ㄥぇ浜?200鍍忕礌鐨勫睆骞曢噷,杩欓噷鐨勬牱寮忔墠鐢熸晥*/
}

 

 

JS鍩烘湰璇硶

||涓?amp;& 2涓繍绠楃

||琛ㄧず锛屽鏋滅涓€涓厓绱犲彲浠ヨ浆鎹负true锛屽垯杩斿洖绗竴涓厓 绱犵殑鍊硷紝鍚﹀垯鏌ヨ绗簩涓厓绱犵殑鍊?/p>

&&鍒欑浉鍙嶏紝濡傛灉绗竴涓厓绱犲彲浠ヨ浆鎹负false锛屾墠杩斿洖绗竴 涓厓绱犵殑鍊硷紝鍚﹀垯杩斿洖绗簩涓厓绱犵殑鍊?/p>

绌哄璞ull锛寀ndefined涓篺alse

鏁板瓧闆朵负false

绌哄瓧绗︿覆涓篺alse

鎶€鏈垎浜? style=

 

 

鑷墽琛屽嚱鏁?/p>

?
1
2
3
4
(function() { /* code */} ());               // 鎺ㄨ崘浣跨敤杩欎釜
(function() { /* code */})();                     // 杩欎釜涔熸槸鍙互鐢ㄧ殑
+function() { /* code */}();                  //鍓嶉潰鐨?鍙蜂富瑕佹槸闃叉涓嶇鍚堣瀹氱殑浠ｇ爜
;function() { /* code */}();                   //+鍙蜂篃鍙互鎹㈡垚;

 

 

鍘熷瀷

鍦ˋlert鍑芥暟涓婂畾涔変竴涓悕涓篶lose鐨勫師鍨嬫柟娉曘€?/p>

?
1
Alert.prototype.close =function (e) {    /*...*/ }

浠€涔堟槸鍘熷瀷锛屽師鍨嬬殑濂藉锛屽彲浠ョ湅鎴戠殑鍗氬js绡囥€?/p>

杩欓噷婕旂ず濡備綍璋冪敤鍘熷瀷鏂规硶

?
1
2
varalert = newAlert();
alert.close();

銆€

jQuery

缁戝畾浜嬩欢

?
1
2
$(鈥榯d鈥?/code>).on("click",function (e) {//todo});         //鍦╰d涓婄粦瀹歝lick
$(鈥榯d).off(鈥?/code>click鈥?;                                           // 鍦╰d涓婄鐢╟lick浜嬩欢

鑰屽湪bs涓?/p>

?
1
2
$(document).on(鈥榗lick.bs.carousel.data-api鈥?/code>,鈥榯d鈥?/code>,function(e){};
$(document).off(鈥?carousel.data-api鈥?/code>);

涓婅堪鐨刼n鍦ㄤ娇鐢ㄦ椂锛屼腑闂村浜嗕竴涓弬鏁帮紝鑰屼笖閫夋嫨鍣ㄥ彉鎴愪簡 document銆傚畠鐨勫ソ澶勬槸鍙湪document涓婄粦瀹氫竴涓崟鍑讳簨浠讹紝鍒?鐢ㄥ啋娉＄殑鏈哄埗锛屽湪鍗曞嚮鐨勬椂鍊欐鏌ユ槸鍚︽槸td鍏冪礌锛屽鏋滄槸鎵嶅 鐞嗐€傝€屽墠闈㈡垜浠妸td浣滀负閫夋嫨鍣ㄧ殑鏃跺€欙紝涓€涓〉闈㈡湁澶氬皯td鍏冪礌 灏变細缁戝畾澶氬皯涓猚lick浜嬩欢锛岃繖鏍锋€ц兘浼氬ぇ澶ч檷浣庛€傝繖绉?涓弬鏁扮殑 妯″紡绉颁负浜厓妯″紡銆?/p>

 

$(selector).data()

鏀堕泦鎸囧畾鍏冪礌涓婄殑鎵€鏈変互data-寮€澶寸殑鑷畾涔夊睘鎬э紝骞跺悎骞舵垚涓轰竴涓璞″瓧闈㈤噺銆?/p>

?
1
<divid="abc" data-role="aaa" data-toggle="toggle"></div>

濡傛灉瑕佽幏鍙杁ata-role閲宎aa杩欎釜鍊?/p>

?
1
$("鈥?abc").data("role");

 

鎵╁睍

Less鏄竴绉岰SS棰勫鐞嗘妧鏈紝瀹冩槸涓€绉嶅姩鎬佹牱寮忚瑷€锛屽睘浜?CSS棰勫鐞嗚瑷€涓殑涓€绉嶃€?/p>

 

HTML5杈呭姪璁捐

鍦╞s涓紝鍑虹幇浜嗕笉鏄互data-寮€澶寸殑 鑷畾涔夊睘鎬э紝鎴戜滑绉颁箣涓鸿緟鍔╁睘鎬с€?/p>

杩欎簺灞炴€ф槸HTML5鏂版彁鍑虹殑姒傚康锛岀敤浜庢敮鎸佹畫闅滀汉澹€佽€佸勾浜恒€佹枃鍖栨按骞充笉楂樻垨鏆傛椂鎮ｇ梾鐨?浜轰娇鐢ㄥ睆骞曢槄璇诲櫒杩涜椤甸潰璁块棶銆?/p>

 

aria-hidden="true"琛ㄧず瀵瑰睆骞曢槄璇诲櫒闅愯棌璇iv 鍏冪礌

role="navigation"琛ㄧず璇ュ尯鍩熺敤浜庡鑸?nbsp;

以上是关于[Bootstrap]7澶╂繁鍏ootstrap鍏ラ棬鍑嗗的主要内容，如果未能解决你的问题，请参考以下文章

JQuery之SweetAlert插件

获取 daterangepicker bootstrap 的值

$(...).datepicker 不是一个函数 - JQuery - Bootstrap

如何为缩略图悬停添加标题 - Bootstrap？

了解 Flexbox 如何与 Bootstrap 配合使用

如何从 Bootstrap 的模态形式发布数据？