web-dev-qa-db-fra.com

Personnaliser la taille du texte dans le bouton bootstrap

J'essaie de créer un bouton "Télécharger à partir de l'App Store" à l'aide de Twitter Bootstrap.

Le problème que je rencontre consiste à essayer de rendre le texte "App Store" plus volumineux que le texte "Télécharger à partir du" au-dessus.

Voici HTML et CSS que j'utilise. 

.fixed-hero .hero-text {
    padding-top: 90px;
    width: 65%;
    color:#fff;
    font-family: Century Gothic, sans-serif;
    font-size: 2.2em;
    line-height: 1.5em;  
}
.fixed-hero .hero-button {
    padding-top: 60px;
    width: 65%;
}

.btn.btn-large.btn-danger{
    border-style:solid;
    border-width:1px;
    border-color:#fff;
    background-image: linear-gradient(to bottom, rgb(204, 81, 81), #990000);
    text-align: left;
}

    <div class="hero-button text-center">
            <a href="#" class="btn btn-large btn-danger">
                <i class="icon-Apple icon-3x pull-left"></i>
                <div>
                Download from the
                App Store
                </div>
            </a>
    </div>

J'apprécie les commentaires et l'expertise.

htmlcsstwitter-bootstrap
15
bbrooke

entourez le texte et réduisez-le avec la taille de police: plus petite ou quelle que soit votre taille.

<div class="hero-button text-center">
        <a href="#" class="btn btn-large btn-danger">
            <i class="icon-Apple icon-3x pull-left"></i>
                <span style="font-size:smaller;">Download from the</span>
            App Store
        </a>
</div>
12
tmcc

En fait, si vous y pensez, vous pouvez le faire de manière arbitraire à condition qu’une des deux conditions soit remplie. 1) la taille du bouton est cohérente pour avoir la pause au bon endroit (en utilisant une largeur fixe du bouton ou en le rendant de taille relative à un conteneur de largeur fixe) ou 2) en appliquant une balise <br> à l’emplacement souhaité. Ensuite, il suffit d'ajouter une pseudo-classe :first-line

.btn div {
  font-size:40px
}

.btn div:first-line {
    font-size:20px
}

http://jsbin.com/oxivoz/2/
http://jsbin.com/oxivoz/2/edit

1
Joseph Marikle