如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

一、跨域科普

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

在用2.x開(kāi)發(fā)時(shí)有的地方的顏色樣式是通過(guò)添加 color="primary" 屬性的形式設(shè)置的，但是升級(jí)3.x之后這種方式除了一些自帶的color屬性的組件、標(biāo)簽（eg: ）可以生效，其他的都失效了。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

1. <view class='header1'>  
2.   <view class='header'>  
3.     <view class='header_con flex_between'>  
4.       <view class='left'>  
5.         共計(jì){{items.length}}件商品  
6.       </view>  
7.       <view class='right flex_end'>  
8.         <view wx:if="{{!management_good}}" class='flex_center' bindtap='management'>  
9.           管理  
10.         </view>  
11.         <view wx:if="{{management_good}}" class='flex_center' bindtap='finish_management'>  
12.           完成  
13.         </view>  
14.       </view>  
15.     </view>  
16.   </view>  
17. </view>  
18. <view class='header2'>  
19.   <view class='header'>  
20.     <view class='header_con flex_between'>  
21.       <input value='類(lèi)目一' disabled='{{title_disabled}}' focus="{{!title_disabled}}">  
22.       </input>  
23.       <view class='right flex_end'>  
24.         <block wx-if="{{title_disabled}}">  
25.           <image src='../../../image/hotel/delete.png' bindtap='change_classname'></image>  
26.         </block>  
27.         <block wx-if="{{!title_disabled}}">  
28.           <view class='flex_center' bindtap='finish_classname'>  
29.             完成  
30.           </view>  
31.         </block>  
32.       </view>  
33.     </view>  
34.   </view>  
35. </view>  
36. <view class='onlinechoose'>  
37.   <view class='hotel_list flex_center' wx:for="{{items}}" wx:key="items" wx:for-item="i" data-id="{{index}}" bindtap='select'>  
38.     <view class='list_cons flex_start'>  
39.       <view wx:if="{{management_good}}" class='lefts'>  
40.         <block wx-if="{{!i.checked}}">  
41.           <view class='icon_none'></view>  
42.         </block>  
43.         <block wx-if="{{i.checked}}">  
44.           <icon type="success" size="30" color="red" />  
45.         </block>  
46.       </view>  
47.       <image src='../../../image/hotel/demoimg.jpg'></image>  
48.       <view class='right'>  
49.         <view class='name'>  
50.           {{i.name}}  
51.         </view>  
52.         <view class='list1 flex_between'>  
53.           <view class='left'>  
54.             <view class='condition1'>  
55.               16㎡|雙人床|含早  
56.             </view>  
57.             <view class='condition2'>  
58.               <block>  
59.                 間數(shù)：10  
60.               </block>  
61.               <block>  
62.                 間數(shù)：2  
63.               </block>  
64.             </view>  
65.           </view>  
66.         </view>  
67.         <view class='list1 flex_between'>  
68.           <view class='left'>  
69.             <view class='condition2'>  
70.               類(lèi)目一  
71.             </view>  
72.           </view>  
73.         </view>  
74.       </view>  
75.     </view>  
76.   </view>  
77. </view>  
78. <view class='bottom flex_between' wx:if="{{management_good}}">  
79.   <view class='left flex_start'>  
80.     <block wx:if="{{select_all}}">  
81.       <view bindtap='select_none' class='flex_start'>  
82.         <icon type="success" size="30" color="red" />  
83.         <view>  
84.           取消全選  
85.         </view>  
86.       </view>  
87.     </block>  
88.     <block wx:if="{{!select_all}}">  
89.       <view bindtap='select_all' class='flex_start'>  
90.         <view class='select_none'>  
91.         </view>  
92.         <view>  
93.           全選  
94.         </view>  
95.       </view>  
96.     </block>  
97.   </view>  
98.   <view class='right flex_end'>  
99.     <view style='text-align:right'>  
100.       <view class='all'>  
101.         共選中{{middlearr.length}}件商品  
102.       </view>  
103.     </view>  
104.     <view bindtap='deleteitem' class='sure'>  
105.       刪除  
106.     </view>  
107.   </view>  
108. </view>  

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

1. 下載Bootstrap

<!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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

    

<button type="button" class="btn btn-primary">（首選項(xiàng)）Primary</button>
    


        

            1
        

    

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

彈性布局（Flexbox）確實(shí)為我們構(gòu)建復(fù)雜、靈活的布局帶來(lái)了很大的便利，但是它的兼容性確實(shí)讓人很頭痛，下面是我遇到的一個(gè)問(wèn)題：

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

1. <head>  
2.     <meta charset="UTF-8">  
3.     <title>模糊查詢(xún)</title>  
4. <style type="text/css">  
5.     body{  
6.         text-align:center;  
7.     }  
8.     #datas{  
9.         display:none;  
10.     }  
11.     #txt{  
12.         font-size:300%;  
13.         width:80%;  
14.         height:10%;  
15.         margin-top:10%;  
16.     }  
17.     #msg{  
18.         margin:0 auto;  
19.         text-align:left;  
20.         width:80%;  
21.         border: medium solid #C0C0C0;   
22.     }  
23. </style>  
24. </head>  
25. <body>  
26.   
27. <form action="" method="post">  
28. <!-- 搜索框 -->     
29. <input type="text" id='txt' />  
30. </form>  
31. <!-- 模糊查詢(xún)結(jié)果顯示框 -->  
32. <div id="msg"></div>  
33.   
34. <!-- 查詢(xún)數(shù)據(jù) -->  
35. <div id="datas">  
36. 城市,北京市,海淀區(qū),東城區(qū),西城區(qū),宣武區(qū),豐臺(tái)區(qū),朝陽(yáng)區(qū),崇文區(qū),大興區(qū),石景山區(qū),門(mén)頭溝區(qū),房山區(qū),通州區(qū),順義區(qū),懷柔區(qū),昌平區(qū),平谷區(qū),密云縣,延慶縣,天津市,和平區(qū),河西區(qū),河北區(qū),河?xùn)|區(qū),南開(kāi)區(qū),紅橋區(qū),北辰區(qū),津南區(qū),武清區(qū),塘沽區(qū),西青區(qū),漢沽區(qū),大港區(qū),寶坻區(qū),東麗區(qū),薊縣,靜海縣,寧河縣 ,上海,黃浦區(qū),盧灣區(qū),徐匯區(qū),長(zhǎng)寧區(qū),靜安區(qū),普陀區(qū),閘北區(qū),楊浦區(qū),虹口區(qū),閔行區(qū),寶山區(qū),嘉定區(qū),浦東新區(qū),金山區(qū),松江區(qū),青浦區(qū),南匯區(qū),奉賢區(qū),崇明縣 ,重慶,渝中區(qū),大渡口區(qū),江北區(qū),沙坪壩區(qū),九龍坡區(qū),南岸區(qū),北碚區(qū),萬(wàn)盛區(qū),雙橋區(qū),渝北區(qū),巴南區(qū),萬(wàn)州區(qū),涪陵區(qū),黔江區(qū),長(zhǎng)壽區(qū),江津區(qū),永川區(qū),南川區(qū),綦江縣,潼南縣,銅梁縣,大足縣,榮昌縣,璧山縣,墊江縣,武隆縣,豐都縣,城口縣,梁平縣,開(kāi)縣,巫溪縣,巫山縣,奉節(jié)縣,云陽(yáng)縣,忠縣,石柱土家族自治縣,彭水苗族土家族自治縣,酉陽(yáng)苗族自治縣,秀山土家族苗族自治縣,新疆維吾爾自治區(qū),烏魯木齊,克拉瑪依,石河子,阿拉爾市,圖木舒克,五家渠,哈密,吐魯番,阿克蘇,喀什,和田,伊寧,塔城,阿勒泰,奎屯,博樂(lè),昌吉,阜康,庫(kù)爾勒,阿圖什,烏蘇 ,西藏自治區(qū),拉薩,日喀則,寧夏回族自治區(qū),銀川,石嘴山,吳忠,固原,中衛(wèi),青銅峽市,靈武市,內(nèi)蒙古自治區(qū),呼和浩特,包頭,烏海,赤峰,通遼,鄂爾多斯,呼倫貝爾,巴彥淖爾,烏蘭察布,霍林郭勒市,滿(mǎn)洲里市,牙克石市,扎蘭屯市,根河市,額爾古納市,豐鎮(zhèn)市,錫林浩特市,二連浩特市,烏蘭浩特市,阿爾山市 ,廣西,南寧,柳州,桂林,梧州,北海,崇左,來(lái)賓,賀州,玉林,百色,河池,欽州,防城港,貴港,岑溪,憑祥,合山,北流,宜州,東興,桂平,黑龍江,哈爾濱,大慶,齊齊哈爾,佳木斯,雞西,鶴崗,雙鴨山,牡丹江,伊春,七臺(tái)河,黑河,綏化 加格達(dá)奇,五常,雙城,尚志,納河,虎林,密山,鐵力,同江,富錦,綏芬河,海林,寧安,穆林,北安,五大連池,肇東,海倫,安達(dá),吉林,長(zhǎng)春,吉林,四平,遼源,通化,白山,松原,白城,九臺(tái)市,榆樹(shù)市,德惠市,舒蘭市,樺甸市,蛟河市,磐石市,公主嶺市,雙遼市,梅河口市,集安市,臨江市,大安市,洮南市,延吉市,圖們市,敦化市,龍井市,琿春市,和龍市,遼寧,沈陽(yáng),大連,金州,鞍山,撫順,本溪,丹東,錦州,營(yíng)口,阜新,遼陽(yáng),盤(pán)錦,鐵嶺,朝陽(yáng),葫蘆島,新民,瓦房店,普蘭,莊河,海城,東港,鳳城,凌海,北鎮(zhèn),大石橋,蓋州,燈塔,調(diào)兵山,開(kāi)原,凌源,北票,興城 ,河北,石家莊,唐山,邯鄲,秦皇島,保定,張家口,承德,廊坊,滄州,衡水,邢臺(tái),辛集市,藁城市,晉州市,新樂(lè)市,鹿泉市,遵化市,遷安市,武安市,南宮市,沙河市,涿州市,固安..定州市,安國(guó)市,高碑店市,泊頭市,任丘市,黃驊市,河間市,霸州市,三河市,冀州市,深州市,山東,濟(jì)南,青島,淄博,棗莊,東營(yíng),煙臺(tái),濰坊,濟(jì)寧,泰安,威海,日照,萊蕪,臨沂,德州,聊城,菏澤,濱州,章丘,膠南,膠州,平度,萊西,即墨,滕州,龍口,萊陽(yáng),萊州,招遠(yuǎn),蓬萊,棲霞,海陽(yáng),青州,諸城,安丘,高密,昌邑,兗州,曲阜,鄒城,乳山,文登,榮成,樂(lè)陵,臨清,禹城,江蘇,南京,鎮(zhèn)江,常州,無(wú)錫,蘇州,徐州,連云港,淮安,鹽城,揚(yáng)州,泰州,南通,宿遷,江陰市,宜興市,邳州市,新沂市,金壇市,溧陽(yáng)市,常熟市,張家港市,太倉(cāng)市,昆山市,吳江市,如皋市,通州市,海門(mén)市,啟東市,東臺(tái)市,大豐市,高郵市,江都市,儀征市,丹陽(yáng)市,揚(yáng)中市,句容市,泰興市,姜堰市,靖江市,興化市,安徽,合肥,蚌埠,蕪湖,淮南,亳州,阜陽(yáng),淮北,宿州,滁州,安慶,巢湖,馬鞍山,宣城,黃山,池州,銅陵,界首,天長(zhǎng),明光,桐城,寧國(guó),浙江,杭州,嘉興,湖州,寧波,金華,溫州,麗水,紹興,衢州,舟山,臺(tái)州,建德市,富陽(yáng)市,臨安市,余姚市,慈溪市,奉化市,瑞安市,樂(lè)清市,海寧市,平湖市,桐鄉(xiāng)市,諸暨市,上虞市,嵊州市,蘭溪市,義烏市,東陽(yáng)市,永康市,江山市,臨海市,溫嶺市,龍泉市,福建,福州,廈門(mén),泉州,三明,南平,漳州,莆田,寧德,龍巖,福清市,長(zhǎng)樂(lè)市,永安市,石獅市,晉江市,南安市,龍海市,邵武市,武夷山,建甌市,建陽(yáng)市,漳平市,福安市,福鼎市,廣東,廣州,深圳,汕頭,惠州,珠海,揭陽(yáng),佛山,河源,陽(yáng)江,茂名,湛江,梅州,肇慶,韶關(guān),潮州,東莞,中山,清遠(yuǎn),江門(mén),汕尾,云浮,增城市,從化市,樂(lè)昌市,南雄市,臺(tái)山市,開(kāi)平市,鶴山市,恩平市,廉江市,雷州市 吳川市,高州市,化州市,高要市,四會(huì)市,興寧市,陸豐市,陽(yáng)春市,英德市,連州市,普寧市,羅定市,海南,?？?三亞,瓊海,文昌,萬(wàn)寧,五指山,儋州,東方,云南,昆明,曲靖,玉溪,保山,昭通,麗江,普洱,臨滄,安寧市,宣威市,個(gè)舊市,開(kāi)遠(yuǎn)市,景洪市,楚雄市,大理市,潞西市,瑞麗市,貴州,貴陽(yáng),六盤(pán)水,遵義,安順,清鎮(zhèn)市,赤水市,仁懷市,銅仁市,畢節(jié)市,興義市,凱里市,都勻市,福泉市,四川,成都,綿陽(yáng),德陽(yáng),廣元,自貢,攀枝花,樂(lè)山,南充,內(nèi)江,遂寧,廣安,瀘州,達(dá)州,眉山,宜賓,雅安,資陽(yáng),都江堰市,彭州市,邛崍市,崇州市,廣漢市,什邡市,綿竹市,江油市,峨眉山市,閬中市,華鎣市,萬(wàn)源市,簡(jiǎn)陽(yáng)市,西昌市,湖南,長(zhǎng)沙,株洲,湘潭,衡陽(yáng),岳陽(yáng),郴州,永州,邵陽(yáng),懷化,常德,益陽(yáng),張家界,婁底,瀏陽(yáng)市,醴陵市,湘鄉(xiāng)市,韶山市,耒陽(yáng)市,常寧市,武岡市,臨湘市,汨羅市,津市市,沅江市,資興市,洪江市,冷水江市,漣源市,吉首市,武漢,襄樊,宜昌,黃石,鄂州,隨州,荊州,荊門(mén),十堰,孝感,黃岡,咸寧,大冶市,丹江口市,洪湖市,石首市,松滋市,宜都市,當(dāng)陽(yáng)市,枝江市,老河口市,棗陽(yáng)市,宜城市,鐘祥市,應(yīng)城市,安陸市,漢川市,麻城市,武穴市,赤壁市,廣水市,仙桃市,天門(mén)市,潛江市,恩施市,利川市,河南,鄭州,洛陽(yáng),開(kāi)封,漯河,安陽(yáng),新鄉(xiāng),周口,三門(mén)峽,焦作,平頂山,信陽(yáng),南陽(yáng),鶴壁,濮陽(yáng),許昌,商丘,駐馬店,鞏義市,新鄭市,新密市,登封市,滎陽(yáng)市,偃師市,汝州市,舞鋼市,林州市,衛(wèi)輝市,輝縣市,沁陽(yáng)市,孟州市,禹州市,長(zhǎng)葛市,義馬市,靈寶市,鄧州市,永城市,項(xiàng)城市,濟(jì)源市,山西,太原,大同,忻州,陽(yáng)泉,長(zhǎng)治,晉城,朔州,晉中,運(yùn)城,臨汾,呂梁,古交,潞城,高平,介休,永濟(jì),河津,原平,侯馬,霍州,孝義,汾陽(yáng),陜西,西安,咸陽(yáng),銅川,延安,寶雞,渭南,漢中,安康,商洛,榆林,興平市,韓城市,華陰市,甘肅,蘭州,天水,平?jīng)?酒泉,嘉峪關(guān),金昌,白銀,武威,張掖,慶陽(yáng),定西,隴南,玉門(mén)市,敦煌市,臨夏市,合作市,青海,西寧,格爾木,德令哈,江西,南昌,九江,贛州,吉安,鷹潭,上饒,萍鄉(xiāng),景德鎮(zhèn),新余,宜春,撫州,樂(lè)平市,瑞昌市,貴溪市,瑞金市,南康市,井岡山市,豐城市,樟樹(shù)市,高安市,德興市,臺(tái)灣,臺(tái)北,臺(tái)中,基隆,高雄,臺(tái)南,新竹,嘉義,板橋市,宜蘭市,竹北市,桃園市,苗栗市,豐原市,彰化市,南投市,太保市,斗六市,新?tīng)I(yíng)市,鳳山市,屏東市,臺(tái)東市,花蓮市,馬公市 ,特別行政區(qū),香港：中西區(qū),東區(qū),九龍城區(qū),觀塘區(qū),南區(qū),深水埗區(qū),黃大仙區(qū),灣仔區(qū),油尖旺區(qū),離島區(qū),葵青區(qū),北區(qū),西貢區(qū),沙田區(qū),屯門(mén)區(qū),大埔區(qū),荃灣區(qū),元朗區(qū),澳門(mén)：花地瑪堂區(qū),圣安多尼堂區(qū)（花王堂區(qū)）,望德堂區(qū),大堂區(qū),風(fēng)順堂區(qū)（圣老楞佐堂區(qū)）,離島,氹仔,路環(huán),  
37. </div>    
38. <script type="text/javascript">    
39.     function handle(){    
40.         var data = datas.split(",");  
41.         var word = document.getElementById('txt').value;  
42.         var value = "";  
43.         for(var i = 1;i < data.length;i++){  
44.             if(word!="" && data[i].match(word+".*") != null){  
45.                 value += "<a onclick=add('"+ data[i] +"') href='#'>" + data[i] + "</a><br/>";  
46.             }  
47.         }         
48.         document.getElementById('msg').innerHTML=value;  
49.     }   
50.     function add(city){  
51.         document.getElementById('txt').value=city;  
52.     }  
53.     //firefox下檢測(cè)狀態(tài)改變只能用oninput,且需要用addEventListener來(lái)注冊(cè)事件。     
54.     if(/msie/i.test(navigator.userAgent))    //ie瀏覽器     
55.         {document.getElementById('txt').onpropertychange=handle     
56.     } else{//非ie瀏覽器，比如Firefox     
57.     alert(1)  
58.         document.getElementById('txt').addEventListener("input",handle,false);     
59.     }  
60.     var datas = document.getElementById('datas').innerHTML;  
61.   
62. </script>    
63.   
64. </body>  
65. </html>  

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

浮動(dòng)是什么？

浮動(dòng)元素會(huì)脫離文檔流進(jìn)行左浮或者右浮，直到碰到父級(jí)元素或者其他的浮動(dòng)元素。

為什么清除浮動(dòng)：浮動(dòng)會(huì)導(dǎo)致父元素高度坍塌，因?yàn)楦?dòng)脫離文檔流，浮動(dòng)以后不占文檔流的位置，撐開(kāi)的父元素高度肯定會(huì)坍塌。

清除浮動(dòng)的八種方法：

1、父級(jí)div給出固定的高度。手動(dòng)定義height，這樣就解決了父級(jí)元素獲取不到高度的問(wèn)題。

優(yōu)點(diǎn)：代碼量少，簡(jiǎn)單容易掌握。

缺點(diǎn)：只適合高度固定的布局，如果高度和父級(jí)div不同會(huì)出現(xiàn)問(wèn)題。

2、overflow，設(shè)置overflow：hidden。

優(yōu)點(diǎn)：代碼少，瀏覽器支持。

缺點(diǎn)：會(huì)把超出的部分隱藏起來(lái)，而且不能配合position使用

3、額外標(biāo)簽，添加一個(gè)新的標(biāo)簽，如div，或者br，并且設(shè)置標(biāo)簽的屬性clear：both；清除浮動(dòng)，讓父級(jí)能自動(dòng)獲得高度。

優(yōu)點(diǎn)：代碼少，瀏覽器支持，不會(huì)各種問(wèn)題。

缺點(diǎn)：會(huì)有很多空的div或者br。

4、使用單偽類(lèi)after和zoom，使用方法：

.clearfloat:after{

  content:"";//設(shè)置內(nèi)容為空

  height:0;//高度為0

  line-height:0;//行高為0

  display:block;//將文本轉(zhuǎn)為塊級(jí)元素

  visibility:hidden;//將元素隱藏

  clear:both//清除浮動(dòng)

 }

  .clearfloat{

 zoom:1;為了兼容IE

   　}

優(yōu)點(diǎn)：瀏覽器支持好，大型的瀏覽器都在使用，建議使用。

缺點(diǎn)：代碼多，需要after和zoom都要使用才能兼容主流的瀏覽器。

5、雙偽類(lèi)清除浮動(dòng)。使用方法：

.clearfloat:before,.clearfloatafter {

                 content: "";

                 display: block;

                  clear: both;

             }

            .clearfloat {

                 zoom: 1;

           }

缺點(diǎn)：不嚴(yán)謹(jǐn)不建議使用

6、父級(jí)div跟著浮動(dòng)，所有代碼一起浮動(dòng)就會(huì)形成一個(gè)整體，

缺點(diǎn)：會(huì)產(chǎn)生新的問(wèn)題，不建議使用。

7、父級(jí)定義display：table；將div屬性變成的表格。

缺點(diǎn)：產(chǎn)生新的問(wèn)題，而且影響布局。

8、overflow：auto；需要設(shè)置width，不設(shè)置height，瀏覽器會(huì)自動(dòng)檢測(cè)浮動(dòng)區(qū)的高度。

缺點(diǎn)：容易生成滾動(dòng)條。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

1.vue的生命周期，主要的介紹官網(wǎng)（https://cn.vuejs.org/v2/api/）上都有。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

1. 下載Bootstrap

<!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個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

    

<button type="button" class="btn btn-primary">（首選項(xiàng)）Primary</button>
    


        

            1
        

    

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

    

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5