twbs / bootstrap Goto Github PK

When I write, for example

<label for="user[password]">Password</label>
  <div class="input">
    <div class="input-append">
      <input class="xlarge" id="user[password]" name="user[password]" type="password">
      <label class="add-on">
        <input type="checkbox">
      </label>
  </div>
</div>

Why checkbox is not appended to input field?
http://d.pr/FvnD+
I need it to use only one password field on sign up, when checkbox is checked, password is shown.

You could simplify the clearfix code with the code below, works in all modern browsers.

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

Source: http://nicolasgallagher.com/micro-clearfix-hack/

Unfortunately, Firefox sets the line-height of these elements to line-height:normal !important in the UA stylesheet. That makes it impossible to modify the line-height, so the .btn component should use line-height:normal and rely on changing the padding instead.

Quick fix:

form.form-stacked div.error {
  margin-top: 0;
}

But I believe it could look better:

form.form-stacked div.error {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-top: 0;
  margin-left: -10px;
}

Any ideas?

While the text describing address is clear, using a postal address in the example is liable to mislead people into thinking it’s applicable for any postal address. Also, it’d be more common for contact info to be an email address, no?

This issue can be solved changing line 58 (https://github.com/twitter/bootstrap/blob/master/lib/patterns.less#L58) to > form.

In my case, the popover markup is inside the .topbar element.

Is it not.

The address element is used for contact information and not for addresses. From the HTML5 Spec:

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. ... The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information.

Apologies for the lack of a pull request, I don't work with Less but I thought I'd share this (in case you're interested) before I get around to pushing the CSS adaption I'm playing around with.

IE bug

The IE7/8 dropdown "hiding" bug is caused by the combination of z-index and filter on the fixed-position element. Easiest to drop the filter altogether from .topbar but you could, alternatively, use a wrapper element to control the positioning and z-index separately from the background and other styles.

Modified JS

I've modified the JS for the dropdown to be a bit simpler and a bit more flexible.

This should help make it reusable outside of the topbar, allow it to be used with different HTML elements (but the same overall structure: wrapper, child-trigger, child-show/hide), and have contents other than links (e.g. a settings panel that you might want to keep open while clicking and toggling options).

It would involve decoupling the drop-down styles (or at least the ones needed for the general presentation and behaviour) from the .topbar pattern. They're two different patterns and it would be really handy for the purposes of Bootstrap.

var Bootstrap = {};

Bootstrap.dropdown = (function () {
    var $allMenuEls = $('a.menu');

// Hide all open menus and show the target's menu
    $('body').delegate('a.menu', 'click', function (e) {
        e.preventDefault();

        var $this = $(this),
            $parent = $this.parent();

        $parent.toggleClass('open');
        $allMenuEls.not($this).parent().removeClass('open');
    });

    // Hide all menus when clicking outside of them (i.e on the document)
    $(document).click(function (e) {
        var $target = $(e.target);
        if ($target.parents('.open').length === 0) {
            $allMenuEls.parent().removeClass('open');
        }
        e.stopPropagation();
    });
}());

I'm sure someone with proper JS chops can improve it or fix problems I can't see.

Thanks

A lot of things doesn't work in these browsers, mainly "Alerts & Erros", "Pagination" loose the borders, "Dropdown" doesn't work properly and so on.

There's a better clearfix hack, why not use it?

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix /
.clearfix:before,
.clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
/ Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix {
zoom: 1;
}

I am lacking a list of supported browsers. Is there such a list somewhere?

Shouldn't the basic alerts dismiss upon clicking the 'x' in the upper right corner?

I get a pointer cursor on hovering over, but clicking yields no results.

Perhaps there is some JavaScript I'm missing, but I did not notice any in the assets directory.

It's still okay to use `<b>` and `<i>` tags in HTML5, but they don't come with inherent styles anymore.

They do. Browser style sheets define both elements, and that formatting is the expected default. I think what you mean is something like:

“It's still okay to use <b> and <i> tags in HTML5, and they don't have to be styled bold and italic respectively (although if there’s a more semantic element, use it).”

The existing code contains some unnecessary styles and you can't include HTML entities (i.e. ↓) as values of the content property. The block below will do the same thing. You should probably consider dropping the tags from the selectors too.

.zebra-striped .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000 transparent;
  visibility: hidden;
  -webkit-box-shadow: 0 1px 0 #fff;
  -moz-box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=30);
  -khtml-opacity: 0.3;
  -moz-opacity: 0.3;
  opacity: 0.3;
}

Thanks

Mainly an enhancement for keyboard users by including :focus and :active with the :hover styles.

If I resize any of the 2 top text areas (the ones with class "copy-code") and release the mouse, the resizing doesn't stop, so whenever the pointer nears that resize handle again, the text area resizes again.

I believe this framework is very well put together and I know its based on LESS but are you thinking about adding an option for the people that use SASS.

When at the top of the page, clicking "Grid" causes the nav to disappear until you begin to scroll. Seems to be isolated to Chrome. Fine in FF and Safari.

I'm actually trying to add this, but i'm not able to use it as a 960 grid as following:
[10px][940px][10px]
Anybody could help with that?

Is it possible to add support for having the nice css also available for Input Elements which are not wrapped in a form tag?

I thought about frameworks like GWT which are not using forms but need the nice layout.

The default .btn class includes an incorrect syntax for all the non-old-WebKit linear gradient declarations. So the standard buttons are flat grey color in every browser except Safari/Chrome.

background-image: -webkit-linear-gradient(#ffffff, color-stop(0.25, #ffffff), #e6e6e6);
background-image: -moz-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);

The same error is going to occur for the -ms, -o, and standards versions when you update the generated CSS file.

The correct syntax would be:

background-image: -webkit-linear-gradient(#fff, #fff 25%, #e6e6e6);
background-image: -moz-linear-gradient(#fff, #fff 25%, #e6e6e6);
...

White text (with a little shadow) against yellow background is not readable enough.

For some reason, I'm not able to replicate the dropdown on the sample nav bar here.

I even copied the html directly from the source, attached the bootstrap css file and ran in chrome in safari. Both show the dropdown but won't drop down on click...

Wondering if this is an issue for others or if I'm just doing something wrong.

The typography documentation about blockquote says:

Be sure to wrap your blockquote around paragraph and small tags. When citing a source, use the small element. The CSS will automatically preface a name with an em dash (—).

But what is actually styled in the CSS is the <cite> tag:

blockquote cite { ... }
blockquote cite:before { ... }

Also the (—). part renders literally instead of being html-interpreted.

Hey. You might be interested in an alternative approach to creating the grid that uses negative margins. Removes the need for all those :first-child margin overrides. It shouldn't be problematic, especially since people should be using the grid classes in isolation, but you might want to kick the tyres a bit. I dropped the !important because I didn't think it was needed, but I might have overlooked something.

Edit: And if you consistently use the column class (replace columns), the CSS could be further simplified.

.row {
    margin: 0 -20px;
    *zoom: 1;
}

.row:after {
    display: table;
    clear: both;
    content: "";
}

/* replace with .row .column */
.row .span1,
.row .span2,
.row .span3,
.row .span4,
.row .span5,
.row .span6,
.row .span7,
.row .span8,
.row .span9,
.row .span10,
.row .span11,
.row .span12,
.row .span13,
.row .span14,
.row .span15,
.row .span16 {
    float: left;
    margin-left: 20px;
    display: inline; /* IE6 double margin bug fix. Harmless, but could be sandboxed with * or _ hack */
}

.row .span1 { width: 40px; }
.row .span2 { width: 100px; }
.row .span3 { width: 160px; }
.row .span4 { width: 220px; }
.row .span5 { width: 280px; }
.row .span6 { width: 340px; }
.row .span7 { width: 400px; }
.row .span8 { width: 460px; }
.row .span9 { width: 520px; }
.row .span10 { width: 580px; }
.row .span11 { width: 640px; }
.row .span12 { width: 700px; }
.row .span13 { width: 760px; }
.row .span14 { width: 820px; }
.row .span15 { width: 880px; }
.row .span16 { width: 940px; }

.row .offset1 { margin-left: 80px; }
.row .offset2 { margin-left: 140px; }
.row .offset3 { margin-left: 200px; }
.row .offset4 { margin-left: 260px; }
.row .offset5 { margin-left: 320px; }
.row .offset6 { margin-left: 380px; }
.row .offset7 { margin-left: 440px; }
.row .offset8 { margin-left: 500px; }
.row .offset9 { margin-left: 500px; }
.row .offset10 { margin-left: 620px; }
.row .offset11 { margin-left: 680px; }
.row .offset12 { margin-left: 740px; }

A side-effect is that it also opens up the ability to accidentally support IE6 (for layout at least). Even the topbar, under certain conditions, could be absolutely positioned at the top of the page in IE6. Probably not something you want to roll in, but any developer who uses Bootstrap as a starting point will have the option to include a few easy IE6 tweaks/accommodations if they need to support that browser, because at least the layout would "just work".

Just a stray! https://github.com/twitter/bootstrap/blob/master/docs/index.html#L427

Zebra-striped table doesn't work here, it's the same normal table, not even in the docs page online.

Tried with Firefox 6, Chrome 13 and IE 9.

Styles for disabled .btn are not applied in IE8. It drops the entire rule because it doesn't support the :disabled selector.

https://github.com/twitter/bootstrap/blob/misc_css_fixes/bootstrap-1.0.0.css#L448

Fix is to remove :disabled and apply the disabled class to the button elements in the demo.

Because there's an explicit setting of font-weight: normal for most elements, doing this:

<p>This is a <strong>very <a href="#">important</a> section</strong>.</p>

Results in "very" and "section" being bold, but not "important".

Might be a good idea to make the error messages have more colour contrast, and possibly throw in some icons too?

I was wondering what you suggest to combine a form and its elements inside a modal dialog / popover?

Currently I am using the following structure...

<div class="modal">
  <form method="POST">
  <div class="modal-header">
    <h3>...</h3>
  </div>
  <div class="modal-body">
    ...
    <div class="clearfix">
      <label for="foo">Bar</label>
      <input id="foo" name="foo" type="text" value=""/>
    </div>
    ...
  </div>
  <div class="modal-footer">
    <button type="submit" name="finish" value="ok" class="btn primary">Ok</button>
    <button type="submit" name="finish" value="cancel" class="btn">Cancel</button>
  </div>
  </form>
</div>

It works quite nicely, the only issue is that there is white stripe at the bottom, due to ...

form {
  margin-bottom: 18px;
}

Inputs with types like email should be styled.

It'd be great to have dropdown menus supported within tabs, not just in nav bars.

Hi.

Missing support for HTML5 input types (ex. email, phone)

<div class="input">
    <div class="input-prepend">
        <span class="add-on">@</span>
        <input id="xlInput3" class="medium" type="email" size="30" name="xlInput3" />
    </div>
</div>

With the following code, a row doesn't get displayed correctly - putting the second part on a new line instead of on the same one in ie9. Works fine in Chrome, Firefox and Opera.

<html>
<head>
<title>Boostrap test</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.0.min.css">
</head>
<body>
<div class="topbar">
    <div class="fill">
        <div class="container">
            <h3><a href="#">Test Project</a></h3>
            <ul><li class="active"><a href="#">Home</a><li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
            </ul>
        </div>
    </div>
</div>
<br /><br /><br />
<div class="container">
    <div class="row">
        <div class="span4 columns"><p>Blah</p></div>
        <div class="span12 columns">
                <div class="alert-message error"><a href="#" class="close">x</a>Test error bar</div>
        </div>
    </div>
</div>
</body>
</html>

Firefox - working: http://i.imgur.com/SsFr0.png
IE9 - not working: http://i.imgur.com/YUrgv.png

From http://twitter.github.com/bootstrap/#typography:

Emphasis tags (<strong> and <em>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <strong> for plain old attention and <em> for slick attention and titles.

This is wrong. As per the HTML5 spec (http://dev.w3.org/html5/spec/Overview.html):

The strong element represents strong importance for its contents.
The em element represents stress emphasis of its contents.

These two tags therefore have semantic meaning - they are not simply for adding "visual distinction" to words or phrases, or whatever "slick" attention is.

Note: It’s still okay to use <b> and <i> tags in HTML5, but they don’t come with inherent styles anymore. <b> is meant to convey importance

This is also wrong - again from the spec:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood

So the actual specification is almost the exact opposite of your documentation's claims.

Do you have have any interest/plans to include bootstrap as a compass mixin? I would love to use some of these elements but using less seems redundant for projects that are already using compass to manage their css variables.

It would be great if the documentation section about popovers / modal dialogs would elaborate on what is the best practice ("most convenient/compliant way") you suggest to activate the popover dialog.

Thanks,
Niko

I know you ripped them out in your fix branch at some point, but if you want to put them back in, you can mimic the CSS3 transparent gradients with an extended hex syntax (the first 2 digits indicate the opacity level):

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000');

Also noticed the .alert-message rule has the fallback background-color appearing after, rather than before, the rgba background-color.

From the gradients section:

filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7

On the other hand, if you do want this to work in IE6 and IE7, you could just drop the -ms-filter declaration, as filter works in any IE6+.

When adding the error class to an input that is a child of a form with class "form-stacked", there is no margin added to the left of the input so that it doesn't share the border of the red error bound box. Additionally, the label (which is above due to form-stacked) requires additional padding to not overlap the red error bound box.

Not sure if you've rolled this into your fixes branch yet, but I found a way to have the bottom-border-color fallback set in IE7 without getting a black border:

.btn {
    ...
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

And to save you some potential head-scratching, I just spent 30 minutes trying to work out why one set of button elements under "Example buttons" had a black border in IE7 once you set fallback borders...it's because they aren't wrapped in a form!

Bootstrap provides beautiful tooltip classes, but what about it's functionality? Should we write the required script or is there a library for that? Now, the tooltip functionality is easy, but positioning it properly (on top, button or else) is beyond my skills.

Unless Im just missing it where is the proper docs to explain all that there is to use, and how? Or are people supposed to wade through the CSS and try to figure it all out?

If I add a dropdown menu to a top navigation bar, the dropdown function is not working... Sample:

<div class="topbar">
  <div class="fill">
    <div class="container">
      <h3><a href="#">Bootstrap</a></h3>

      <ul>
        <li class="active"><a href="#masthead">Overview</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#grid-system">Grid</a></li>
        <li><a href="#layouts">Layouts</a></li>
        <li><a href="#typography">Typography</a></li>

        <li><a href="#tables">Tables</a></li>
        <li><a href="#forms">Forms</a></li>
        <li><a href="#navigation">Navigation</a></li>
        <li><a href="#alerts">Alerts</a></li>
        <li><a href="#popovers">Popovers</a></li>
        <li><a href="#less">Less</a></li>
      </ul>

        <ul class="nav secondary-nav">
        <li class="menu">
          <a href="#" class="menu">Dropdown</a>
          <ul class="menu-dropdown">

            <li><a href="#">Secondary link</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Another link</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div>

Is there something wrong in my code?

Currently, no example Javascript is included to get the drop-down navigation in the top-bar nav working. Also, there is no example JS to make the pills or tabs actually work.

Hey. The background-clip value should be padding-box rather than padding.

It's fine to keep -moz|-webkit-background-clip: padding though, because this value was used in earlier implementations.

First of all, thanks for releasing that lib, perfect timing.

I tried to integrate it to a real project today and I miss a class for potential harmful buttons ("Delete" ones for instance). Maybe a default style (red?) to compete with the primary (blue) can be added to fix that?

Thanks,
David

There is a missing </div> here: https://github.com/twitter/bootstrap/blob/master/docs/index.html#L1085

...and an extra closing </div> here: https://github.com/twitter/bootstrap/blob/master/docs/index.html#L1116

You can see from the code indentation that one row starts too early, leaving it nested within the previous row.