Twitter's Bootstrap - a few questions about simple page

Question

I've started learning Twitter's Bootstrap, and I've got a few questions about. I'm trying to make a simple page. Here's the one I'm writing: http://k-off.org/files/index.html Could you take a look though the code a bit?

1)As I unrderstand, all the row in the default grid has 12 cells. So, If I make empty div class="span4" /div, then div class="span4" CONTENT /div and then again empty div class="span4" /div, my content div will be placed in the center of the page, yeah? There's a sample code I use for this example and it doesn't work:

<!--ROW WITH INPUT TEXT FORM AND BUTTON. DIV SPAN3, FORM {DIV SPAN5, DIV SPAN1}, DIV SPAN3-->
<div class="row">
  <div class="span3"></div>

  <form>
    <div class="span5">
      <input type="text" class="span3" placeholder="Type something…">
    </div>
    <div class="span1">
      <input type="submit" class="btn btn-success" value="Lorem">
    </div>
  </form>

  <div class="span3"></div>
</div>

2)How can I manage element's width inside my div? In the previous example I'd like to make a form with 2 divs. First is span5, second is span1. First contains text input, second contains a button. So, I'd like to make these text input and button in a width of span5 and span1. How can I do it?

3)I've noticed that on the main bootstrap page http://twitter.github.com/bootstrap/ , when you resize it, elements (h1, p, buttons) change their styles – h1 and p's become smaller, and 2 download buttons stand in a column one under another with width = 100% of a small, resized page. How can I do this?

4)When I resize page, my menu on navbar hides and a navigation button shows in the right corner. Athough, I've included jquery in my page, it doesn't want to work. Why?

Thanks in advance!

UPDATE: hovmand, thanks for the fast reply,

1, 2)I've made some changes using offsetting. I created div with ofset4 and putted input with span3 inside. Then another div with button with span1 specified. As a result it should smth like this: offsetting_4_cells|input_for_3_cells|button_for_1_cell|other_cells. There is the code I've done:

<!--ROW WITH INPUT TEXT FORM AND BUTTON.-->
<div class="row">
  <!--<div class="offset3"></div>-->
  <form>
    <div class="offset4">
      <input type="text" class="span3" placeholder="Type something…">
    </div>
    <div>
      <input type="submit" class="btn btn-success span1" value="Go">
    </div>
  </form>
</div>
<!--ROW WITH ALERT.-->
<div class="row">
    <div class="alert alert-error span4 offset4">Alert</div>
</div>

Still doesn't work. Interesing, that in the second row with alert it worked perfeclty. Maybe I shouldn't create separate div's for each input of button and specify offset styles direclty for input or button? I mean: input type="text" class="offset4 span3" placeholder="Type something…"

3)Well, I've noticed that I have included bootstrap-responsive.css, and it resizes my button (although, in a very strange way), meanwhile my h1 and p's stay the same. I'll read about this, thanks.

4)I've fixed it. Now it works! Also, I'd like to know. Now I've included all 16 js-files to my code. Do I really need all of them for dropdown navbar?

Updated code can be found here: http://k-off.org/files/index2.html

hovmand hovmand · Accepted Answer · 2012-04-29T19:08:16

1) I'm not sure if I understand 100% but the Offsetting Columns might be your solution: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

2) Instead of putting the class span5 on the div, put them on the input field and the class span1 on the button.

3) The feature is called responsive design: http://twitter.github.com/bootstrap/scaffolding.html#responsive

4) I think it is because your js files is misplaced. For instance the file: http://k-off.org/assets/js/bootstrap-tooltip.js is not found.

REPLY TO EDIT

1) I'm not quite sure what exactly your trying to achieve, but you should probably try to play with different kind of combinations of the classes. Hope it'll work for you.

4) I think it is sufficient to include the js file that you get when you click the download button on the front page. The reason why you can download them separately is if you only need some of the features.

Twitter's Bootstrap - a few questions about simple page

2 Answers