Bs Images

-

Bootstrap Images

Bootstrap Image Shapes

Rounded Corners:
cast adds rounded corners to an icon BS Images
Circle:
cast adds rounded corners to an icon BS Images
Thumbnail:
cast adds rounded corners to an icon BS Images

Rounded Corners

The .img-rounded cast adds rounded corners to an icon (IE8 does non back upwards rounded corners):

Example

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre">

Circle

The .img-circle cast shapes the icon to a circle (IE8 does non back upwards rounded corners):

Example

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre">

Thumbnail

The .img-thumbnail cast shapes the icon to a thumbnail:

Example

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Responsive Images

Images come upwards inwards all sizes. So practise screens. Responsive images automatically accommodate to check the size of the screen.
Create responsive images past times adding an .img-responsive cast to the <img> tag. The icon volition in addition to thence scale nicely to the nurture element.
The .img-responsive cast applies display: block; in addition to max-width: 100%; in addition to height: auto; to the image:

Example

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Image Gallery

You tin equally good move Bootstrap's grid organisation inwards conjunction amongst the .thumbnail cast to practise an icon gallery.
cast adds rounded corners to an icon BS Images
Lorem ipsum donec id elit non mi porta gravida at eget metus.
cast adds rounded corners to an icon BS Images
Lorem ipsum donec id elit non mi porta gravida at eget metus.
cast adds rounded corners to an icon BS Images
Lorem ipsum donec id elit non mi porta gravida at eget metus.
Note: You volition larn to a greater extent than close the Grid System after inwards this tutorial (how to practise a layout amongst dissimilar amount of columns).

Example

 <div class="row">
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/lights.jpg">
        <img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/nature.jpg">
        <img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
  <div class="col-md-4">
    <div class="thumbnail">
      <a href="/w3images/fjords.jpg">
        <img src="/w3images/fjords.jpg" alt="Fjords" style="width:100%">
        <div class="caption">
          <p>Lorem ipsum...</p>
        </div>
      </a>
    </div>
  </div>
</div>

Responsive Embeds

Also allow videos or slideshows scale properly on whatever device.
Classes tin move applied straight to <iframe>, <embed>, <video>, in addition to <object> elements.
The next instance creates a responsive video past times adding an .embed-responsive-item cast to an <iframe> tag (the video volition in addition to thence scale nicely to the nurture element). The containing <div> defines the facial expression ratio of the video:

Example

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
What is facial expression ratio?

The facial expression ratio of an icon describes the proportional human relationship betwixt its width in addition to its height. Two mutual video facial expression ratios are 4:3 (the universal video format of the 20th century), in addition to 16:9 (universal for hard disk idiot box in addition to European digital television).
You tin select betwixt ii facial expression ratio classes:
<!-- 16:9 facial expression ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 facial expression ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>


       

Comments

Post a Comment

Popular posts from this blog

What Are The Main Components of a Computer System

-
Each part has a purpose and this list will help give you a brief idea of what the purpose if for each. Tower: The tower or computer case is there to protect the components inside. The case works to protect the parts against electrical shock, dirt and other sources of danger that surround your computer. Power Supply: The power supply is found secure inside your tower and offers the main source of power to the motherboard and other components such as your hard drive and Rom drives. The power supply can be changed out for a larger wattage one to ensure better power and cooling to the parts installed on your system. Motherboard: The motherboard acts as the heart of the computer where everything ties into it and works from it. The slots on the motherboard are available for an assortment of components such as the CPU, memory, video, sound, TV tuners etc. CPU: The central processing unit, otherwise known simply as the CPU is the brains of the sy...
Read more

Top Qualities To Look For In An IT Support Team

-
Regardless of how "state of the art" or "updated" your company's technical systems may be, they will at one time or another encounter glitches or breakdowns that will require immediate attention. A company that experiences such issues must have an IT support team that they can turn to in order to acquire fixes and upgrades. Otherwise, a company will experience substantial "down time" or may even lose clients. This could result in life-long issues for the company and could ultimately result in a loss of profit. The best solution to avoid such detrimental issues is to obtain the services of an IT support provider that can prevent such situations from arising. You will need to take advantage of IT support London services that realize that your company will grow over time, and know how to adapt and maintain your technical services to keep up and manage this growth. Additionally, you will only want to deal with an IT su...
Read more

How To Integrate Google Adwords Api Into Codeigniter?

-
Image
One blogger gave me reckon Just add together all the api documents to the third_party folder in addition to ask the library from your controller or library in addition to voilà! Figure: Google Adwords API Hierarchy After many hours of searching, reading in addition to testing I was successful to integrate AdWords API PHP Client Library into Codeigniter 2.X. Step yesteryear footstep conduct on how to integrate Google Adwords API into Codeigniter. Google Adwords API into Codeigniter # Steps Description 1. Download AdWords API PHP Client Library This customer library makes it easier to write PHP applications that programmatically access the AdWords API or DoubleClick Ad Exchange Buyer API. I accept downloaded version 4.5.1( adwords_api_php_4.5.1 ) 2. Extract the compressed archive (.zip or .tar.gz) in addition to glue the src folder within codeigniter's third_party folder. Grab solely src folder fr...
Read more