-
响应式布局查看全部
-
导航条----------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
提交
取消