荣耀彩票代理

IT技术互动交流平台

旺财速啃H5框架之Bootstrap(二)

作者:天堂路上  发布日期:2016-12-26 20:23:33

TURANGANJUEBUZHIDAOXIESHAZI,NAOZILIMIANMEISHUILE,KENENGSHIYINWEIJINWANYAOCHUQULANG,HAHA~~~TIQIANTIXINGDAJIAPINGANYEYAOHUIJIAE,SHENGDANJIESHENG00000000000ZHEIMEDUODAN。。。。JIXU

荣耀彩票代理SHANGYIPIANDEYIJINGBAbootstrapLEJIEGEDAGAILE,JIEXIALAIWOMENJIUKAISHIXUEXIYIXIATALIMIANDEDONGXI。

浏览器支持

旧的浏览器可能无法很好的支持

Bootstrap ZHICHI Internet Explorer 8 JIGENGGAOBANBENDE IE LIULANQI

CSS源码研究

WOMENBUSHIZAIheadLIMIANYINRULEXIAMIANZHEIXIEWENJIANME

<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css'> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src='http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>

OK,KANHEXINDE,ZHEILICONGbootstrap.min.cssKAISHI,ZHEISHIYASUOLEDE,KANDEHUAZUIHAOKANMEIYOUYASUODEBANBEN:http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css

WOJIANGDEJIUSHIANZHAOFEIYASUOBANBENDECSSLAIZOUDE

266XINGZHIQIANJIBENSHANGDOUSHIBIAOQIANGESHIHUA、CHUSHIHUADEYIXIEDONGXI,WEILERANGMOUXIETONGXUEGENGHAOLIJIE,WOBAYIXIETESHUDEDATITIYIXIA。

第一个

input[type='number']

荣耀彩票代理CSSSHUXINGXUANZEQI,KENENGDUIYUCHUXUEZHELAISHUO,HUOMEIXIEGUODEXIAOPENYOUJIUBUSHUXILE,ZHEIGESHUXINGJIUSHIDUI<input type=”number”/>BIAOQIANJINXINGYANGSHIXUANRAN,ZHISHI ZHEIGE,WOXIANGNIJIUZHIDAOQITADEZENMEQUXIELE

第二个

display: block;   

荣耀彩票代理ZHEIGENIKENENGHUISHUO:“ZHEIGEWOZHIDAO,ZHUANHUANYUANSUTEXINGYA~~~”,HAHA,MEICUO,DANNIZHIDAOJUTIZHUANLEHUIZENMEYANG,HUOWEISHENMEYAOZHUAN,YUZHIDUIYINGDEYOUSHISHENMENI?

荣耀彩票代理HAO,WODATISHUOYIXIA(HUIDEPENGYOUJIUBUYONGKANLE),ZAIHTMLLIMIANYOU”KUAIYUANSU”YU”XINGNEIYUANSU”ZHISHUO,TAMENGEZIDEMORENZHUYAOTEXING:

KUAIYUANSU:DUZHANYIXING,NENGSHEZHIKUAN、GAODU,MORENKUANDUSHIFURONGQIDE100%

XINGNEIYUANSU:BUDUZHANYIXING,BUNENGSHEZHIKUAN、GAODU

荣耀彩票代理ZHIDAOZHEIGEHOU,NEIMEJIYUANSUJIAYIGEdisplay: block; JIUSHIBAYUANSUZHUANHUANCHENGKUAIYUANSU,RANGYUANSUKEYISHEZHIKUAN、GAODU。OK,XIANZAIZHIDAOZHEIGEDEYONGFALEBA

第三个

color: #000 !important;

荣耀彩票代理ZHEIGEMA,QIANMIANBUFENKENDINGZHIDAO,HOUMIAN!importantSHISHENMEGUI???  YOUHUAJI,YEJIUSHISHUO,DANGTAZUOYONGDAOMOUYIGEYUANSUSHANGSHI,ZHIYAOSHIZHICHITADELIULANQIDOUHUIYOUXIANWEIcolor:#000;,ERBUGUANHOUMIANYOUXIANGTONGDESHUXINGBEIFUGAI(DANGRANFUGAIDESHUXINGZHIMEIYOUJIA!importantDEQINGKUANG)。

第四个

@font-face

267XING,ZHEIGESHUXINGSHICSS3LIMIANDE,ZHUYAOGONGNENGJIUSHIBAZIDINGYIDEwebZITIQIANRUDAONIDEWANGYEZHONG,ZHEIYANGJIUBUPANIDEWANGYEBUXIANSHIYIXIEBIEGEDIANNAOSHANGMEIYOUDEZITILE。YONGBIEGEDEHUASHUO,ZHEIJIAOZITITUBIAO,ZITITUBIAOHENDUOXITONGDOUYOU,BUSHIbootstrapCAIYOUDEE,HAOCHUJIUSHINENGBATUBIAOXIANGZITIYIYANGSHIYONG,XIANGSHENMEGAIBIANYANSE,SHEZHIDATISHENMEDE。HAOBA,NEIGAIZENMEYONGNI?

荣耀彩票代理HAHA,QISHIBUYONGGUAN,YIJINGNONGHAOLEDE~~~KANXIAMIAN

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
 …
}

荣耀彩票代理KAN,CSSYINRULEJIGEWENJIAN,ZAISHANGJIMULUDEfontsWENJIANLIMIAN,ZIJIDAKAIQUKANKAN,BUJIUSHIZHEIJIGEME,DANGRANNIBUYONGQUGUANTALE,ZHIDAOZENMEHUISHIJIUOK

荣耀彩票代理GENGDUOZITITUBIAO,KANZHEIGE:http://noob.d8jd.com/noob/5/117.html

LIRU:

<span class='glyphicon glyphicon-refresh'></span>

荣耀彩票代理YIGESHUAXINDEZITITUBIAOJIUCHULAILE

荣耀彩票代理273XINGDAO885XINGQUANSHIGUANYUZITIXIANGGUANDEcssSHUXING

第五个

@media

荣耀彩票代理ZHEIGEJIUZUOZISHIYINGJIUXIANDEZHONGYAOLE,XIANKANTASHISHENMEGUI。

ZITISHANGJIUSHIMEITIDEYISI,QISHIYUANLIJIUSHIGUIDINGBUTONGMEITI(SHEBEI)YINGYONGBUTONGDEYANGSHIERYI

 

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

再次声明:如果是min-width设置的,小的在上面,大的在下面,max-width设置的,大的在上面,小的在下面

ZHIDAOLEZHEIGE,NEIMEWOMENXIANGSHIBUSHIKEYIHUNHESHIYONGLENI。ZHIDINGMOUGEQUJIAN,KANXIAMIAN:

@media screen and (min-width: 960px) and (max-width: 1199px) { 
…
}
@media screen and (min-width: 768px) and (max-width: 959px) {
…
}
….

荣耀彩票代理YISIWOJIUBUSHUOLE,XIANGXINNINENGKANDONG

QITADEHAOXIANGMEISHENMELE,HOUMIANZAIJIANGSHILIDESHIHOUWOMENZAIHUITOUQUFENXIYUZHIDUIYINGDE

~~~GUOJIELE,ZHENXINXIANGSHUA,JINTIANover~~~

Tag标签:   
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规