jquery bootstrap自适应选项卡效果代码
代码语言:html
所属分类:选项卡
代码描述:jquery bootstrap自适应选项卡效果代码
代码标签: jquery bootstrap 选项卡 自适应
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> body { height: 100%; } dl { margin: 40px; postion: relative; width: 50%; } dt { float: left; } dt a { display: inline-block; vertical-align: middle; line-height: 40px; padding-left: 25px; padding-right: 25px; background: #f5f5f5; } dd { float: right; width: 100%; margin-top: 40px; margin-left: -100%; padding: 25px; background: #f5f5f5; opacity: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } dd.active { opacity: 1; } @media screen and (max-width: 768px) { dt { width: 100%; float: none; } dt a { display: block; } dd { float: none; margin: 0; height: 0%; padding: 0; display: none; } dd.active { display: block; height: 100%; padding: 25px; } } </s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0