Coder Social home page Coder Social logo

twbs / bootstrap Goto Github PK

View Code? Open in Web Editor NEW
161.6K 6.8K 77.8K 218.66 MB

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Home Page: https://getbootstrap.com

License: MIT License

JavaScript 39.03% HTML 31.32% CSS 13.15% PowerShell 0.04% SCSS 16.46%
css bootstrap javascript html scss css-framework sass

bootstrap's People

Contributors

andresgalante avatar bardiharborow avatar coliff avatar cvrebert avatar dependabot-preview[bot] avatar dependabot[bot] avatar fat avatar ffoodd avatar geosot avatar gijsbotje avatar glebm avatar hnrch02 avatar johann-s avatar julien-deramond avatar juthilo avatar kkirsche avatar louismaximepiton avatar martijncuppens avatar mdo avatar pat270 avatar patrickhlauke avatar pvdlg avatar rohit2sharma95 avatar stevenblack avatar twbs-grunt avatar vsn4ik avatar xhmikosr avatar ysds avatar zalog avatar zlatanvasovic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap's Issues

Form Layout which are not Forms

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.

Simplification for table header generated-content arrow

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

Lacking support for HTML5 input types

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>

Incorrect background-clip values

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.

Add :focus and :active

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

Give some love to IE7-8

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.

Nav Disappears in Chrome

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.

Dropdown: fix for IE7/8 dropdown & modified JS

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

Alerts don't close on click?

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.

Fields with errors look ugly in stacked forms

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?

Bootstarp ToolTips script

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.

Actual detailed documentation

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?

Malformed linear gradients for .btn

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);
...

Fix for alert box gradients in IE7/8

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.

Bold links aren't bold

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".

Dropdown on nav bar doesn't drop down on click

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.

address example suggestion

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?

Text area resizing issue in Firefox 5 on Linux

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.

documentation error: small versus cite

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 (&mdash;). part renders literally instead of being html-interpreted.

Sass Counterpart

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.

Current docs page contains incorrect information re. typographic elements

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.

Add a default style for .btn with harmful actions

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

Grid not showing correctly in ie 9

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

Updated clearfix

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;
}

Include Example JavaScript

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.

Firefox doesn't apply .btn line-height to submit `input`

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.

Fix for .btn borders in IE7/8

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!

Zebra-striped table not working

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.

Compass

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.

Alternative approach to the grid (less code and IE6 support)

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".

<address /> is used incorrectly.

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.

Append checkbox to password input

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.

Padding issue on form-stacked input error

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.

How to combine form elements in modal dialog?

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;
}

Dropdown in Topbar

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?

b/i element text incorrect

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).”

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.