Aqdas Zulfiqar

29038
Bscs 4
Web Assignment 3
Question 1 :
Write Media Queries with example.

Media Query:
A media query is an HTML/CSS functionality that allows the content of a Web page
to adapt to the type of media that the page is being rendered in, such as a
computer screen or that of a phone or tablet. This is used for implementing
responsive Web design.

Syntax:
@media not|only mediatype and (expressions) {
   CSS-Code;
}

1. For Menus
In this example, we use media queries to create a responsive navigation menu,
that varies in design on different screen sizes.

Example:

Html:

    <div class="topnav">
        <a href="#">HTML</a>
        <a href="#">CSS</a>
        <a href="#">JAVASCRIPT</a>
      </div>

     

Css:

@media screen and (max-width: 600px) {

  .topnav a {
    float: none;
    width: 100%;
  }
}

For Big Screens:

For Small Screens:

2. For Columns
A common use of media queries, is to create a flexible layout. In this example,
we create a layout that varies between four, two and full-width columns,
depending on different screen sizes:
Example:
Html:
<div class="row">
        <div class="column" style="background-color:#aaa;">
          <h2>Column 1</h2>
        </div>
        <div class="column" style="background-color:#bbb;">
          <h2>Column 2</h2>
        </div>
        <div class="column" style="background-color:#ccc;">
          <h2>Column 3</h2>
        </div>
        <div class="column" style="background-color:#ddd;">
          <h2>Column 4</h2>
       
        </div>
      </div>

Css:
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

For large Screens:

For Small Screens:

 3. Hide Elements With Media Queries
Another common use of media queries, is to hide elements on different screen
sizes:
Example:
Html:
 <h2>Hide elements on different screen sizes</h2>

<div class="example">Hidden Content</div>

<p>Showed Content</p>

Css:
@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

For large screens:

For Small Screens:

4. Change Font Size With Media

Queries
We can also use media queries to change the font size of an element on
different screen sizes:
Example:
Html:
<div class="example">Example</div>

Css:
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

For large Screens:

For Small Screens:

5. Flexible Image Gallery

we use media queries together with flexbox to create a responsive image
gallery.
Example:
@media screen and (max-width: 800px) {

.column {

flex: 50%;

max-width: 50%;

@media screen and (max-width: 600px) {

.column {

flex: 100%;
 max-width: 100%;

6. Orientation: Portrait / Landscape

using media query:
Media queries can also be used to change layout of a page depending on the
orientation of the browser.
Example:
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

7. Min Width to Max Width

You can also use the (max-width: ..) and (min-width: ..) values to set a
minimum width and a maximum width.
Example:
@media screen and (max-width: 900px) and (min-width: 600px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Question 2 :
Write All bootstrap classes with example.
For tables:
 1. .active:
Adds a grey background color to the table row (tr)or table cell (td) (same color
used on hover)

2. .danger:
Adds a red background to the table row (tr) or table cell (td). Indicates a
dangerous or potentially negative action

3. .info:
Adds a light-blue background to the table row (tr) or table cell (td). Indicates
a neutral informative change or action.

4. .success:
Adds a green background color to a table row (tr) or table cell (td). Indicates
success or a positive action

5. .table:
Adds basic styling to a table (padding, bottom borders, etc)

6. .table-bordered:
Adds borders on all sides of the table and cells

Example:

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aqdas</td>
        <td>Zulfiqar</td>
        <td>[email protected]</td>
      </tr>      
      <tr class="success">
        <td>Rimsha</td>
        <td>Tabish</td>
        <td>[email protected]</td>
      </tr>
      <tr class="danger">
        <td>maham</td>
        <td>noor</td>
        <td>[email protected]</td>
      </tr>
      <tr class="info">
        <td>shoaib</td>
        <td>ahmed</td>
        <td>[email protected]</td>
      </tr>
      <tr class="active">
        <td>tabish</td>
        <td>hussain</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>
Output:

For Buttons:
7. .active:

Adds a blue background color to simulate a "pressed" button

 8. .btn:

Creates a basic button (gray background and rounded corners)

9. .btn-lg:

Large button

10. .btn-sm:

Small button

11. .disabled:

Disables a button (adds opacity and a "no-parking-sign" icon on hover)

Example:

 <div class="container">
        <h2>Buttons</h2>
        <button type="button" class="btn btn-primary">Primary Button</button>
        <button type="button" class="btn btn-primary active">Active
button</button>
        <button type="button" class="btn btn-primary disabled">Disabled
button</button>
      </div>

For Carousel:
12. .carousel:
Creates a carousel (slideshow)
 13. .carousel-caption:
Creates a caption text for each slide in the carousel

14. .carousel-inner:
Container for slide items

15. .carousel-control:
Container for next and previous links

Example:

<div class="container">
        <h2>Carousel Example</h2>  
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>
     
          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="1.jpg" alt="Los Angeles" style="width:80% height:200px;
">
            </div>
            <div class="item">
              <img src="3.jpg" alt="New york" style="width:80% height:200px;">
            </div>
          </div>
     
          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" data-
slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
 For NavBar:
16. .navbar:
Creates a navigation bar

17. .navbar-btn:
Vertically aligns a button inside a navbar

Example:

 <nav class="navbar navbar-default">

        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
          </ul>
        </div>
      </nav>
       
      <div class="container">
        <h3> Navigation Bar</h3>
        <p>A navigation bar is a navigation header that is placed at the top of
the page.</p>
      </div>

For Images:
18. .thumbnail:
Adds a border around an element (often images or videos) to make it look like a
thumbnail

19. .img-rounded:
Adds rounded corners to an images.

Example:

 <div class="container">
        <h2>Image Thumbnails</h2>
        <p>Click on the images to enlarge them.</p>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <a href="1.jpg" target="_blank">
                <img src="1.jpg" alt="Lights" style="width:100%">
                <div class="caption">
                  <p>Flower 1</p>
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <a href="3.jpg" target="_blank">
                <img src="3.jpg" alt="Nature" style="width:100%">
                <div class="caption">
                  <p>Flower 2</p>
                </div>
              </a>
            </div>
          </div>
         
        </div>
      </div>
     

For Dropdowns:
 20. .dropdown:
Creates a toggleable menu that allows the user to choose one value from a
predefined list

21. .dropdown-header:
Used to add headers inside the dropdown menu.

Example:

<div class="container">
        <h2>Dropdowns</h2>                                      
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-
toggle="dropdown">Dropdown Example
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
      </div>