Bootstrap responsive examples please

Navigation
-1
Hello, I'm a beginner in this freameworks world, and I have a lot of difficulty, I'd like someone to give me a simple example of responsive div, which suits some screen sizes using the bootstrap, making some comments about the classes used. I say this because, I have not yet found anywhere on the Internet that explains with practical examples, it is usually very theoretical, only with the syntax and functions of the framework ...

    
asked by anonymous 01.11.2017 / 04:36

2 answers

1

The Bootstrap CSS framework has several responsibility utilities, explained in basic form below:

In Bootstrap CSS exists the mechanism called 'grid', which is nothing more than to distribute the html structure in a grid, which contains line (classe .row) and columns within this line (classes col-*-*) , works as in the following example: / p> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div> 
  </div>
</div>

This short example opens the door to explaining column classnames and accountability utilities, column setters are defined as follows:

'.col-sizeDispositive-numberColumns'

Being the size of the devices:

  • xs : Extra Small - > For mobile
  • sm : Small - > For tablets
  • md : Medium - > For desktop
  • lg : Large - > For large screens

And number of columns can vary between 1 and 12, always adding 12 per line, if it exceeds, as quoted in the official documentation:

  

If more than 12 columns are placed within a single row, each group of   extra columns will, as one unit, wrap onto a new line.

It will receive the property wrap and the columns that are left over and / or are part of the element with more than 12 will become part of the following line, as in the following example: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Sendo 9 + 4 = 13 &gt; 12, está coluna de valor 4 será quebrada como se fizesse parte de uma nova linha.</div>
  <div class="col-xs-6">.col-xs-6<br>Colunas subsequentes permanecem na próxima coluna.</div>
</div>

Another important thing about responsive divs, are the utilities, which serve to hide or show elements according to the device, these classnames should be added to the element that should receive their property and are as follows:

Visibilidate:

  • .visible-xs - *
  • .visible-sm - *
  • .visible-md - *
  • .visible-ls - *

These accountability utilities may receive as part of the (no lugar do *) value:

  • -block
  • -inline
  • -inline-block

The sizes are the same for the size of the div, ie '.visible-xs-block' will display in mobile resolutions, and so on.

Concealment:

  • .hidden-xs - *
  • .hidden-sm - *
  • .hidden-md - *
  • .hidden-ls - *

In the same way as to display, we can hide according to the device, that is, '.hidden-md' will hide certain element for default desktop resolutions.

To finish, still within definitions of responsibility, we can indicate the property offset , whose function is to indicate that a certain number of columns must be skipped in a div : 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

01.11.2017 / 11:57
0

I will list here some legal examples that I have found:

EXAMPLE 1 

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
    <div class="row">
        <div class="col-lg-2">
            <div class="panel">
                <fieldset>
                    <legend>Legend</legend>
                    <div class="radio">
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                            Option one
                        </label>
                    </div>
                </fieldset>
            </div>
        </div>
        <div class="col-lg-2">
            <div class="panel">
                <fieldset>
                    <legend>Legend</legend>
                    <div class="form-group">
                        <label for="exampleInputEmail">
                            Email address</label>
                        <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
                    </div>
                </fieldset>
            </div>
        </div>
    </div>

EXAMPLE 2

And most importantly, about not finding quality documentation for your purpose, I believe you'll enjoy this material a lot #

    
01.11.2017 / 11:24
Checkbox show / hide button for generated lines How to leave a mysql database online?