Questions about Bootstrap

Post by **Robin** » Sun Sep 28, 2014 10:32 pm

I'm intrigued by Bootstrap but intimidated by the backend code. (I have lots of trouble understanding much of PHP and Javascript, if that gives you any idea of my (limited) coding prowess. :/ No coding ninja skills here, lol)

Mainly, I'm wondering what all Bootstrap can be applied to, and sources for good tuts that aren't jargon-heavy. :)

Post by **Camy** » Mon Sep 29, 2014 1:47 am

Bootstrap is pretty much a framework and it can be applied for any kind of site from a landing page/coming soon/countdown to a new's site. The Microsoft news site using it as does Codecademy.

To get an idea, here is an example of one of the many free example themes showing the styles it has. This is taken from from their getting started documentation, which is easy to follow.

Bootstrap does all the hard work for you and most, if not all, of the themes/templates you find will have a page that shows what everything it has looks like and they're usually linked in the navigation. All you need to get is the classes/ids/etc., of those properties that you want and with the css, you can easily create a site made with bootstrap. Just as long as you have that CSS and the core of Bootstrap and other parts of it that you downloaded and have it uploaded, it will work.

In reverse though, it won't be that easy since the CSS is all bunched up (WHY they did that I don't even know...), but you can search for which ones you want and rename them to what you have.

The easier route would be the first of course, so start up from scratch to get a better idea of what works and you can also fiddle with it. Boostrap's framework also has comments, which is very helpful.

Hope that's understandable. If you want a more visual idea, I found the course that I came upon that touches upon it over here (which is FREE) on Udemy. You can easily skip the parts you don't want to watch/read about like I did.

Hope that helps xD

Post by **nyxmidnight** » Mon Sep 29, 2014 4:05 pm

I will be bringing examples and help once I get home! :)

Post by **Robin** » Mon Sep 29, 2014 4:59 pm

@Camy: Wow, thank you! Your explanations and the links make it seem more doable--I was thinking it was more like super-backend stuff, like trying to set up and communicate with MySQL (which I still have nightmares about LOLOLOL).

@Nyx: Awesome! Looking forward to it ^o^

Post by **nyxmidnight** » Tue Sep 30, 2014 9:42 am

Camy wrote:In reverse though, it won't be that easy since the CSS is all bunched up (WHY they did that I don't even know...)

It actually loads faster like this! :O The .min.css file is not intended to be opened and messed with anyway, but to be used as is. If you want to make changes/add classes, you should make a custom.css file and include it after the bootstrap CSS files.

CuriousLittleBird wrote:I'm intrigued by Bootstrap but intimidated by the backend code. (I have lots of trouble understanding much of PHP and Javascript, if that gives you any idea of my (limited) coding prowess. :/ No coding ninja skills here, lol)

Bootstrap is a CSS framework. What Javascript is in it is in the form of jQuery plugins that are optional and mostly used for enhancements and cosmetic changes and not core functions. There is no php in it.

CuriousLittleBird wrote:Mainly, I'm wondering what all Bootstrap can be applied to, and sources for good tuts that aren't jargon-heavy. :)

Bootstrap can be applied to any HTML page! Okay so I did not upload the example pages I meant to do last night but I have them here in code form to explain!

Here is a "kitchen sink" webpage without any CSS:

Code: Select all

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 - No Boot!</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>

    <h1>HTML Ipsum Presents</h1>
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>
    <h3>Header Level 3</h3>
      <ul>
       <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
       <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
       <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
       <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
      </ul>
            
      <pre>
        <code>
#header h1 a { 
  display: block; 
  width: 300px; 
  height: 80px; 
}
        </code>
      </pre>

    <form action="#" method="post">
      <fieldset>
        <legend>A form legend</legend>
          <div>
               <label for="name">Text Input:</label>
               <input type="text" name="name" id="name" value="" tabindex="1" />
          </div>

          <div>
            <h4>Radio Button Choice</h4>
              <label for="radio-choice-1">Choice 1</label>
              <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
              <label for="radio-choice-2">Choice 2</label>
              <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
          </div>

          <div>
            <label for="select-choice">Select Dropdown Choice:</label>
              <select name="select-choice" id="select-choice">
                <option value="Choice 1">Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
              </select>
          </div>
  
          <div>
            <label for="textarea">Textarea:</label>
            <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
          </div>
  
          <div>
            <label for="checkbox">Checkbox:</label>
            <input type="checkbox" name="checkbox" id="checkbox" />
          </div>

          <div>
            <input type="submit" value="Submit" />
          </div>
        </fieldset>
      </form>

      <table>
        <thead>
          <tr>
            <th>Some</th>
            <th>Table</th>
            <th>Right</th>
            <th>Here</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
        </tbody>
      </table>

Now, just by adding the Bootstrap CDN link in the HEAD section, three wrapper divs and a few classes here and there, I can make a beautiful webpage in a matter of seconds!

Code: Select all

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 - With Boot!</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <nav>
      <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>

    <h1>HTML Ipsum Presents</h1>
      <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
      <ol>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
      </ol>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
      </blockquote>
    <h3>Header Level 3</h3>
      <ul>
       <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
       <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
       <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
       <li>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</li>
      </ul>
            
      <pre>
#header h1 a { 
  display: block; 
  width: 300px; 
  height: 80px; 
}</pre>

    <form action="#" method="post" role="form">
      <fieldset>
        <legend>A form legend</legend>
          <div class="form-group">
               <label for="name">Text Input:</label>
               <input class="form-control" type="text" name="name" id="name" value="" tabindex="1" />
          </div>

          <div class="checkbox">
            <h4>Radio Button Choice</h4>
              <label for="radio-choice-1">Choice 1</label>
              <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
              <label for="radio-choice-2">Choice 2</label>
              <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
          </div>

          <div class="form-group">
            <label for="select-choice">Select Dropdown Choice:</label>
              <select class="form-control" name="select-choice" id="select-choice">
                <option value="Choice 1">Choice 1</option>
                <option value="Choice 2">Choice 2</option>
                <option value="Choice 3">Choice 3</option>
              </select>
          </div>
  
          <div class="form-group">
            <label for="textarea">Textarea:</label>
            <textarea class="form-control" cols="40" rows="8" name="textarea" id="textarea"></textarea>
          </div>
  
          <div class="checkbox">
            <h4>Checkboxes!</h4>
            <label>
              <input type="checkbox" id="Checkbox1" value="option1"> Choice 1
            </label>

            <label>
              <input type="checkbox" id="Checkbox2" value="option2"> Choice 2
            </label>

          <div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </fieldset>
      </form>

      <table class="table table-hover">
        <thead>
          <tr>
            <th>Some</th>
            <th>Table</th>
            <th>Right</th>
            <th>Here</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
        </tbody>
      </table>
        </div>
      </div>
    </div>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

You can copy and paste these in two html5 documents and compare the results :D

As for tutorials, you should really, really read the Bootstrap Documentation, as it is pretty well explained. Skip most of the Get Started section, which is more for developer who want to dive into modifying the core files and not for you; only read the Basic Template and Examples subsections, then go straight to CSS and Components to see what Bootstrap can do for you right out the box just by adding a few CSS classes to your HTML (or copying the example code).

I'm probably exceeding a characters limit here so let me know if you have more questions!

Post by **Robin** » Tue Sep 30, 2014 1:38 pm

@Nyx awesome!!! I'll read over everything you and Camy both have put here and post any questions I have...though this looks a bit simpler than I thought it was going to be! (Famous last words, probably xD)

Post by **nyxmidnight** » Tue Sep 30, 2014 1:55 pm

Don't worry too much! I resisted Bootstrap for the longest time because I was so convinced I wouldn't be able to understand it, and then one day, bored at work without work, I read the docs. It was a revelation.

Mikari · Post by **Mikari** » Thu Oct 02, 2014 11:17 pm

I've been hearing a lot about this but haven't really looked into it mainly because I'm not sure what it's for. I mean, the benefit of having it. Is it like a template or something like wordpress?

Post by **Robin** » Fri Oct 03, 2014 3:26 am

@Mikari from what I've been able to study of it thus far, Bootstrap is kind of like a box of Legos--you've got a ton of different-sized pieces that can all "snap" together to make various designs. You still have complete control over what pieces you select and how you put them together; it's just you don't have to make the Legos from scratch before you play with them.

(Bonus: everything is RESPONSIVE ^o^)

Post by **Camy** » Fri Oct 03, 2014 7:27 pm

Mikari wrote:I've been hearing a lot about this but haven't really looked into it mainly because I'm not sure what it's for. I mean, the benefit of having it. Is it like a template or something like wordpress?

It's like a template, not a CMS like Wordpress, but it can be applied to a Wordpress site.

Amassment Message Board

Questions about Bootstrap

Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap

Re: Questions about Bootstrap