积累bootstrap的一些知识

最新推荐文章于 2021-03-07 22:22:22 发布
最新推荐文章于 2021-03-07 22:22:22 发布
阅读量273 收藏 3
点赞数 1
分类专栏： bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44302838/article/details/109120658
版权

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;
}
weixin_44302838
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap案例
qq_43537987的博客
05-26 1457
效果展示： 总体代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor...
Bootstrap笔记4
mintsolace的博客
08-24 136
图片响应式 目的： 各种终端都需要正常显示图片 移动端应该使用更小（体积）的图片 实现方式 将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm=“小图路径”，data-img-lg=“大图路径”） 通过JS的方式获取屏幕宽度 判断屏幕宽度是否小于一定的值（如：768） 根据判断情况决定使用具体的大图还是小图 //获取屏幕宽度 var windowWidth=$(wi...
Bootstrap——网站添加字体图标
weixin_34112181的博客
05-20 241
@font-face { font-family: 'itcast'; src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('...
第124天：移动web端-Bootstrap轮播图插件使用
weixin_33978044的博客
12-24 101
Bootstrap JS插件使用 > 对于Bootstrap的JS插件，我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一、基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体， 3 注意该盒子必须加上 cla...
section与div
Rocky balboa
05-08 850
section和div 一、DIV div即division（区块），把文档分割为独立的、不同的部份。作用，以下三种情况应该用div标签： 　　1.用于页面布局，且不是 header、footer 之类的专属区域。 　　2.单纯的对一个段内容进行 CSS 样式定义。 　　3.对一段内容进行 JS 控制。。 SECTION 1.section在html5中并不是用来取代 div 的。它是具有语义的文...
bootstrap4基础——布局
weixin_42935779的博客
09-21 1313
学习笔记： 各个类的作用： containers：这个类是bootstrap框架最外层的类，它可以随着屏幕大小的变化而变化，另外还有container-fluid，它的宽度一直是100%； row：表示“行”的意思，在它提供的栅格系统中，一行分成12列，超过12列就会换一行。 col：表示“列”的意思，col-4表示在这一行中，有4列合并成为一列，占据了4列的宽度。 align-items-cen...
学习Bootstrap（二）——全局样式，标题
cody_cat的博客
12-27 669
一. 全局样式Bootstrap框架并不一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下： 移除body的margin声明 设置body的背景色为白色 为排版设置了基本的字体、字号和行高 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式 styl
Bootstrap的学习以及简单运用
weixin_34226182的博客
10-02 83
1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;title&gt;柠檬学院&lt;/title&gt; 5 &lt;meta charset="utf-8"&gt; 6 &lt;meta name="viewport" content="width
零基础Bootstrap入门教程(23)--标签页
程序员大阳
03-07 805
本文目录1. 概述2. 使用方法3. 小结 1. 概述 标签页使用频率不算高，也不算太低，主要用于同一显示区域内切换不同的内容。本篇来简单讲一下如何使用标签页。 2. 使用方法 首先我们先来看一个标准的标签页代码： <ul class="nav nav-tabs"> <li><a href="#section1" data-toggle="tab">春晓</a></li>
bootstrap基础知识学习笔记
09-01
主要针对bootstrap基础知识为大家整理了详细的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
services-section-bootstrap
03-18
服务部分引导
Bootstrap进度条组件知识详解
09-02
在网页中，经常见到进度条效果，那么这些个性的进度条组件效果是怎么实现的呢，下面脚本之家小编给大家分享Bootstrap进度条组件知识详解，感兴趣的朋友要求学习吧
bootstrap一些笔记
08-13
bootstrap一些笔记
bootstrap-4.6.2
最新发布
06-13
bootstrap4下载
Bootstrap页面布局基础知识全面解析
09-02
Bootstrap作为支持响应式布局的一个前端插件，发挥着非常重要的作用，下面通过本文给大家介绍Bootstrap页面布局基础知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
BootStrap实现全页滚动效果
Muchen灬
08-04 4846
实现全页滚动效果 常用的相关CDN BootStrap: <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <!--jquery--&...
Bootstrap 标签导航的布局
歪脖先生的博客
03-09 4650
标签导航的布局默认情况下，标签的位于顶部。为了灵活控制标签的位置，Bootstrap额外提供了 3 个类，分别是 .tabs-left、.tabs-right、.tabs-below，它们分别让标签位于左侧、右侧、底部，可以根据需要选择使用。如果希望标签在左侧，只需为 .tabbable 容器追加 .tabs-left 类即可。如：&lt;div class="tabbables tabs-lef...
Bootstrap框架学习(四）——Bootstrap组件设计之分页、标签与徽章、进度条、字体
weixin_42029090的博客
06-12 796
四、Bootstrap组件设计4、Bootstrap分页    在Bootstrap框架中使用.pagination类来实现分页，答题可分为标准分页方式和翻页分页方式两种。    标准分页方式       Bootstrap框架中标准分页方式比较适合App应用搜索结果的展示。通过.pagination类定义一个标准分页组件。    &lt;div class="container"&gt; &lt...
bootstrapV4.6.0内间距、外间距（官方hack类css代码）-解读篇
草巾冒小子的博客
02-07 1052
代码 · 介绍如下： 外间距margin的class类名: m-0 mt-1 mb-2 内间距padding的class类名: p-1 pt-2 pb-3 代码解释： 以mb-1为例，表示“margin-bottom为1rem”，也就是 16px； （注意：bootstrapV4.6的scss为rem计量单位。） 调用方式： //比如： class="mb-1" 说明：（具体不再赘述） 代码研究可以参考官网文档，浏览器F12审查Element代码标签的class命名方式和对应的cs
java开发所需知识栈
05-24
Java开发需要掌握以下知识点： 1. Java基础知识：包括语法、面向对象、集合、异常、IO流等基础知识。 2. 数据库：需要掌握SQL语言和关系型...总的来说，Java开发需要掌握多个领域的知识，需要不断学习和积累经验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值