-
響應式布局查看全部
-
導航條----------nav 1.可切換的導航 nav-tabs 2.膠囊導航 nav-pills 3.垂直導航 nav-justified / nav-stacked 在導航之中默認選中的在li上面加active 可切換導航 <ul class="nav nav-tabs"> <li class="active"><a href="#">慕課網1</a></li> <li><a href="#">慕課網2</a></li> <li><a href="#">慕課網3</a></li> </ul> 膠囊式 <ul class="nav nav-pills"> <li class="active"><a href="#">慕課網1</a></li> <li><a href="#">慕課網2</a></li> <li><a href="#">慕課網3</a></li> </ul> 垂直 <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">慕課網1</a></li> <li><a href="#">慕課網2</a></li> <li><a href="#">慕課網3</a></li> </ul> .active默認選中查看全部
-
bootstrap控件組 1。input-group表示空間組 2。。input-group-addon可防止額外內容及圖標查看全部
-
bootstrap中的插件--data屬性 1。通過data屬性控制頁面交互 2。$(document).off(".data-api")接觸屬性綁定 按鈕示例 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#danger">測試</button> <div id="danger" >這是探出內容</div>查看全部
-
解決iphone6和7的邊框變寬的問題查看全部
-
bootstrap查看全部
-
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu" > <li ><a href="#">北京</a></li> <li class=""divider></li> <li ><a href="#">上海</a></li> <li class=""divider></li> <li ><a href="#">廣州</a></li> <li class=""divider></li> <li ><a href="#">深圳</a></li> </ul>查看全部
-
引入字體圖標 1）head中引用 bootstrap。min。css 2）class=字體圖標名 <span class="glyphicon-star"><span> <div class="btn-group"> <button class="btn btn-control btn-default"> <label class="glyphicon glyphicon-circle-arrow-down">download</label> </button> </div>查看全部
-
面板-------panel 組成：panel-heading、panel-body、panel-footer 引用 <div class="panel panel-default"> <div class="panel-heading panel-defult"> 面板的頭部 </div> <div class="panel-body"> 面板主體內容 </div> <div class="panel-footer"> 面板腳注 </div> </div> 顏色 panel-primary panel-info panel-success panel-warning查看全部
-
1、role： HTML5的標簽屬性，標識標簽使其語義化，方便瀏覽器對其具體功能進行識別，給特定的瀏覽器使用比如盲文瀏覽器 2、aria-label：用在輸入框，當焦點落到輸入框時讀屏軟件可讀出輸入框的內容，配合讀屏軟件使用 3、tabIndex：設置鍵盤的Tab鍵在控件中的移動，就是焦點的移動順序，方便一些有障礙的人士瀏覽網頁 4、data-：HTML5新增的用于自定義的屬性，不影響頁面顯示，通過它可以管理自己想要實現的數據傳遞，包括數據交互的一些效果。查看全部
-
字體圖標 1。特點 體積小便于加載 、無需重復設計、方便引用 2。引用 <head> <link rel="stylesheet" href="css/bootstrap.mn.css" </head> <body> <span class="glyphicon glyphicon-asterist"></span> 3. 阿里圖標 http://www.iconfont.cn/查看全部
-
網頁開發中的單位 1。px是相對于屏幕分辨率的單位 其大小無法跟隨屏幕放大縮小，所有瀏覽器都支持px單位 2。1em=16px（但不完全是）會繼承父級元素的字體大小 IE的部分瀏覽器不支持em 3。rem 與em類似，會繼承根元素的字體大小 html{font-size：62.5%} 實際rem寫在前面px寫在后面查看全部
-
1.不同屏幕顯示不同效果 <style> .test{height: 200px; background: red;} @media screen and (max-width:900px;)and (min-width:500px){width:100%;height: 1000px; background: blue;} </style> </head> <body> <div class="test"></div> </body> 2。柵格 <style> .test{height: 200px; background: red;} </style> </head> <body> <div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-ossset-4"></div> 在超大屏幕中占1/4，普通占1/3 平板1/2 手機1/1 超大屏幕中偏移1/4 普通偏移1/3 </body>查看全部
-
viewport <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimun-scale,user-scalable=no"> 1.width,height 2.user-scalable,initial-scale 3.maximum-scale minimum-scale查看全部
-
開發響應式頁面 利用柵格系統適配不同的硬件 圖標查看全部
舉報
0/150
提交
取消