Tell me why some bootstrap classes display elements in the wrong way?

For example, here’s a simple page: http://paste.ubuntu.com/23725639/

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> <meta charset="utf-8"> <title>yep</title> </head> <body> <p> <button class="btn btn-large btn-primary" type="button">Большая кнопка</button> <button class="btn btn-large" type="button">Большая кнопка</button> </p> <p> <button class="btn btn-primary" type="button">Кнопка по умолчанию</button> <button class="btn" type="button">Кнопка по умолчанию</button> </p> <p> <button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button> <button class="btn btn-small" type="button">Маленькая кнопка</button> </p> <p> <button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button> <button class="btn btn-mini" type="button">Мини-кнопка</button> </p> </body> </html>

Here is the result:

output result

And such a picture is expected:

required result

Although the ways are all right, in my opinion.

  • What bootstrap do you use? - Roman Kozin

3 answers 3

1) Bootstrap 2.3.2

You took the code from the second Boostrap, and hooked up the third. With styles from version 2.3.2 it looks like it should:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css"> <p> <button class="btn btn-large btn-primary" type="button">Большая кнопка</button> <button class="btn btn-large" type="button">Большая кнопка</button> </p> <p> <button class="btn btn-primary" type="button">Кнопка по умолчанию</button> <button class="btn" type="button">Кнопка по умолчанию</button> </p> <p> <button class="btn btn-small btn-primary" type="button">Маленькая кнопка</button> <button class="btn btn-small" type="button">Маленькая кнопка</button> </p> <p> <button class="btn btn-mini btn-primary" type="button">Мини-кнопка</button> <button class="btn btn-mini" type="button">Мини-кнопка</button> </p>

2) Bootstrap 3.3.7

To make it work with the third Boostrap, change three things:

  1. As advised by soledar10 , set the size of the buttons with the .btn-lg , .btn-sm and .btn-xs .
  2. As Byulent advises, connect a default theme so that volume and shadows appear on the buttons.
  3. And add the .btn-default class to the gray buttons.

It turns out:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"> <p> <button class="btn btn-primary btn-lg" type="button">Большая кнопка</button> <button class="btn btn-default btn-lg" type="button">Большая кнопка</button> </p> <p> <button class="btn btn-primary" type="button">Кнопка по умолчанию</button> <button class="btn btn-default" type="button">Кнопка по умолчанию</button> </p> <p> <button class="btn btn-primary btn-sm" type="button">Маленькая кнопка</button> <button class="btn btn-default btn-sm" type="button">Маленькая кнопка</button> </p> <p> <button class="btn btn-primary btn-xs" type="button">Мини-кнопка</button> <button class="btn btn-default btn-xs" type="button">Мини-кнопка</button> </p>

    Try connecting bootstrap-theme.css ( bootstrap-theme.min.css ).

    Yes, and it is better to use either complete files only, or only minified ones.

      It is necessary to use classes with the prefix -lg , -sm , -xs

      Bootstrap buttons-sizes

       <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <p> <button class="btn btn-lg btn-primary" type="button">Большая кнопка</button> <button class="btn btn-lg" type="button">Большая кнопка</button> </p> <p> <button class="btn btn-primary" type="button">Кнопка по умолчанию</button> <button class="btn" type="button">Кнопка по умолчанию</button> </p> <p> <button class="btn btn-sm btn-primary" type="button">Маленькая кнопка</button> <button class="btn btn-sm" type="button">Маленькая кнопка</button> </p> <p> <button class="btn btn-xs btn-primary" type="button">Мини-кнопка</button> <button class="btn btn-xs" type="button">Мини-кнопка</button> </p>