积累bootstrap的一些知识

1.关于如何将3列内容对齐，如图所示
可以用BootsTrap中的栅格系统来做并且设置col-md属性
html代码

<section id="tese"><div class="container"><div class="row"><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障支付安全</p></div></div></a></div><div class="col-sm-6 col-md-4"><a href="#"><div class="media"><div class="media-left"><i class="icon-uniE907"></i></div><div class="media-body"><h4 class="media-heading">支付交易保障</h4><p>银联支付全程保障支付安全</p></div></div></a></div></div></div>
</section>

css代码

#tese{padding:50px 0;border-bottom: 1px solid #c0c0c0;
}
.icon-uniE907::before{content:"\e907";
}
#tese i{font-size:34px;
}
#tese > .container > .row >div{margin-top:20px;margin-bottom:20px;
}

2.如何将文字左右布局（如图），这就要用到pull-left,pull-right来让左右浮动,不会出现一上一下的情况。

html代码

<section id="ljyy"><div class="container"><p class="pull-left"><i class="icon-uniE906"></i>现在有 <span>458</span>人在排队,累计预约交易成功 <span>7409</span>次。什么是预约投标？<a href="">立即预约</a></p><p class="pull-right"><i class="icon-uniE905"></i>微金所企业宣传片</p></div>
</section>

css代码

#ljyy{border-bottom:1px solid #c0c0c0;
}
#ljyy >.container  p{line-height:50px;font-size:14px;
}
#ljyy >.container .pull-left span,#ljyy >.container .pull-left a{color:#E92322;
}
#ljyy >.container  > .pull-left > a:hover{text-decoration: none;
}
.icon-unoE906:before{content:"\906";
}.icon-uniE905:before{content:"\e905";
}

3.如何做这种盒子中的栅格布局

 <div class="col-xs-12 col-sm-6 col-md-4"><div class="panel panel-czbk"><div class="panel-heading">Panel heading without title</div><div class="panel-body"><h5>新手体验表0008期</h5><div class="row"><div class="col-xs-6 text-left"><p>起步价</p><p><strong>1000.00</strong><sub>万</sub></p></div><div class="col-xs-6 text-right"><p>起步价</p><p><strong>1000.00</strong><sub>万</sub></p></div><div class="col-xs-6 text-left"><p>起步价</p><p><strong>1000.00</strong><sub>万</sub></p></div><div class="col-xs-6 text-right"><p>起步价</p><p><strong>1000.00</strong><sub>万</sub></p></div></div></div></div></div>

css代码，因为p标签在bootstrap中自带margin-bottom10像素，所以会被撑开，我们将他消除。

#products > .container > .tab-content p{margin-bottom:0px;
}

4如何实现tab选项卡加下拉菜单的样式并且点击下拉菜单也可以进行跳转如图

<!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li><li role="presentation" class="dropdown"><a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">落下</a><ul class="dropdown-menu" aria-labelledby="myTabDrop1" ><li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown2">@fat</a></li><li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li></ul></li></ul><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home">...</div><div role="tabpanel" class="tab-pane" id="profile">.21</div><div role="tabpanel" class="tab-pane" id="messages">.212.</div><div role="tabpanel" class="tab-pane" id="dropdown1">bbbbb</div><div role="tabpanel" class="tab-pane" id="dropdown2">aaaaaaaa</div></div>

5.针对这种缩放之后超出了手机屏幕宽度（如图），我们可以采用overflow-x:scroll,给他添加横向滚动条，

首先解决排版乱的问题，因为父元素没有宽度，所以先动态设置一个宽度

 /*控制标签页的标签容器宽度*/var $ulContainer = $('.nav-tabs');//获取所有子元素的宽度和var width = 30; //因为原本ul上有padding-left:20//遍历子元素$ulContainer.children().each(function(index,element){//console.log(element.clientWidth)width += element.clientWidth;});//此时width等于所有li宽度的总和$ulContainer.css('width',width);

这样就让字在同一行显示了，并会出现上面超出手机宽度的问题，如何解决给父元素添加一行css代码

#products > .container >.ul-wapper{overflow-x: scroll;
}

这下就没有下面的横向滚动条了。
6.如何修改radio默认样式如图，其实就是伪元素的应用

html代码

 <div class="radio"><label><input type="radio" class="radio_type" name="optionsRadios" id="optionsRadios1" value="option1" checked><p>购买设计</p></label></div><div class="radio"><label><input  type="radio" class="radio_type" name="optionsRadios" id="optionsRadios2" value="option2"><p>购买设计 + 尺寸</p></label></div>

css代码

input[type="radio"]:hover,
input[type="radio"]:focus {outline: none;
}
.radio_type {width: 20px;height: 20px;appearance: none;position: relative;
}
.radio_type:before {content: "";width: 15px;height: 15px;border: 1px solid #000;display: inline-block;border-radius: 50%;vertical-align: middle;
}
.radio_type:checked::before {content: "";width: 15px;height: 15px;border: 1px solid #c30e23;display: inline-block;border-radius: 50%;vertical-align: middle;
}
.radio_type:checked::after {content: "";width: 9px;height: 9px;text-align: center;background: #c30e23;border-radius: 50%;display: block;position: absolute;top: 8px;left: 3px;
}

积累bootstrap的一些知识相关推荐

基于JSP+Servlet+MySQL+Bootstrap的防疫知识在线问答系统
问答首页详细问答列表页面回复页面发起提问我的问答密码修改修改个人资料用户登录用户注册管理页面用户管理帖子管理主题管理技术描述开发工具: Idea/Eclipse 数据库: ...
主要内容: 本文提出了一种基于(ppo)的微电网最优调度方法。该方法采用强化学习(RL)来学习调度策略，并积累相应的调度知识。同时，引入ppo模型，将微电网调度策略动作从离散动作空间扩展到连续动作
MATLAB代码:微电网强化学习关键词:微电网强化学习 RL Reinforcement Learning 参考文档:<Optimal Scheduling of Microgrid Ba ...
Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】
bootstrap框架下载bootstrap: 在项目中使用bootstrap: Bootstrap3.0(基于jQuery) 1.表单 2.按钮. 10.网格系统 10.1 10.2偏移列 10. ...
最近做项目所积累的一些小知识（一）
CSS篇 1.如何让一个页面有背景图片,并且背景图片铺满整个屏幕? 可以用body,的background属性来设置!例如: background: url("123.jpg") ...
云笔记积累个人知识体系
笔记的记录方式笔记是个人能力提高和知识体系积累的关键性习惯! 常见的笔记记录方式有三种,其实也是我个人笔记记录方式成长的三个阶段. 1. 传统的纸记录方法. 2008年我大学本科毕业前的记录方式,也 ...
科研经验1：云笔记积累个人知识体系
笔记的记录方式笔记是个人能力提高和知识体系积累的关键性习惯! 常见的笔记记录方式有三种,其实也是我个人笔记记录方式成长的三个阶段. 1. 传统的纸记录方法. 2008年我大学本科毕业前的记录方式,也 ...
李迟2011年4月知识积累
我从来不觉得写代码只是写代码的事,也不是整天拿数据结构和算法来研究,拿C.C++大头书来看.我对自己的要求是:坚持融会贯通,坚持多层次联系,坚持学习,坚持积累. 非代码知识主要关于linux日常使用 ...
计算机语言求公因子,学好PLC必须掌握的三个典型程序实例！为PLC编程积累一些实例知识吧！...
原标题:学好PLC必须掌握的三个典型程序实例!为PLC编程积累一些实例知识吧! 学好PLC一定要积累足够的实例知识,小编为大家准备了一些较为基础的实例,只为帮助新手,还望高手轻拍! 一.控制输出程序 ...
通过系统回顾的方法来发展循证的管理知识*。
英国管理杂志,第14卷.207-222 (2003) 通过系统回顾的方法来发展循证的管理知识*. David Tranfield, David Denyer 和 Palminder Smart 高级管 ...

积累bootstrap的一些知识

积累bootstrap的一些知识相关推荐

最新文章

热门文章