Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #188 from facebook/docs-refactor

Browse Source 
Look ma, new docs!
This commit is contained in:
Paul O’Shannessy
2013-07-17 00:56:07 -07:00
parent 1971ae8cac 58fecc8cbe
commit e3f6a6d916
149 changed files with 51815 additions and 913 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_config.yml
+50 -13
View File
@@ -1,17 +1,54 @@
---
markdown: redcarpet
name: React
description: A JavaScript library for building user interfaces
redcarpet:
extensions:
- fenced_code_blocks
react_version: 0.3.2
pygments: true
exclude:
---
baseurl: /react
url: http://facebook.github.io
permalink: /blog/:year/:month/:day/:title.html
exclude:
- Gemfile
- Gemfile.lock
- README.md
- Rakefile
url: http://facebook.github.io
baseurl: /react
permalink: /blog/:year/:month/:day/:title.html
redcarpet:
extensions:
- fenced_code_blocks
pygments: true
name: React
markdown: redcarpet
react_version: 0.4.0a
description: A JavaScript library for building user interfaces
relative_permalinks: true
nav_docs_sections:
- title: Quick Start
items:
- id: getting-started
title: Getting Started
- id: tutorial
title: Tutorial
- title: Guides
items:
- id: why-react
title: Why React?
- id: displaying-data
title: Displaying Data
subitems:
- id: jsx-in-depth
title: JSX in Depth
- id: jsx-gotchas
title: JSX Gotchas
- id: interactivity-and-dynamic-uis
title: Interactivity and Dynamic UIs
- id: multiple-components
title: Multiple Components
- id: reusable-components
title: Reusable Components
- id: forms
title: Forms
- id: working-with-the-browser
title: Working With the Browser
subitems:
- id: more-about-refs
title: More About Refs
- id: tooling-integration
title: Tooling integration
- id: reference
title: Reference
docs/_css/react.scss
+3
View File
@@ -206,6 +206,9 @@ li {
list-style: none;
margin: 0;
}
ul ul {
margin-left: 20px;
}
li {
margin: 0;
}
docs/_includes/nav_docs.html
+25 -29
View File
@@ -1,31 +1,27 @@
<div class="nav-docs">
<div class="nav-docs-section">
<h3>Getting started</h3>
<ul>
<li><a href="/react/docs/getting-started.html"{% if page.id == 'docs-getting-started' %} class="active"{% endif %}>Getting Started</a></li>
<li><a href="/react/docs/tutorial.html"{% if page.id == 'docs-tutorial' %} class="active"{% endif %}>Tutorial</a></li>
<li><a href="/react/docs/common-questions.html"{% if page.id == 'docs-common-questions' %} class="active"{% endif %}>Common Questions</a></li>
</ul>
</div>
<div class="nav-docs-section">
<h3>Reference</h3>
<ul>
<li><a href="/react/docs/syntax.html"{% if page.id == 'docs-syntax' %} class="active"{% endif %}>JSX Syntax</a></li>
<li><a href="/react/docs/component-basics.html"{% if page.id == 'docs-component-basics' %} class="active"{% endif %}>Component Basics</a></li>
<li><a href="/react/docs/component-data.html"{% if page.id == 'docs-component-data' %} class="active"{% endif %}>Component Data</a></li>
<li><a href="/react/docs/component-lifecycle.html"{% if page.id == 'docs-component-lifecycle' %} class="active"{% endif %}>Component Lifecycle</a></li>
<li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li>
<li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li>
<li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li>
<li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li>
</ul>
</div>
<div class="nav-docs-section">
<h3>Appendix</h3>
<ul>
<li><a href="/react/docs/jsx-is-not-html.html"{% if page.id == 'docs-jsx-is-not-html' %} class="active"{% endif %}>JSX is not HTML</a></li>
</ul>
</div>
{% for section in site.nav_docs_sections %}
<div class="nav-docs-section">
<h3>{{ section.title }}</h3>
<ul>
{% for item in section.items %}
<li>
<a href="/react/docs/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>
{{ item.title }}
</a>
{% if item.subitems %}
<ul>
{% for subitem in item.subitems %}
<li>
<a href="/react/docs/{{ subitem.id }}.html"{% if page.id == subitem.id %} class="active"{% endif %}>
{{ subitem.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
</div>
docs/_js/examples/markdown.js
+2 -2
View File
@@ -11,9 +11,9 @@ var MarkdownEditor = React.createClass({\n\
getInitialState: function() {\n\
return {value: 'Type some *markdown* here!'};\n\
},\n\
handleInput: React.autoBind(function() {\n\
handleInput: function() {\n\
this.setState({value: this.refs.textarea.getDOMNode().value});\n\
}),\n\
},\n\
render: function() {\n\
return (\n\
<div className=\"MarkdownEditor\">\n\
docs/_js/examples/timer.js
+2 -2
View File
@@ -7,9 +7,9 @@ var Timer = React.createClass({\n\
getInitialState: function() {\n\
return {secondsElapsed: 0};\n\
},\n\
tick: React.autoBind(function() {\n\
tick: function() {\n\
this.setState({secondsElapsed: this.state.secondsElapsed + 1});\n\
}),\n\
},\n\
componentDidMount: function() {\n\
setInterval(this.tick, 1000);\n\
},\n\
docs/docs/01-why-react.md
+30
View File
@@ -0,0 +1,30 @@
---
id: why-react
title: Why React?
layout: docs
permalink: why-react.html
next: displaying-data.html
---
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
We built React to solve one problem: **building large applications with data that changes over time**. To do this, React uses two main ideas.
### Simple
Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
### Declarative
When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
## Build Composable Components
React is all about building reusable components. In fact, with React the *only* thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
## Give It Five Minutes
React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. [Give it five minutes](http://37signals.com/svn/posts/3124-give-it-five-minutes) while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
## Learn More
You can learn more about our motivations behind building React in [this blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html).
docs/docs/02-displaying-data.md
+91
View File
@@ -0,0 +1,91 @@
---
id: displaying-data
title: Displaying Data
layout: docs
permalink: displaying-data.html
prev: why-react.html
next: jsx-in-depth.html
---
The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
## Getting Started
Let's look at a really simple example. Create a `hello-react.html` file with the following code:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="http://fb.me/react-{{site.react_version}}.min.js"></script>
<script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
// ** Your code goes here! **
</script>
</body>
</html>
```
For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JS:
```javascript
/** @jsx React.DOM */
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
React.renderComponent(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
```
## Reactive Updates
Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. **It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.**
The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**.
## Components are Just Like Functions
React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
> Note:
>
> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root.
## JSX Syntax
We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
We've found that the best solution for this problem is to generate markup directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs. In order to make this easier, we've added a very simple, **optional** HTML-like syntax for the function calls that generate markup called JSX.
**JSX lets you write JavaScript function calls with HTML syntax.** To generate a link in React using pure JavaScript you'd write: `React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Hello React!')`. With JSX this becomes `<a href="http://facebook.github.io/react/">Hello React!</a>`. We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so **JSX is not required to use React.**
JSX is very small; the "hello, world" example above uses every feature of JSX. To learn more about it, see [JSX in depth](./02.1-jsx-in-depth.html). Or see the transform in action in [our live JSX compiler](/react/jsx-compiler.html).
JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./02.2-jsx-gotchas.html) for some key differences.
The easiest way to get started with JSX is to use the in-browser `JSXTransformer`. We strongly recommend that you don't use this in production. You can precompile your code using our command-line [react-tools](http://npmjs.org/package/react-tools) package.
docs/docs/syntax.md → docs/docs/02.1-jsx-in-depth.md
+39 -29
View File
@@ -1,18 +1,17 @@
---
id: docs-syntax
title: JSX Syntax
description: Writing JavaScript with XML syntax.
id: jsx-in-depth
title: JSX in Depth
layout: docs
prev: common-questions.html
next: component-basics.html
permalink: jsx-in-depth.html
prev: displaying-data.html
next: jsx-gotchas.html
---
JSX is a JavaScript XML syntax transform recommended (but not required) for use
JSX is a JavaScript XML syntax transform recommended for use
with React.
## Why JSX?
First of all, **don't use JSX if you don't like it!**
## Why JSX?
React works out of the box without JSX. Simply construct your markup using the
functions on `React.DOM`. For example, here's how to construct a simple link:
@@ -23,21 +22,22 @@ var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
We recommend using JSX for many reasons:
- It's easier to visualize the structure of the DOM.
- Designers are more comfortable making changes.
- It's familiar for those who have used MXML or XAML.
* It's easier to visualize the structure of the DOM.
* Designers are more comfortable making changes.
* It's familiar for those who have used MXML or XAML.
## The Transform
JSX transforms XML-like syntax into native JavaScript. It turns XML elements and
attributes into function calls and objects, respectively.
JSX transforms from an XML-like syntax into native JavaScript. XML elements and
attributes are transformed into function calls and objects, respectively.
```javascript
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = Nav({color:'blue'}, null);
var app = Nav({color:"blue"});
```
Notice that in order to use `<Nav />`, the `Nav` variable must be in scope.
@@ -49,7 +49,7 @@ var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = Nav({color:'blue'}, Profile(null, 'click'));
var app = Nav({color:"blue"}, Profile(null, "click"));
```
Use the [JSX Compiler](/react/jsx-compiler.html) to try out JSX and see how it
@@ -63,16 +63,17 @@ how to setup compilation.
> Details about the code transform are given here to increase understanding, but
> your code should not rely on these implementation details.
## React and JSX
React and JSX are independent technologies, but JSX was primarily built with
React in mind. The two valid uses of JSX are:
- To construct instances of React DOM components (`React.DOM.*`).
- To construct instances of composite components created with
* To construct instances of React DOM components (`React.DOM.*`).
* To construct instances of composite components created with
`React.createClass()`.
**React DOM Components**
### React DOM Components
To construct a `<div>` is to create a variable that refers to `React.DOM.div`.
@@ -81,7 +82,7 @@ var div = React.DOM.div;
var app = <div className="appClass">Hello, React!</div>;
```
**React Component Components**
### React Component Components
To construct an instance of a composite component, create a variable that
references the class.
@@ -114,7 +115,7 @@ var Nav;
// Input (JSX):
var tree = <Nav><span /></Nav>;
// Output (JS):
var tree = Nav(null, React.DOM.span(null, null));
var tree = Nav(null, React.DOM.span(null));
```
> Remember:
@@ -125,7 +126,7 @@ var tree = Nav(null, React.DOM.span(null, null));
## JavaScript Expressions
#### Attribute Expressions
### Attribute Expressions
To use a JavaScript expression as an attribute value, wrap the expression in a
pair of curly braces (`{}`) instead of quotes (`""`).
@@ -137,7 +138,7 @@ var person = <Person name={window.isLoggedIn ? window.name : ''} />;
var person = Person({name: window.isLoggedIn ? window.name : ''});
```
#### Child Expressions
### Child Expressions
Likewise, JavaScript expressions may be used to express children:
@@ -145,16 +146,23 @@ Likewise, JavaScript expressions may be used to express children:
// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = Container(null, window.isLoggedIn ? Nav(null, null) : Login(null, null));
var content = Container(null, window.isLoggedIn ? Nav(null) : Login(null));
```
### Comments
It's easy to add comments within your JSX; they're just JS expressions:
```javascript
var content = <Container>{/* this is a comment */}<Nav /></Container>;
```
## Tooling
Beyond the compilation step, JSX does not require any special tools.
- Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
- Linting provides accurate line numbers after compiling without sourcemaps.
- Elements use standard scoping so linters can find usage of out-of-scope
* Many editors already include reasonable support for JSX (Vim, Emacs js2-mode).
* Linting provides accurate line numbers after compiling without sourcemaps.
* Elements use standard scoping so linters can find usage of out-of-scope
components.
## Prior Work
@@ -163,6 +171,8 @@ JSX is similar to several other JavaScript embedded XML language
proposals/projects. Some of the features of JSX that distinguish it from similar
efforts include:
- JSX is a simple syntactic transform.
- JSX neither provides nor requires a runtime library.
- JSX does not alter or add to the semantics of JavaScript.
* JSX is a simple syntactic transform.
* JSX neither provides nor requires a runtime library.
* JSX does not alter or add to the semantics of JavaScript.
JSX is similar to HTML, but not exactly the same. See [JSX gotchas](./jsx-gotchas.html) for some key differences.
docs/docs/jsx-is-not-html.md → docs/docs/02.2-jsx-gotchas.md
+8 -26
View File
@@ -1,14 +1,16 @@
---
id: docs-jsx-is-not-html
title: JSX is not HTML
description: Differences between JSX and HTML.
id: jsx-gotchas
title: JSX Gotchas
layout: docs
prev: api.html
permalink: jsx-gotchas.html
prev: jsx-in-depth.html
next: interactivity-and-dynamic-uis.html
---
JSX looks like HTML but there are some important differences you may run into.
## Whitespace removal
## Whitespace Removal
JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes all whitespace between two curly braces expressions. If you want to have whitespace, simply add `{' '}`.
@@ -18,6 +20,7 @@ JSX doesn't follow the same whitespace elimination rules as HTML. JSX removes al
Follow [Issue #65](https://github.com/facebook/react/issues/65) for discussion on this behavior.
## HTML Entities
You can insert HTML entities within literal text in JSX:
@@ -58,27 +61,6 @@ As a last resort, you always have the ability to insert raw HTML.
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
```
## Comments
JSX supports both single-line and multi-line JavaScript comments within a tag declaration:
```javascript
<div // This is a single-line comment:
/*
And a multi-line
comment
*/
/>
```
As of React 0.3, there is no good way to insert comments within the children section. [Issue #82](https://github.com/facebook/react/issues/82) is tracking progress to enable the following:
```javascript
// Note: This is not implemented yet!
<div>
{/* This is a comment */}
</div>
```
## Custom HTML Attributes
docs/docs/03-interactivity-and-dynamic-uis.md
+89
View File
@@ -0,0 +1,89 @@
---
id: interactivity-and-dynamic-uis
title: Interactivity and Dynamic UIs
layout: docs
permalink: interactivity-and-dynamic-uis.html
prev: jsx-gotchas.html
next: multiple-components.html
---
You've already [learned how to display data](./displaying-data.html) with React. Now let's look at how to make our UIs interactive.
## A Simple Example
```javascript
/** @jsx React.DOM */
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'unlike';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
React.renderComponent(
<LikeButton />,
document.getElementById('example')
);
```
## Event Handling and Synthetic Events
With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
If you'd like to use React on a touch device (i.e. a phone or tablet), simply call `React.initializeTouchEvents(true);` to turn them on.
## Under the Hood: autoBind and Event Delegation
Under the hood React does a few things to keep your code performant and easy to understand.
**Autobinding:** When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
**Event delegation:** React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
## Components are Just State Machines
React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.
In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
## How State Works
A common way to inform React of a data change is by calling `setState(data, callback)`. This method merges `data` into `this.state` and re-renders the component. When the component finishes re-rendering, the optional `callback` is called. Most of the time you'll never need to provide a `callback` since React will take care of keeping your UI up-to-date for you.
## What Components Should Have State?
Most of your components should simply take some data from `props` and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
**Try to keep as many of your components as possible stateless.** By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.
A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via `props`. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
## What *Should* Go in State?
**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.
## What *Shouldn't* Go in State?
`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:
* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.
* **React components:** Build them in `render()` based on underlying props and state.
* **Duplicated data from propsL** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values.
docs/docs/04-multiple-components.md
+151
View File
@@ -0,0 +1,151 @@
---
id: multiple-components
title: Multiple Components
layout: docs
permalink: multiple-components.html
prev: interactivity-and-dynamic-uis.html
next: reusable-components.html
---
So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
## Motivation: Separation of Concerns
By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
## Composition Example
Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
```javascript
/** @jsx React.DOM */
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
</div>
);
}
});
var ProfilePic = React.createClass({
render: function() {
return (
<img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
);
}
});
var ProfileLink = React.createClass({
render: function() {
return (
<a href={'http://www.facebook.com/' + this.props.username}>
{this.props.username}
</a>
);
}
});
React.renderComponent(
<Avatar username="pwh" />,
document.getElementById('example')
);
```
## Ownership
In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This key property leads to UIs that are guaranteed to be consistent.
It's important to draw a distinciton between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
## Children
When you create a React component instance, you can include additional React components or JavaScript expressions between the opening and closing tags like this:
```javascript
<Parent><Child /></Parent>
```
`Parent` can read its children by accessing the special `this.props.children` prop.
### Child Reconciliation
**Reconciliation is the process by which React updates the DOM with each new render pass.** In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:
```html
// Render Pass 1
<Card>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</Card>
// Render Pass 2
<Card>
<p>Paragraph 2</p>
</Card>
```
Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
### Stateful Children
For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
In most cases, this can be sidestepped by hiding elements instead of destroying them:
```html
// Render Pass 1
<Card>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</Card>
// Render Pass 2
<Card>
<p style={{'{{'}}display: 'none'}}>Paragraph 1</p>
<p>Paragraph 2</p>
</Card>
```
### Dynamic Children
The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
```javascript
render: function() {
var results = this.props.results;
return (
<ol>
{this.results.map(function(result) {
return <li key={result.id}>{result.text}</li>;
})}
</ol>
);
}
```
When React reconciles the keyed children, it will ensure that any child with `key` will be reordered (instead of clobbered) or destroyed (instead of reused).
## Data Flow
In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
## A Note on Performance
You may be thinking that it's expensive to react to changing data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution and React will optimize this for you using batching and change detection.
However, sometimes you really want to have fine-grained control over your performance. In that case, simply override `shouldComponentUpdate()` to return false when you want React to skip processing of a subtree. See [the React reference docs](./reference.html) for more information.
> Note:
>
> If `shouldComponentUpdate()` returns false when data has actually changed, React can't keep your UI in sync. Be sure you know what you're doing while using it, and only use this function when you have a noticeable performance problem. Don't underestimate how fast JavaScript is relative to the DOM.
docs/docs/05-reusable-components.md
+96
View File
@@ -0,0 +1,96 @@
---
id: reusable-components
title: Reusable Components
layout: docs
permalink: reusable-components.html
prev: multiple-components.html
next: forms.html
---
When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc) into reusable components with well-defined interfaces. That way, the next time you need to build some UI you can write much less code, which means faster development time, less bugs, and less bytes down the wire.
## Prop Validation
As your app grows it's helpful to ensure that your components are used correctly. We do this using `propTypes`.
** TODO zpao **
## Transferring Props: A Shortcut
A common type of React component is one that extends a basic HTML in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. React provides `transferPropsTo()` to do just this.
```javascript
/** @jsx React.DOM */
var CheckLink = React.createClass({
render: function() {
// transferPropsTo() will take any props pased to CheckLink
// and copy them to <a>
return this.transferPropsTo(<a>{'√ '}{this.props.children}</a>);
}
});
React.renderComponent(
<CheckLink href="javascript:alert('Hello, world!');">
Click here!
</CheckLink>,
document.getElementById('example')
);
```
## Mixins
Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](http://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](./working-with-the-browser.html) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
```javascript
/** @jsx React.DOM */
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getInitialState: function() {
return {seconds: 0};
},
componentDidMount: function() {
this.setInterval(this.tick, 1000); // Call a method on the mixin
},
tick: function() {
this.setState({seconds: this.state.seconds + 1});
},
render: function() {
return (
<p>
React has been running for {this.state.seconds} seconds.
</p>
);
}
});
React.renderComponent(
<TickTock />,
document.getElementById('example')
);
```
A nice feature of mixins is that if a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called.
## Testing
**TODO: benjamn**
docs/docs/06-forms.md
+132
View File
@@ -0,0 +1,132 @@
---
id: forms
title: Forms
layout: docs
permalink: forms.html
prev: reusable-components.html
next: working-with-the-browser.html
---
Form components such as `<input>`, `<textarea>`, and `<option>` differ from other native components because they can be mutated via user interactions. These components provide interfaces that make it easier to manage forms in response to user interactions.
## Interactive Props
Form components support a few props that are affected via user interactions:
* `value`, supported by `<input>` and `<textarea>` components.
* `checked`, supported by `<input>` components of type `checkbox` or `radio`.
* `selected`, supported by `<option>` components.
In HTML, the value of `<textarea>` is set via children. In React, you should use `value` instead.
Form components allow listening for changes by setting a callback to the `onChange` prop. The `onChange` prop works across browsers to fire in response to user interactions when:
* The `value` of `<input>` or `<textarea>` changes.
* The `checked` state of `<input>` changes.
* The `selected` state of `<option>` changes.
Like all DOM events, the `onChange` prop is supported on all native components and can be used to listen to bubbled change events.
## Controlled Components
An `<input>` with `value` set is a *controlled* component. In a controlled `<input>`, the value of the rendered element will always reflect the `value` prop. For example:
```javascript
render: function() {
return <input type="text" value="Hello!" />;
}
```
This will render an input that always has a value of `Hello!`. Any user input will have no effect on the rendered element because React has declared the value to be `Hello!`. If you wanted to update the value in response to user input, you could use the `onChange` event:
```javascript
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
```
In this example, we are simply accepting the newest value provided by the user and updating the `value` prop of the `<input>` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:
```javascript
handleChange: function(event) {
this.setState({value: event.target.value.substr(0, 140)});
}
```
This would accept user input but truncate the value to the first 140 characters.
## Uncontrolled Components
An `<input>` that does not supply a `value` (or sets it to `null`) is an *uncontrolled* component. In an uncontrolled `<input>`, the value of the rendered element will reflect the user's input. For example:
```javascript
render: function() {
return <input type="text" />;
}
```
This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.
If you want to initialize the component with a non-empty value, you can supply a `defaultValue` prop. For example:
```javascript
render: function() {
return <input type="text" defaultValue="Hello!" />;
}
```
This example will function much like the **Controlled Components** example above.
Likewise, `<input>` supports `defaultChecked` and `<option>` supports `defaultSelected`.
## Advanced Topics
### Why Controlled Components?
Using form components such as `<input>` in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
```html
<input type="text" name="title" value="Untitled" />
```
This renders an input *initialized* with the value, `Untitled`. When the user updates the input, the node's value *property* will change. However, `node.getAttribute('value')` will still return the value used at initialization time, `Untitled`.
Unlike HTML, React components must represent the state of the view at any point in time and not only at initialization time. For example, in React:
```javascript
render: function() {
return <input type="text" name="title" value="Untitled" />;
}
```
Since this method describes the view at any point in time, the value of the text input should *always* be `Untitled`.
### Why Textarea Value?
In HTML, the value of `<textarea>` is usually set using its children:
```html
<!-- counterexample: DO NOT DO THIS! -->
<textarea name="description">This is the description.</textarea>
```
For HTML, this easily allows developers to supply multiline values. However, since React is JavaScript, we do not have string limitations and can use `\n` if we want newlines. In a world where we have `value` and `defaultValue`, it is ambiguous what role children play. For this reason, you should not use children when setting `<textarea>` values:
```javascript
<textarea name="description" value="This is a description." />
```
If you *do* decide to use children, they will behave like `defaultValue`.
docs/docs/07-working-with-the-browser.md
+132
View File
@@ -0,0 +1,132 @@
---
id: working-with-the-browser
title: Working With the Browser
layout: docs
permalink: working-with-the-browser.html
prev: forms.html
next: more-about-refs.html
---
React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
## The Mock DOM
React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods return a *description* of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.
Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and in a performant way cross-browser. You can even use some HTML5 events in IE8!
Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
## Refs and getDOMNode()
To interact with the browser, you'll need a reference to a DOM node. Every mounted React component has a `getDOMNode()` function which you can call to get a reference to it.
> Note:
>
> `getDOMNode()` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `getDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
In order to get a reference to a React component, you can either use `this` to get the current React component, or you can use refs to refer to a component you own. They work like this:
```javascript
/** @jsx React.DOM */
var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
this.refs.myTextInput.getDOMNode().focus();
},
render: function() {
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
return (
<div>
<input type="text" ref="myTextInput" />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
React.renderComponent(
<MyComponent />,
document.getElementById('example')
);
```
## More About Refs
To learn more about refs, including ways to use them effectively, see our [more about refs](./more-about-refs.html) documentation.
## Component Lifecycle
Components have three main parts of their lifecycle:
* **Mounting:** A component is being inserted into the DOM.
* **Updating:** A component is being re-rendered to determine if the DOM should be updated.
* **Unmounting:** A component is being removed from the DOM.
React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
### Mounting
* `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
* `componentWillMount()` is invoked immediately before mounting occurs.
* `componentDidMount(DOMElement rootNode)` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
### Updating
* `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
* `shouldComponentUpdate(object nextProps, object nextState): boolean` is invoked when a component decides whether any changes warrant an update to the DOM. Implement this as an optimization to compare `this.props` with `nextProps` and `this.state` with `nextState` and return false if React should skip updating.
* `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
* `componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)` is invoked immediately after updating occurs.
### Unmounting
* `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
### Mounted Methods
_Mounted_ composite components also support the following methods:
* `getDOMNode(): DOMElement` can be invoked on any mounted component in order to obtain a reference to its rendered DOM node.
* `forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
> Note:
>
> The `DOMElement rootNode` argument of `componentDidMount()` and
> `componentDidUpdate()` is a convenience. The same node can be obtained by
> calling `this.getDOMNode()`.
## Browser Suppport and Polyfills
At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing `+new Date()`, we can just write `Date.now()`. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.
In addition to that philosphy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like [es5-shim](https://github.com/kriskowal/es5-shim).
### Polyfills Needed to Support Older Browsers
* `Array.isArray`
* `Array.prototype.forEach`
* `Array.prototype.indexOf`
* `Function.prototype.bind`
* `Date.now`
* `Array.prototype.some` (also in `es5-shim.js`)
All of these can be polyfilled using `es5-shim.js` from [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim).
* `console.*` - Only needed when not using the minified build. If you need to polyfill this, try [https://github.com/paulmillr/console-polyfill](https://github.com/paulmillr/console-polyfill).
* `Object.create` - Provided in `es5-sham.js` @ [https://github.com/kriskowal/es5-shim](https://github.com/kriskowal/es5-shim).
docs/docs/07.1-more-about-refs.md
+135
View File
@@ -0,0 +1,135 @@
---
id: more-about-refs
title: More About Refs
layout: docs
permalink: more-about-refs.html
prev: working-with-the-browser.html
next: tooling-integration.html
---
After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something like this isn't necessary for making data flow through your application, because the Reactive data flow always ensures that the most recent `props` are sent to each child that is output from `render()`. However there are a few cases, where it still might be necessary or beneficial.
Consider the case when you wish to tell an `<input />` element (that exists within your instances sub-hierarchy) to focus after you update its value to be the empty string, `''`.
```javascript
var App = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleKeyUp: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
this.setState({userInput: ''}); // Clear the input
// We wish to focus the <input /> now!
},
render: function() {
return (
<div>
<div onClick={this.clearAndFocusInput}>
Click To Focus and Reset
</div>
<input
value={this.state.userInput}
onKeyUp={this.handleKeyUp}
/>
</div>
);
}
});
```
Notice how, in this example, we want to "tell" the input something - something that it cannot infer from it's props over time. In this case we want to "tell" it that it should now become focused. However, there are some challenges. What is returned from `render()`` is not your actual composition of "child" components, it is merely a *description* of the children at a particular instance in time - a snapshot, if you will.
> Note:
>
> Remember, what you return from `render()` is not your *actual* rendered children instances. What you return from `render()` is merely a *description* of the children instances in your component's sub-hierarchy at a particular moment in time.
This means that you should never "hold onto" something that you return from `render()` and then expect it to be anything meaningful.
```javascript
// counterexample: DO NOT DO THIS!
render: function() {
var myInput = <input />; // I'm going to try to call methods on this
this.rememberThisInput = myInput; // input at some point in the future! YAY!
return (
<div>
<div>...</div>
{myInput}
</div>
);
}
```
In this counterexample, the `<input />` is merely a *description* of an `<input />`. This description is used to create a *real* **backing instance** for the `<input />`.
So how do we talk to the *real* backing instance of the input?
## The ref Attribute
React supports a very special property that you can attach to any component that is output from `render()`. This special property allows you to refer to the corresponding **backing instance** of anything returned from `render()`. It is always guaranteed to be the proper instance, at any point in time.
It's as simple as:
**1.** Assign a `ref` attribute to anything returned from `render` such as:
```html
<input ref="myInput" />
```
**2.** In some other code (typically event handler code), access the **backing instance** via `this.refs` as in:
```javascript
this.refs.myInput
```
## Completing the Example
```javascript
var App = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleKeyUp: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
this.setState({userInput: ''}); // Clear the input
this.refs.theInput.getDOMNode().focus(); // Boom! Focused!
},
render: function() {
return (
<div>
<div onClick={this.clearAndFocusInput}>
Click To Focus and Reset
</div>
<input
ref="theInput"
value={this.state.userInput}
onKeyUp={this.handleKeyUp}
/>
</div>
);
}
});
```
In this example, our render function returns a description of an `<input />` instance. But the true instance is accessed via `this.refs.theInput`. As long as a child component with `ref="theInput"` is returned from render, `this.refs.theInput` will access the the proper instance. This even works on higher level (non-DOM) components such as `<Typeahead ref="myTypeahead" />`.
## Summary
Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive `props` and `state`. They should, however, not be your go-to abstraction for flowing data through your application. By default, use the Reactive data flow and save `ref`s for use cases that are inherently non-reactive.
### Benefits:
- You can define any public method on your component classes (such as a reset method on a Typeahead) and call those public methods through refs (such as `this.refs.myTypeahead.reset()`).
- Performing DOM measurements almost always requires reaching out to a "native" component such as `<input />` and accessing its underlying DOM node via `this.refs.myInput.getDOMNode()`. Refs are one of the only practical ways of doing this reliably.
- Refs are automatically book-kept for you! If that child is destroyed, its ref is also destroyed for you. No worrying about memory here (unless you do something crazy to retain a reference yourself).
### Cautions:
- *Never* access refs inside of any component's render method - or while any component's render method is even running anywhere in the call stack.
- If you want to preserve Google Closure Compiler Crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using `this.refs['myRefString']` if your ref was defined as `ref="myRefString"`.
- If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where `state` should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use `ref`s to "make things happen" - instead, the data flow will usually accomplish your goal.
docs/docs/08-tooling-integration.md
+44
View File
@@ -0,0 +1,44 @@
---
id: tooling-integration
title: Tooling integration
layout: docs
permalink: tooling-integration.html
prev: more-about-refs.html
next: reference.html
---
Every project uses a different system for building and deploying JavaScript. We've tried to make React as environment-agnostic as possible.
## CDN-hosted React
We provide CDN-hosted versions of React [on our download page](/react/downloads.html). These prebuilt files use the UMD module format. Dropping them in with a simple `<script>` tag will inject a `React` global into your environment. It should also work out-of-the-box in CommonJS and AMD environments.
## Using master
We have instructions for building from `master` [in our GitHub repository](https://github.com/facebook/react). We build a tree of CommonJS modules under `build/modules` which you can drop into any environment or packaging tool that supports CommonJS.
## In-browser JSX Transform
If you like using JSX, we provide an in-browser JSX transformer for development [on our download page](/react/downloads.html). Simply include a `<script type="text/jsx">` tag to engage the JSX transformer. Be sure to include the `/** @jsx React.DOM */` comment as well, otherwise the transformer will not run the transforms.
> Note:
>
> The in-browser JSX transformer is fairly large and results in extraneous computation client-side that can be avoided. Do not use it in production — see the next section.
## Productionizing: Precompiled JSX
If you have [npm](http://npmjs.org/), you can simply run `npm install -g react-tools` to install our command-line `jsx` tool. This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `jsx --watch src/ build/`. Run `jsx --help` for more information on how to use this tool.
## Helpful Open-Source Projects
The open-source community has built tools that integrate JSX with several build systems.
* [reactify](https://github.com/andreypopp/reactify) - use JSX with [browserify](http://browserify.org/).
* [grunt-react](https://github.com/ericclemmons/grunt-react) - [grunt](http://gruntjs.com/) task for JSX
* [require-jsx](https://github.com/seiffert/require-jsx) - use JSX with [require.js](http://requirejs.org/)
* [reactapp](https://github.com/jordwalke/reactapp) - a sample project to get up-and-running with React quickly
docs/docs/api.md → docs/docs/09-reference.md
+91 -36
View File
@@ -1,19 +1,42 @@
---
id: docs-api
title: React API
id: reference
title: Reference
layout: docs
prev: mixins.html
next: jsx-is-not-html.html
permalink: reference.html
prev: tooling-integration.html
---
## React
## Examples
### Production Apps
* All of [Instagram.com](http://instagram.com/) is built on React.
* Many components on [Facebook.com](http://www.facebook.com/), including the commenting interface, ads creation flows, and page insights.
* [Khan Academy](http://khanacademy.org/) is using React for its question editor.
### Sample Code
* We've included [a step-by-step comment box tutorial](./tutorial.md).
* [The React starter kit](/react/downloads.html) includes several examples which you can [view online in our GitHub repository](https://github.com/facebook/react/tree/master/examples/).
* [reactapp](https://github.com/jordwalke/reactapp) is a simple app template to get you up-and-running quickly with React.
* [React one-hour email](https://github.com/petehunt/react-one-hour-email/commits/master) goes step-by-step from a static HTML mock to an interactive email reader (written in just one hour!)
* [Rendr + React app template](https://github.com/petehunt/rendr-react-template/) demonstrates how to use React's server rendering capabilities.
## API
### React
`React` is the entry point to the React framework. If you're using one of the prebuilt packages it's available as a global; if you're using CommonJS modules you can `require()` it.
#### React.DOM
`React.DOM` provides all of the standard HTML tags needed to build a React app. You generally don't use it directly; instead, just include it as part of the `/** @jsx React.DOM */` docblock.
#### React.initializeTouchEvents
```javascript
@@ -22,27 +45,6 @@ initializeTouchEvents(boolean shouldUseTouch)
Configure React's event system to handle touch events on mobile devices.
#### React.autoBind
```javascript
function autoBind(function method)
```
Marks the provided function to be automatically bound to each React component instance created. This allows React components to define automatically bound methods and ensure that when called they will always reference their current instance.
Example:
```javascript
React.createClass({
click: React.autoBind(function(evt) {
this.setState({jumping: true});
}),
render: function() {
// Look: no bind!
return <a onClick={this.click}>Jump</a>;
}
});
```
#### React.createClass
@@ -52,26 +54,48 @@ function createClass(object specification)
Creates a component given a specification. A component implements a `render` method which returns **one single** child. That child may have an arbitrarily deep child structure. One thing that makes components different than a standard prototypal classes is that you don't need to call new on them. They are convenience wrappers that construct backing instances (via new) for you.
#### React.renderComponent
```javascript
ReactComponent renderComponent(ReactComponent container, DOMElement mountPoint)
ReactComponent renderComponent(ReactComponent container, DOMElement container)
```
Renders a React component into the DOM in the supplied `container`.
If the React component was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component.
## AbstractEvent
#### React.unmountAndReleaseReactRootNode
```javascript
unmountAndReleaseReactRootNode(DOMElement container)
```
Remove a mounted React component from the DOM and clean up its event handlers and state.
#### React.renderComponentToString
```javascript
renderComponentToString(ReactComponent component, function callback)
```
Render a component to its initial HTML. This should only be used on the server. React will call `callback` with an HTML string when the markup is ready. You can use this method to create static site generators, or you can generate HTML on the server and send it down to have a very fast initial page load. If you call `React.renderComponent()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
### AbstractEvent
Your event handlers will be passed instances of `AbstractEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event (such as `stopPropagation()` and `preventDefault()`) except they work exactly the same across all browsers.
If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it.
## ReactComponent
### ReactComponent
Component classses created by `createClass()` return instances of `ReactComponent` when called. Most of the time when you're using React you're either creating or consuming `ReactComponent`s.
#### getDOMNode
```javascript
@@ -80,6 +104,7 @@ DOMElement getDOMNode()
If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements.
#### setProps
```javascript
@@ -88,7 +113,10 @@ setProps(object nextProps)
When you're integrating with an external JavaScript application you may want to signal a change to a React component rendered with `renderComponent()`. Simply call `setProps()` to change its properties and trigger a re-render.
**Note:** This method can only be called on a root-level component. That is, it's only available on the component passed directly to `renderComponent()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.
> Note:
>
> This method can only be called on a root-level component. That is, it's only available on the component passed directly to `renderComponent()` and none of its children. If you're inclined to use `setProps()` on a child component, instead take advantage of reactive updates and pass the new prop to the child component when it's created in `render()`.
#### replaceProps
@@ -98,6 +126,7 @@ replaceProps(object nextProps)
Like `setProps()` but deletes any pre-existing props that are not in nextProps.
#### transferPropsTo
```javascript
@@ -106,6 +135,7 @@ ReactComponent transferPropsTo(ReactComponent targetComponent)
Transfer properties from this component to a target component that have not already been set on the target component. This is usually used to pass down properties to the returned root component. `targetComponent`, now updated with some new props is returned as a convenience.
#### setState
```javascript
@@ -114,30 +144,45 @@ setState(object nextState[, function callback])
Merges nextState with the current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks. In addition, you can supply an optional callback function that is executed once `setState` is completed.
**Note:** *NEVER* mutate `this.state` directly. As calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
> Note:
>
> *NEVER* mutate `this.state` directly. As calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
**Note:** `setState()` does not immediately mutate `this.state` but creates a pending state transition. Accessing `this.state` after calling this method can potentially return the existing value.
> Note:
>
> `setState()` does not immediately mutate `this.state` but creates a pending state transition. Accessing `this.state` after calling this method can potentially return the existing value.
> Note:
>
> There is no guarantee of synchronous operation of calls to `setState` and calls may be batched for performance gains.
**Note**: There is no guarantee of synchronous operation of calls to `setState` and calls may eventually be batched for performance gains.
#### replaceState
```javascript
replaceState(object nextState)
replaceState(object nextState[, function callback])
```
Like `setState()` but deletes any pre-existing state keys that are not in nextState.
#### forceUpdate()
```javascript
forceUpdate()
forceUpdate([function callback])
```
If your `render()` method reads from something other than `this.props` or `this.state` you'll need to tell React when it needs to re-run `render()`. Use `forceUpdate()` to cause React to automatically re-render. This will cause `render()` to be called on the component and all of its children but React will only update the DOM if the markup changes.
Normally you should try to avoid all uses of `forceUpdate()` and only read from `this.props` and `this.state` in `render()`. This makes your application much simpler and more efficient.
> Note:
>
> There is no guarantee of synchronous operation of calls to `forceUpdate` and calls may be batched for performance gains.
#### Lifecycle methods
```javascript
object getInitialState()
componentWillMount()
@@ -150,4 +195,14 @@ componentDidUpdate(object prevProps, object prevState, DOMElement domNode)
componentWillUnmount()
```
See the [advanced components](advanced-components.html) documentation for more details on these lifecycle methods.
See the [working with the browser](./working-with-the-browser.html) documentation for more details on these lifecycle methods.
## DOM Differences
React has implemented a browser-independent events and DOM system for performance and cross-browser compatibility reasons. We took the opportunity to clean up a few rough edges in browser DOM implementations.
* All events (including submit) bubble correctly per the W3C spec
* All event objects conform to the W3C spec
* All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here, since the spec is inconsistent.
* `onChange` behaves as you would expect it to: whenever a form field is changed this event is fired rather than inconsistently on blur. We intentionally break from existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to react to user input in real time.
docs/docs/OUTLINE.md
+96
View File
@@ -0,0 +1,96 @@
---
id: OUTLINE
title: Goals of the documentation
layout: docs
prev: 09.1-tutorial.html
---
- Flow of docs should mimic progression of questions a new user would ask
- High information density -- assume the reader is adept at JS
- Talk about best practices
- JSFiddles for all code samples
- Provide background for some of the design decisions
- Less words less words less words!
## Outline
Motivation / Why React?
- Declarative (simple)
- Components (separation of concerns)
- Give it 5 minutes
Displaying data
- Hello world example
- Reactive updates
- Components are just functions
- JSX syntax (link to separate doc?)
- JSX gotchas
Interactivity and dynamic UIs
- Click handler example
- Event handlers / synthetic events (link to w3c docs)
- Under the hood: autoBind and event delegation (IE8 notes)
- React is a state machine
- How state works
- What components should have state?
- What should go in state?
- What shouldn't go in state?
Scaling up: using multiple components
- Motivation: separate concerns
- Composition example
- Ownership (and owner vs. parent)
- Children
- Data flow (one-way data binding)
- A note on performance
Building effective reusable components
- You should build a reusable component library (CSS, testing etc)
- Prop validation
- Transferring props: a shortcut
- Mixins
- Testing
Forms
Working with the browser
- The mock DOM
- Refs / getDOMNode()
- More about refs
- Component lifecycle
- Browser support and polyfills
Working with your environment
- CDN-hosted React
- Using master
- In-browser JSX transform
- Productionizing: precompiled JSX
- Helpful open-source projects
Integrating with other UI libraries
- Using jQuery plugins
- Letting jQuery manage React components
- Using with Backbone.View
- CoffeeScript
- Moving from Handlebars to React: an example
Server / static rendering
- Motivation
- Simple example
- How does it work? (No DOM)
- Rendr + React
Big ideas
- Animation
- Bootstrap bindings (responsive grids)
- Reactive CSS
- Web workers
- Native views
Case studies
- Comment box tutorial from scratch
- From HTML mock to application: React one-hour email
- Jordan's LikeToggler example
Reference
- API
- DOM differences
docs/docs/advanced-components.md
-119
View File
@@ -1,119 +0,0 @@
---
id: docs-advanced-components
title: Advanced Components
description: How to build advanced composite components.
layout: docs
prev: event-handling.html
next: mixins.html
---
Composite components extend a `ReactCompositeComponent` base class that provides
a very powerful API that makes React flexible and able to easily work with other
libraries and frameworks.
## Lifecycle Methods
Composite components can optionally implement lifecycle methods that are invoked
at various stages in the [component lifecycle](component-lifecycle.html) that
each have unique guarantees.
### Mounting
- `getInitialState(): object` is invoked before a component is mounted.
Stateful components should implement this and return the initial state data.
- `componentWillMount()` is invoked immediately before mounting occurs.
- `componentDidMount(DOMElement rootNode)` is invoked immediately after
mounting occurs. Initialization that requires DOM nodes should go here.
### Updating
- `componentWillReceiveProps(object nextProps)` is invoked when a mounted
component receives new props. This method should be used to compare
`this.props` and `nextProps` to perform state transitions using
`this.setState()`.
- `shouldComponentUpdate(object nextProps, object nextState): boolean` is
invoked when a component decides whether any changes warrant an update to the
DOM. Implement this as an optimization to compare `this.props` with
`nextProps` and `this.state` with `nextState` and return false if React
should skip updating.
- `componentWillUpdate(object nextProps, object nextState)` is invoked
immediately before updating occurs. You cannot call `this.setState()` here.
- `componentDidUpdate(object prevProps, object prevState, DOMElement rootNode)`
is invoked immediately after updating occurs.
### Unmounting
- `componentWillUnmount()` is invoked immediately before a component is
unmounted and destroyed. Cleanup should go here.
## Mounted Methods
_Mounted_ composite components also support the following methods:
- `getDOMNode(): DOMElement` can be invoked on any mounted component in order
to obtain a reference to its rendered DOM node.
- `forceUpdate()` can be invoked on any mounted component when you know that
some deeper aspect of the component's state has changed without using
`this.setState()`.
> Note:
>
> The `DOMElement rootNode` argument of `componentDidMount()` and
> `componentDidUpdate()` is a convenience. The same node can be obtained by
> calling `this.getDOMNode()`.
## Component Refs
A common use case of event callbacks or the lifecycle methods is to operate on a
component returned by `render()`. For example, consider a search component that
should auto-focus the input once mounted:
```javascript
var SearchForm = React.createClass({
render: function() {
return (
<form action={this.props.action}>
<input type="search" placeholder="Search..." />
</form>
);
},
componentDidMount: function(rootNode) {
var searchInput = rootNode.firstChild;
searchInput.focus();
}
});
```
Although this implementation works, it is fragile because `componentDidMount()`
now relies on `render()` returning a particular DOM structure.
React provides a better way for composite components to reference components
that it constructs in its `render()` method through the use of refs. A component
can assign a `ref` to any component it constructs. This will create a reference
to those components on `this.refs`. For example:
```javascript{5,10}
var SearchForm = React.createClass({
render: function() {
return (
<form action={this.props.action}>
<input type="search" placeholder="Search..." ref="searchInput" />
</form>
);
},
componentDidMount: function(rootNode) {
var searchInput = this.refs.searchInput.getDOMNode();
searchInput.focus();
}
});
```
In this example, `this.refs.searchInput` will reference the `<input>` component
and is available in most lifecycle methods and event callbacks. We obtain a
reference to the `<input>`'s DOM node using `getDOMNode()`.
> Note:
>
> If you want to preserve compatibility with Google Closure Compiler's
> property crushing in `ADVANCED_OPTIMIZATIONS` mode, make sure to use string
> literals with `this.refs`.
docs/docs/common-questions.md
-29
View File
@@ -1,29 +0,0 @@
---
id: docs-common-questions
title: Common Questions
layout: docs
prev: tutorial.html
next: syntax.html
---
### What browsers does React support?
React supports the latest two Chrome, Firefox, Safari, and Internet Explorer versions. React can work with Internet Explorer 8 with polyfills.
### How do I get React to support Internet Explorer 8?
React requires ES5 JavaScript shims to run in Internet Explorer 8. Include the [ES5 Shims and shams](https://github.com/kriskowal/es5-shim)
and [console-polyfill)(https://github.com/paulmillr/console-polyfill/) to implement these shims.
### Who uses React?
The [Instagram](http://instagram.com/) website is built entirely in React. The [Facebook](https://www.facebook.com/) website is also increasingly using React, including the common commenting plugin across the site.
### I don't get it. React is confusing!
[This blog post by a member of the React team](http://www.quora.com/Pete-Hunt/Posts/React-Under-the-Hood) talks about some of the reasons
why React is designed the way that it is.
### Can I integrate with other JavaScript libraries?
Absolutely! In fact, we encourage it! See [our GitHub repo](http://github.com/facebook/react/) for a [TodoMVC example using Backbone](https://github.com/facebook/react/tree/master/examples/todomvc-backbone) and a [jQuery + Bootstrap modal demo](https://github.com/facebook/react/tree/master/examples/jquery-bootstrap).
docs/docs/component-basics.md
-73
View File
@@ -1,73 +0,0 @@
---
id: docs-component-basics
title: Component Basics
description: What are components?
layout: docs
next: component-data.html
prev: syntax.html
---
_Components_ are the basic units of composition in React. Components encapsulate
the logic necessary to take input parameters and render markup. Components can
be rendered into an existing DOM element on the page by using
`React.renderComponent`:
```javascript
// Replaces everything in `document.body` with <div>Hello, world!</div>;
React.renderComponent(<div>Hello, world!</div>, document.body);
```
Keep in mind that `<div>` is **not** a DOM element! Keep reading...
## Types of Components
There are two types of components:
- **Composite Components**
- **DOM Components**
### Composite Components <small>such as `TodoApp` and `Typeahead`.</small>
The majority of your React code will be implementing composite components.
Composite components are higher-level components with custom rendering logic
that may compose other composite components or DOM components.
```javascript
/** @jsx React.DOM */
var LinkButton = React.createClass({
render: function() {
return <a className="btn" />;
}
});
var myButton = <LinkButton />;
```
This example defines a `LinkButton` component class using `React.createClass()`,
and its `render()` method composes the `<a>` DOM component.
### DOM Components <small>such as `div` and `span`.</small>
DOM components are the set of classes that correspond to browser DOM elements.
They are defined in `React.DOM` and can be brought "into scope" by setting
`@jsx React.DOM` in the docblock. See [JSX Syntax](syntax.html) for more
details.
Although `React.DOM` components look like browser DOM elements, they differ in a
few ways:
- All property names, including event handlers, are camelCased.
- JavaScript identifiers should be used, namely `className` and `htmlFor`.
- The `style` prop expects an object instead of a string. The object should map
camelCased style properties to values, e.g. `{backgroundColor: '#fff'}`.
Here is an example of a React link styled as a button with a click handler:
```javascript
/** @jsx React.DOM */
var handleClick = function() {alert('Clicked!');};
var inlineStyle = {textDecoration: 'none'};
var myLink = <a className="btn" onClick={handleClick} style={inlineStyle} />;
```
docs/docs/component-data.md
-145
View File
@@ -1,145 +0,0 @@
---
id: docs-component-data
title: Component Data
description: How is data passed into a component?
layout: docs
prev: component-basics.html
next: component-lifecycle.html
---
## Props
Components use data to determine what should be rendered. For example:
```javascript
var LikeLink = React.createClass({
render: function() {
var text = this.props.liked ? 'Liked' : 'Like';
return <a>{text}</a>;
}
});
var myLikeLink = <LikeLink liked={false} />;
```
In this example, `LikeLink` takes `liked` as boolean data. This type of data
that is passed in is called a "prop". Examples of props on DOM components
include `className` and `onClick`.
Whenever a component's props change, its `render()` function will be
re-evaluated and the DOM will be updated. React will ensure that the DOM is
always kept up-to-date.
## State
Let's build a small `LikeApp` application that makes use of the `<LikeLink>`
component from above. It should start off unliked and we should be able to like
it by clicking the link:
```javascript
var LikeApp = React.createClass({
render: function() {
var isClicked = false;
return <LikeLink liked={isClicked} onClick={this.handleClick.bind(this)} />;
},
handleClick: function() {
// Somehow update `isClicked`.
}
});
```
This renders a `<LikeLink>` with a click listener. However, it is not clear how
`handleClick` should update `isClicked` to true. `LikeApp` needs a way to store
**state** about whether or not it has been clicked.
### State vs. Props
State is data that is managed _internally_ by a composite component. Like props,
the `render()` function will be re-evaluated whenever state changes. Props and
state differ in that:
- Props are passed in from the creator.
- State is private to and managed by the component.
### Managing State
Let's update our `LikeApp` component using state:
```javascript{2-4,6,10}
var LikeApp = React.createClass({
getInitialState: function() {
return {isClicked: false};
},
render: function() {
var isClicked = this.state.isClicked;
return <LikeLink liked={isClicked} onClick={this.handleClick.bind(this)} />;
},
handleClick: function() {
this.setState({isClicked: true});
}
});
```
There's a lot going on here, so let's work our way from top to bottom:
- `getInitialState()` describes what state data looks like when the component
is created.
- In `render()`, state data can be accessed via `this.state`.
- When the link is clicked, we update state using `setState()`.
Now when we click the link, the `<LikeLink>` will get updated, right? Wrong.
## Transferring Props
If you have been following carefully, you may have noticed that although we pass
a click handler into `<LikeLink>` as a prop, `LikeLink` does not do anything
with `this.props.onClick`! Let's fix that.
```javascript{4}
var LikeLink = React.createClass({
render: function() {
var text = this.props.liked ? 'Liked' : 'Like';
return <a onClick={this.props.onClick}>{text}</a>;
}
});
```
Although this works, realize that this would quickly become tedious if we wanted
to also transfer `href`, `title`, `target`, and other events from `this` to the
rendered `<a>`. React provides a convenience method, `transferPropsTo()`, for
transferring props:
```javascript{4}
var LikeLink = React.createClass({
render: function() {
var text = this.props.liked ? 'Liked' : 'Like';
return this.transferPropsTo(<a>{text}</a>);
}
});
```
This will transfer all props from `this` to the specified component (including
`onClick`).
## Summary
Now we are done. `LikeApp` renders an unliked link which, when clicked, will:
1. Update the internal state of `LikeApp`.
2. Change the props passed into `LikeLink`.
3. Change the return value of `render()`.
4. Trigger an update to the DOM.
It's worth noting that React will handle new return values of `render()` by
making the minimal set of mutations necessary to bring the DOM up-to-date. In
this case, only the `textContent` of the rendered link will be mutated.
In summary:
- Props are passed in whereas state is managed internally by a component.
- Never mutate `this.props` or `this.state`. You should pass props into other
components and mutate state using `setState()`.
- State is private. Never read `state` or call `setState()` on
anything but `this`.
- Whenever props or state changes, `render()` will be re-evaluated and the DOM
updated. Also, `render()` should not depend on anything besides `this.props`
and `this.state`.
docs/docs/component-lifecycle.md
-85
View File
@@ -1,85 +0,0 @@
---
id: docs-component-lifecycle
title: Component Lifecycle
description: What happens when I render a React component?
layout: docs
prev: component-data.html
next: event-handling.html
---
## Mounting
[We have previously seen](component-basics.html) how to render components into
existing DOM elements on the page:
```javascript
React.renderComponent(<div>Hello, world!</div>, document.body);
```
In this one simple line, we have accomplished the following:
- A `<div>` (defined by `React.DOM.div`) component is instantiated.
- The component is **mounted** into `document.body`.
**Mounting** is the process of initializing a React component by creating its
DOM nodes and inserting them into a supplied container node.
At this point, the entire page consists of a single `<div>` with "Hello,
world!".
## Updating
Let's add a second call to `React.renderComponent()` after three
seconds:
```javascript{2-4}
React.renderComponent(<div>Hello, world!</div>, document.body);
setTimeout(function() {
React.renderComponent(<div>Goodbye, world.</div>, document.body);
}, 3000);
```
The second call to `React.renderComponent()` will trigger the following:
- The `<div>` component will check the new props to see if anything changed.
- The set of changes are used to **update** the DOM node as necessary.
**Updating** is the process of mutating the rendered DOM nodes and occurs
whenever either props or state has changed. This ensures that the rendered DOM
is consistent with the data.
## Unmounting
Let's add one final call to `React.renderComponent()` after another three
seconds:
```javascript{5-7}
React.renderComponent(<div>Hello, world!</div>, document.body);
setTimeout(function() {
React.renderComponent(<div>Goodbye, world.</div>, document.body);
}, 3000);
setTimeout(function() {
React.renderComponent(<img src="/images/fin.png" />, document.body);
}, 6000);
```
The third call to `React.renderComponent()` will trigger the following:
- An `<img>` (defined by `React.DOM.img`) component is instantiated.
- React will compare the `<div>` component with the `<img>` component.
- Since the component class is different, the `<div>` component will be
**unmounted**.
- The `<img>` component will then be mounted into `document.body`.
**Unmounting** is the process of releasing resources that have been allocated by
a component. This allows user interfaces built with React to live long without
memory leaks.
Components can also be unmounted using
`React.unmountAndReleaseReactRootNode()`:
```javascript
React.unmountAndReleaseReactRootNode(document.body);
```
This will unmount any components mounted immediately within `document.body`.
docs/docs/event-handling.md
-224
View File
@@ -1,224 +0,0 @@
---
id: docs-event-handling
title: Event Handling
description: How do events work with React components?
layout: docs
prev: component-lifecycle.html
next: advanced-components.html
---
Events in React work the way they do with HTML, except the event names are
camelCased.
```javascript
var Clicker = React.createClass({
render: function() {
return <span onClick={this.handleClick}>Click me!</span>;
},
handleClick: function(event) {
alert('You clicked me!');
}
});
```
When `<Clicker>` is clicked, the `handleClick()` function will get fired. Under
the hood, React uses top-level event delegation to achieve high performance.
## Automatically Binding Callbacks
Just like any callback in JavaScript, if you want to refer to the component as
`this` from the callback, you need to bind the callback to the component:
```javascript{3}
var Clicker = React.createClass({
render: function() {
var handleClick = this.handleClick.bind(this);
return <span onClick={handleClick}>Click me!</span>;
},
handleClick: function(event) {
alert(this.ALERT_MESSAGE);
},
ALERT_MESSAGE: 'You clicked me!'
});
```
React provides a convenient and _efficient_ way to bind methods using
`React.autoBind()`:
```javascript{3,5-7}
var Clicker = React.createClass({
render: function() {
return <span onClick={this.handleClick}>Click me!</span>;
},
handleClick: React.autoBind(function(event) {
alert(this.ALERT_MESSAGE);
}),
ALERT_MESSAGE: 'You clicked me!'
});
```
> Note:
>
> Binding a function allocates memory to create a new bound function. Since
> `render()` may be invoked many times, it is a bad place to bind functions.
> `React.autoBind()` sidesteps this issue by only binding once at instantiation
> time.
## DOM Events
React uses [top-level event delegation](http://davidwalsh.name/event-delegate)
to achieve high performance when implementing DOM events. For each type of DOM
event, React adds a single top-level listener and determines which event
handlers to execute by simulating event capturing and bubbling.
DOM event handlers are called with a normalized `AbstractEvent` object that has
cross-browser compatible implementations of `stopPropagation` and
`preventDefault()`. If you need access to the raw browser event, you can use the
`nativeEvent` property.
> Note:
>
> The `AbstractEvent` object is JSON serializable so that React applications can
> be executed inside web workers.
### Touch Events
If you want to use touch events, you must configure React's event system to
initialize them:
```javascript
// Invoke before calling `React.renderComponent()`.
React.initializeTouchEvents(true);
```
## Custom Events
Notice that event listeners are attached by simply passing them into components
as props. For DOM components, events are handled using top-level event
delegation. For composite components, event handling is up to the component's
implementation.
Here is an example of a toggle link that fires a custom `onToggle` event:
```javascript
var ToggleLink = React.createClass({
getInitialState: function() {
return {isEnabled: false};
},
render: function() {
return <a onClick={this.handleClick}>Toggle</a>;
},
handleClick: React.autoBind(function() {
var willEnable = !this.state.isEnabled;
if (this.props.onToggle) {
this.props.onToggle(willEnable)
}
this.setState({isEnabled: willEnable});
})
});
var handleToggle = function(enabled) {
alert(enabled ? 'Enabled.' : 'Disabled.');
};
var myToggleLink = <ToggleLink onToggle={handleToggle} />;
```
### Common Patterns
With React your event handlers should be quite small. Large event handlers may
be symptomatic of code that should be moved into helpers or into `render()`.
Here are some common usage patterns for event handlers.
#### Updating State
The most common thing to do in response to a user action is to call
`this.setState()` to update the component's state, which will in turn trigger
an update to the rendered component.
#### Server Requests
Many event handlers will issue a server request to read or write some data in
response to an event. The response handler for the request will often call
`this.setState()`.
#### Invoke a Callback
Your component will often be a small, reusable building block that does not know
how to respond to a user action. In these situations, we delegate the
responsibility to the owner by exposing a handler on `this.props`. This is what
the `ToggleLink` example above is doing.
#### Inter-component Communication
A common scenario involves communicating to **Component A** that a user action
has occurred on **Component B**. To solve this problem, a common parent to
both components should listen for the event on **Component B**, update its
internal state, and pass that data into **Component A**.
For example, say we have two components: **Clicker**, a component that fires an
`onCountChange` custom event, and **ClickCountLabel**, a component that displays
the number of clicks that have happened:
```javascript
var Clicker = React.createClass({
getInitialState: function() {
return {count: 0};
},
render: function() {
return <span onClick={this.handleClick}>Click me!</span>;
},
handleClick: React.autoBind(function() {
this.setState({count: this.state.count + 1});
if (this.props.onCountChange) {
this.props.onCountChange(this.state.count);
}
})
});
var ClickCountLabel = React.createClass({
render: function() {
return <p>You have clicked <strong>{this.props.count}</strong> times.</p>;
}
});
var ClickApp = React.createClass({
render: function() {
var count = 0;
return (
<div>
<Clicker onCountChange={this.handleCountChange} />
<ClickCountLabel count={count} />
</div>
);
},
handleCountChange: React.autoBind(function(count) {
// Somehow update `count`.
})
});
```
In order to communicate the click count from `Clicker` to `ClickCountLabel`, we
modify `ClickApp` to maintain state that will be passed into `ClickCountLabel`:
```javascript{2-4,6,15}
var ClickApp = React.createClass({
getInitialState: function() {
return {count: 0};
},
render: function() {
var count = this.state.count;
return (
<div>
<Clicker onCountChange={this.handleCountChange} />
<ClickCountLabel count={count} />
</div>
);
},
handleCountChange: React.autoBind(function(count) {
this.setState({count: count});
})
});
```
Now when `Clicker` fires the `onCountChange` event, the `ClickCountLabel` will
get updated!
docs/docs/getting-started.md
+1 -1
View File
@@ -1,5 +1,5 @@
---
id: docs-getting-started
id: getting-started
title: Getting Started
layout: docs
next: tutorial.html
docs/docs/likebutton/docs/assets/css/bootstrap-responsive.css
Vendored Executable
+817
View File
@@ -0,0 +1,817 @@
/*!
* Bootstrap Responsive v2.0.4
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
*/
/*spin(@btnPrimaryBackground, 15%);*/
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.input-block-level {
display: block;
width: 100%;
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.hidden {
display: none;
visibility: hidden;
}
.visible-phone {
display: none !important;
}
.visible-tablet {
display: none !important;
}
.hidden-desktop {
display: none !important;
}
@media (max-width: 767px) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
}
@media (max-width: 480px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}
.page-header h1 small {
display: block;
line-height: 18px;
}
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
.form-horizontal .control-group > label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
.form-horizontal .controls {
margin-left: 0;
}
.form-horizontal .control-list {
padding-top: 0;
}
.form-horizontal .form-actions {
padding-right: 10px;
padding-left: 10px;
}
.modal {
position: absolute;
top: 10px;
right: 10px;
left: 10px;
width: auto;
margin: 0;
}
.modal.fade.in {
top: auto;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
.carousel-caption {
position: static;
}
}
@media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
margin-right: -20px;
margin-left: -20px;
}
.container-fluid {
padding: 0;
}
.dl-horizontal dt {
float: none;
width: auto;
clear: none;
text-align: left;
}
.dl-horizontal dd {
margin-left: 0;
}
.container {
width: auto;
}
.row-fluid {
width: 100%;
}
.row,
.thumbnails {
margin-left: 0;
}
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: auto;
margin-left: 0;
}
.input-large,
.input-xlarge,
.input-xxlarge,
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
display: block;
width: 100%;
min-height: 28px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block;
width: auto;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.row {
margin-left: -20px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 20px;
}
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 724px;
}
.span12 {
width: 724px;
}
.span11 {
width: 662px;
}
.span10 {
width: 600px;
}
.span9 {
width: 538px;
}
.span8 {
width: 476px;
}
.span7 {
width: 414px;
}
.span6 {
width: 352px;
}
.span5 {
width: 290px;
}
.span4 {
width: 228px;
}
.span3 {
width: 166px;
}
.span2 {
width: 104px;
}
.span1 {
width: 42px;
}
.offset12 {
margin-left: 764px;
}
.offset11 {
margin-left: 702px;
}
.offset10 {
margin-left: 640px;
}
.offset9 {
margin-left: 578px;
}
.offset8 {
margin-left: 516px;
}
.offset7 {
margin-left: 454px;
}
.offset6 {
margin-left: 392px;
}
.offset5 {
margin-left: 330px;
}
.offset4 {
margin-left: 268px;
}
.offset3 {
margin-left: 206px;
}
.offset2 {
margin-left: 144px;
}
.offset1 {
margin-left: 82px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.762430939%;
*margin-left: 2.709239449638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 99.999999993%;
*width: 99.9468085036383%;
}
.row-fluid .span11 {
width: 91.436464082%;
*width: 91.38327259263829%;
}
.row-fluid .span10 {
width: 82.87292817100001%;
*width: 82.8197366816383%;
}
.row-fluid .span9 {
width: 74.30939226%;
*width: 74.25620077063829%;
}
.row-fluid .span8 {
width: 65.74585634900001%;
*width: 65.6926648596383%;
}
.row-fluid .span7 {
width: 57.182320438000005%;
*width: 57.129128948638304%;
}
.row-fluid .span6 {
width: 48.618784527%;
*width: 48.5655930376383%;
}
.row-fluid .span5 {
width: 40.055248616%;
*width: 40.0020571266383%;
}
.row-fluid .span4 {
width: 31.491712705%;
*width: 31.4385212156383%;
}
.row-fluid .span3 {
width: 22.928176794%;
*width: 22.874985304638297%;
}
.row-fluid .span2 {
width: 14.364640883%;
*width: 14.311449393638298%;
}
.row-fluid .span1 {
width: 5.801104972%;
*width: 5.747913482638298%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 714px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 652px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 590px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 528px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 466px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 404px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 342px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 280px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 218px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 156px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 94px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 32px;
}
}
@media (min-width: 1200px) {
.row {
margin-left: -30px;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 30px;
}
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 1170px;
}
.span12 {
width: 1170px;
}
.span11 {
width: 1070px;
}
.span10 {
width: 970px;
}
.span9 {
width: 870px;
}
.span8 {
width: 770px;
}
.span7 {
width: 670px;
}
.span6 {
width: 570px;
}
.span5 {
width: 470px;
}
.span4 {
width: 370px;
}
.span3 {
width: 270px;
}
.span2 {
width: 170px;
}
.span1 {
width: 70px;
}
.offset12 {
margin-left: 1230px;
}
.offset11 {
margin-left: 1130px;
}
.offset10 {
margin-left: 1030px;
}
.offset9 {
margin-left: 930px;
}
.offset8 {
margin-left: 830px;
}
.offset7 {
margin-left: 730px;
}
.offset6 {
margin-left: 630px;
}
.offset5 {
margin-left: 530px;
}
.offset4 {
margin-left: 430px;
}
.offset3 {
margin-left: 330px;
}
.offset2 {
margin-left: 230px;
}
.offset1 {
margin-left: 130px;
}
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.564102564%;
*margin-left: 2.510911074638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.45299145300001%;
*width: 91.3997999636383%;
}
.row-fluid .span10 {
width: 82.905982906%;
*width: 82.8527914166383%;
}
.row-fluid .span9 {
width: 74.358974359%;
*width: 74.30578286963829%;
}
.row-fluid .span8 {
width: 65.81196581200001%;
*width: 65.7587743226383%;
}
.row-fluid .span7 {
width: 57.264957265%;
*width: 57.2117657756383%;
}
.row-fluid .span6 {
width: 48.717948718%;
*width: 48.6647572286383%;
}
.row-fluid .span5 {
width: 40.170940171000005%;
*width: 40.117748681638304%;
}
.row-fluid .span4 {
width: 31.623931624%;
*width: 31.5707401346383%;
}
.row-fluid .span3 {
width: 23.076923077%;
*width: 23.0237315876383%;
}
.row-fluid .span2 {
width: 14.529914530000001%;
*width: 14.4767230406383%;
}
.row-fluid .span1 {
width: 5.982905983%;
*width: 5.929714493638298%;
}
input,
textarea,
.uneditable-input {
margin-left: 0;
}
input.span12,
textarea.span12,
.uneditable-input.span12 {
width: 1160px;
}
input.span11,
textarea.span11,
.uneditable-input.span11 {
width: 1060px;
}
input.span10,
textarea.span10,
.uneditable-input.span10 {
width: 960px;
}
input.span9,
textarea.span9,
.uneditable-input.span9 {
width: 860px;
}
input.span8,
textarea.span8,
.uneditable-input.span8 {
width: 760px;
}
input.span7,
textarea.span7,
.uneditable-input.span7 {
width: 660px;
}
input.span6,
textarea.span6,
.uneditable-input.span6 {
width: 560px;
}
input.span5,
textarea.span5,
.uneditable-input.span5 {
width: 460px;
}
input.span4,
textarea.span4,
.uneditable-input.span4 {
width: 360px;
}
input.span3,
textarea.span3,
.uneditable-input.span3 {
width: 260px;
}
input.span2,
textarea.span2,
.uneditable-input.span2 {
width: 160px;
}
input.span1,
textarea.span1,
.uneditable-input.span1 {
width: 60px;
}
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
.row-fluid .thumbnails {
margin-left: 0;
}
}
@media (max-width: 979px) {
body {
padding-top: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 18px;
}
.navbar-fixed-bottom {
margin-top: 18px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-right: 10px;
padding-left: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 9px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #999999;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 6px 15px;
font-weight: bold;
color: #999999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #222222;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: block;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 9px 15px;
margin: 9px 0;
border-top: 1px solid #222222;
border-bottom: 1px solid #222222;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-right: 10px;
padding-left: 10px;
}
}
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
docs/docs/likebutton/docs/assets/css/bootstrap.css
Vendored Executable
+4985
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/assets/css/docs.css
Executable
+846
View File
@@ -0,0 +1,846 @@
/* Add additional stylesheets below
-------------------------------------------------- */
/*
Bootstrap's documentation styles
Special styles for presenting Bootstrap's documentation and examples
*/
/* Body and structure
-------------------------------------------------- */
body {
position: relative;
padding-top: 90px;
background-color: #fff;
background-image: url(../img/grid-18px-masked.png);
background-repeat: repeat-x;
background-position: 0 40px;
}
/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
.navbar-fixed-top .brand {
padding-right: 0;
padding-left: 0;
margin-left: 20px;
float: right;
font-weight: bold;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;
}
.navbar-fixed-top .brand:hover {
text-decoration: none;
}
/* Space out sub-sections more
-------------------------------------------------- */
section {
padding-top: 60px;
}
/* Faded out hr */
hr.soften {
height: 1px;
margin: 54px 0;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
border: 0;
}
/* Jumbotrons
-------------------------------------------------- */
.jumbotron {
position: relative;
}
.jumbotron h1 {
margin-bottom: 9px;
font-size: 81px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
}
.jumbotron p {
margin-bottom: 18px;
font-weight: 300;
}
.jumbotron .btn-large {
font-size: 20px;
font-weight: normal;
padding: 14px 24px;
margin-right: 10px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.jumbotron .btn-large small {
font-size: 14px;
}
/* Masthead (docs home) */
.masthead {
padding-top: 36px;
margin-bottom: 72px;
}
.masthead h1,
.masthead p {
text-align: center;
}
.masthead h1 {
margin-bottom: 18px;
}
.masthead p {
margin-left: 5%;
margin-right: 5%;
font-size: 30px;
line-height: 36px;
}
/* Specific jumbotrons
------------------------- */
/* supporting docs pages */
.subhead {
padding-bottom: 0;
margin-bottom: 9px;
}
.subhead h1 {
font-size: 54px;
}
/* Subnav */
.subnav {
width: 100%;
height: 36px;
background-color: #eeeeee; /* Old browsers */
background-repeat: repeat-x; /* Repeat the gradient */
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */
background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */
background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */
border: 1px solid #e5e5e5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.subnav .nav {
margin-bottom: 0;
}
.subnav .nav > li > a {
margin: 0;
padding-top: 11px;
padding-bottom: 11px;
border-left: 1px solid #f5f5f5;
border-right: 1px solid #e5e5e5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.subnav .nav > .active > a,
.subnav .nav > .active > a:hover {
padding-left: 13px;
color: #777;
background-color: #e9e9e9;
border-right-color: #ddd;
border-left: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
box-shadow: inset 0 3px 5px rgba(0,0,0,.05);
}
.subnav .nav > .active > a .caret,
.subnav .nav > .active > a:hover .caret {
border-top-color: #777;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
border-left: 0;
padding-left: 12px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.subnav .nav > li:last-child > a {
border-right: 0;
}
.subnav .dropdown-menu {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
@media (min-width: 980px) {
.subnav-fixed {
position: fixed;
top: 40px;
left: 0;
right: 0;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-color: #d5d5d5;
border-width: 0 0 1px; /* drop the border on the fixed edges */
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}
.subnav-fixed .nav {
width: 938px;
margin: 0 auto;
padding: 0 1px;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
}
/* Quick links
-------------------------------------------------- */
.bs-links {
margin: 36px 0;
}
.quick-links {
min-height: 30px;
margin: 0;
padding: 5px 20px;
list-style: none;
text-align: center;
overflow: hidden;
}
.quick-links:first-child {
min-height: 0;
}
.quick-links li {
display: inline;
margin: 0 8px;
color: #999;
}
.quick-links .github-btn,
.quick-links .tweet-btn,
.quick-links .follow-btn {
position: relative;
top: 5px;
}
/* Marketing section of Overview
-------------------------------------------------- */
.marketing .row {
margin-bottom: 9px;
}
.marketing h1 {
margin: 36px 0 27px;
font-size: 40px;
font-weight: 300;
text-align: center;
}
.marketing h2,
.marketing h3 {
font-weight: 300;
}
.marketing h2 {
font-size: 22px;
}
.marketing p {
margin-right: 10px;
}
.marketing .bs-icon {
float: left;
margin: 7px 10px 0 0;
opacity: .8;
}
.marketing .small-bs-icon {
float: left;
margin: 4px 5px 0 0;
}
/* Footer
-------------------------------------------------- */
.footer {
margin-top: 45px;
padding: 35px 0 36px;
border-top: 1px solid #e5e5e5;
}
.footer p {
margin-bottom: 0;
color: #555;
}
/* Special grid styles
-------------------------------------------------- */
.show-grid {
margin-top: 10px;
margin-bottom: 20px;
}
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
.show-grid:hover [class*="span"] {
background: #ddd;
}
.show-grid .show-grid {
margin-top: 0;
margin-bottom: 0;
}
.show-grid .show-grid [class*="span"] {
background-color: #ccc;
}
/* Render mini layout previews
-------------------------------------------------- */
.mini-layout {
border: 1px solid #ddd;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
box-shadow: 0 1px 2px rgba(0,0,0,.075);
}
.mini-layout {
height: 240px;
margin-bottom: 20px;
padding: 9px;
}
.mini-layout div {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mini-layout .mini-layout-body {
background-color: #dceaf4;
margin: 0 auto;
width: 70%;
height: 240px;
}
.mini-layout.fluid .mini-layout-sidebar,
.mini-layout.fluid .mini-layout-header,
.mini-layout.fluid .mini-layout-body {
float: left;
}
.mini-layout.fluid .mini-layout-sidebar {
background-color: #bbd8e9;
width: 20%;
height: 240px;
}
.mini-layout.fluid .mini-layout-body {
width: 77.5%;
margin-left: 2.5%;
}
/* Popover docs
-------------------------------------------------- */
.popover-well {
min-height: 160px;
}
.popover-well .popover {
display: block;
}
.popover-well .popover-wrapper {
width: 50%;
height: 160px;
float: left;
margin-left: 55px;
position: relative;
}
.popover-well .popover-menu-wrapper {
height: 80px;
}
.large-bird {
margin: 5px 0 0 310px;
opacity: .1;
}
/* Download page
-------------------------------------------------- */
.download .page-header {
margin-top: 36px;
}
.page-header .toggle-all {
margin-top: 5px;
}
/* Space out h3s when following a section */
.download h3 {
margin-bottom: 5px;
}
.download-builder input + h3,
.download-builder .checkbox + h3 {
margin-top: 9px;
}
/* Fields for variables */
.download-builder input[type=text] {
margin-bottom: 9px;
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 12px;
color: #d14;
}
.download-builder input[type=text]:focus {
background-color: #fff;
}
/* Custom, larger checkbox labels */
.download .checkbox {
padding: 6px 10px 6px 25px;
color: #555;
background-color: #f9f9f9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.download .checkbox:hover {
color: #333;
background-color: #f5f5f5;
}
.download .checkbox small {
font-size: 12px;
color: #777;
}
/* Variables section */
#variables label {
margin-bottom: 0;
}
/* Giant download button */
.download-btn {
margin: 36px 0 108px;
}
#download p,
#download h4 {
max-width: 50%;
margin: 0 auto;
color: #999;
text-align: center;
}
#download h4 {
margin-bottom: 0;
}
#download p {
margin-bottom: 18px;
}
.download-btn .btn {
display: block;
width: auto;
padding: 19px 24px;
margin-bottom: 27px;
font-size: 30px;
line-height: 1;
text-align: center;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* Color swatches on LESS docs page
-------------------------------------------------- */
/* Sets the width of the td */
.swatch-col {
width: 30px;
}
/* Le swatch */
.swatch {
display: inline-block;
width: 30px;
height: 20px;
margin: -6px 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* For white swatches, give a border */
.swatch-bordered {
width: 28px;
height: 18px;
border: 1px solid #eee;
}
/* Misc
-------------------------------------------------- */
/* Make tables spaced out a bit more */
h2 + table,
h3 + table,
h4 + table,
h2 + .row {
margin-top: 5px;
}
/* Example sites showcase */
.example-sites img {
max-width: 100%;
margin: 0 auto;
}
.marketing-byline {
margin: -18px 0 27px;
font-size: 18px;
font-weight: 300;
line-height: 24px;
color: #999;
text-align: center;
}
.scrollspy-example {
height: 200px;
overflow: auto;
position: relative;
}
/* Remove bottom margin on example forms in wells */
form.well {
padding: 14px;
}
/* Tighten up spacing */
.well hr {
margin: 18px 0;
}
/* Fake the :focus state to demo it */
.focused {
border-color: rgba(82,168,236,.8);
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
outline: 0;
}
/* For input sizes, make them display block */
.docs-input-sizes select,
.docs-input-sizes input[type=text] {
display: block;
margin-bottom: 9px;
}
/* Icons
------------------------- */
.the-icons {
margin-left: 0;
list-style: none;
}
.the-icons i:hover {
background-color: rgba(255,0,0,.25);
}
/* Eaxmples page
------------------------- */
.bootstrap-examples .thumbnail {
margin-bottom: 9px;
background-color: #fff;
}
/* Responsive table
------------------------- */
.responsive-utilities th small {
display: block;
font-weight: normal;
color: #999;
}
.responsive-utilities tbody th {
font-weight: normal;
}
.responsive-utilities td {
text-align: center;
}
.responsive-utilities td.is-visible {
color: #468847;
background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
color: #ccc;
background-color: #f9f9f9 !important;
}
/* Responsive tests
------------------------- */
.responsive-utilities-test {
margin-top: 5px;
margin-left: 0;
list-style: none;
overflow: hidden; /* clear floats */
}
.responsive-utilities-test li {
position: relative;
float: left;
width: 25%;
height: 43px;
font-size: 14px;
font-weight: bold;
line-height: 43px;
color: #999;
text-align: center;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.responsive-utilities-test li + li {
margin-left: 10px;
}
.responsive-utilities-test span {
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.responsive-utilities-test span {
color: #468847;
background-color: #dff0d8;
border: 1px solid #d6e9c6;
}
/* Responsive Docs
-------------------------------------------------- */
@media (max-width: 480px) {
/* Reduce padding above jumbotron */
body {
padding-top: 70px;
}
/* Change up some type stuff */
h2 {
margin-top: 27px;
}
h2 small {
display: block;
line-height: 18px;
}
h3 {
margin-top: 18px;
}
/* icons */
.marketing .bs-icon {
margin: 0;
}
/* Adjust the jumbotron */
.jumbotron h1,
.jumbotron p {
text-align: center;
margin-right: 0;
}
.jumbotron h1 {
font-size: 45px;
margin-right: 0;
}
.jumbotron p {
margin-right: 0;
margin-left: 0;
font-size: 18px;
line-height: 24px;
}
.jumbotron .btn {
display: block;
font-size: 18px;
padding: 10px 14px;
margin: 0 auto 10px;
}
/* Masthead (home page jumbotron) */
.masthead {
padding-top: 0;
}
/* Don't space out quick links so much */
.quick-links {
margin: 40px 0 0;
}
/* hide the bullets on mobile since our horizontal space is limited */
.quick-links .divider {
display: none;
}
/* center example sites */
.example-sites {
margin-left: 0;
}
.example-sites > li {
float: none;
display: block;
max-width: 280px;
margin: 0 auto 18px;
text-align: center;
}
.example-sites .thumbnail > img {
max-width: 270px;
}
table code {
white-space: normal;
word-wrap: break-word;
word-break: break-all;
}
/* Modal example */
.modal-example .modal {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
}
}
@media (max-width: 768px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
/* Jumbotron buttons */
.jumbotron .btn {
margin-bottom: 10px;
}
/* Subnav */
.subnav {
position: static;
top: auto;
z-index: auto;
width: auto;
height: auto;
background: #fff; /* whole background property since we use a background-image for gradient */
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.subnav .nav > li {
float: none;
}
.subnav .nav > li > a {
border: 0;
}
.subnav .nav > li + li > a {
border-top: 1px solid #e5e5e5;
}
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
/* Popovers */
.large-bird {
display: none;
}
.popover-well .popover-wrapper {
margin-left: 0;
}
/* Space out the show-grid examples */
.show-grid [class*="span"] {
margin-bottom: 5px;
}
/* Unfloat the back to top link in footer */
.footer .pull-right {
float: none;
}
.footer p {
margin-bottom: 9px;
}
}
@media (min-width: 480px) and (max-width: 768px) {
/* Scale down the jumbotron content */
.jumbotron h1 {
font-size: 54px;
}
.jumbotron p {
margin-right: 0;
margin-left: 0;
}
}
@media (min-width: 768px) and (max-width: 980px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
/* Scale down the jumbotron content */
.jumbotron h1 {
font-size: 72px;
}
}
@media (max-width: 980px) {
/* Unfloat brand */
.navbar-fixed-top .brand {
float: left;
margin-left: 0;
padding-left: 10px;
padding-right: 10px;
}
/* Inline-block quick links for more spacing */
.quick-links li {
display: inline-block;
margin: 5px;
}
}
/* LARGE DESKTOP SCREENS */
@media (min-width: 1210px) {
/* Update subnav container */
.subnav-fixed .nav {
width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */
}
}
docs/docs/likebutton/docs/assets/ico/apple-touch-icon-114-precomposed.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

docs/docs/likebutton/docs/assets/ico/apple-touch-icon-144-precomposed.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

docs/docs/likebutton/docs/assets/ico/apple-touch-icon-57-precomposed.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

docs/docs/likebutton/docs/assets/ico/apple-touch-icon-72-precomposed.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

docs/docs/likebutton/docs/assets/ico/favicon.ico
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

docs/docs/likebutton/docs/assets/img/bird.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

docs/docs/likebutton/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

docs/docs/likebutton/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

docs/docs/likebutton/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

docs/docs/likebutton/docs/assets/img/browsers.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

docs/docs/likebutton/docs/assets/img/example-sites/fleetio.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

docs/docs/likebutton/docs/assets/img/example-sites/jshint.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

docs/docs/likebutton/docs/assets/img/example-sites/kippt.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

docs/docs/likebutton/docs/assets/img/example-sites/soundready.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

docs/docs/likebutton/docs/assets/img/examples/bootstrap-example-fluid.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

docs/docs/likebutton/docs/assets/img/examples/bootstrap-example-hero.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

docs/docs/likebutton/docs/assets/img/examples/bootstrap-example-starter.jpg
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

docs/docs/likebutton/docs/assets/img/github-16px.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 398 B

docs/docs/likebutton/docs/assets/img/glyphicons-halflings-white.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

docs/docs/likebutton/docs/assets/img/glyphicons-halflings.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_009_magic.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_042_group.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 305 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_079_podium.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_082_roundabout.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_155_show_thumbnails.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_163_iphone.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 172 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_214_resize_small.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 301 B

docs/docs/likebutton/docs/assets/img/glyphicons/glyphicons_266_book_open.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 B

docs/docs/likebutton/docs/assets/img/grid-18px-masked.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 405 B

docs/docs/likebutton/docs/assets/img/icon-css3.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 370 B

docs/docs/likebutton/docs/assets/img/icon-github.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 B

docs/docs/likebutton/docs/assets/img/icon-html5.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 B

docs/docs/likebutton/docs/assets/img/icon-twitter.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 B

docs/docs/likebutton/docs/assets/img/less-logo-large.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

docs/docs/likebutton/docs/assets/img/less-small.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

docs/docs/likebutton/docs/assets/img/responsive-illustrations.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

docs/docs/likebutton/docs/assets/js/README.md
Executable
+106
View File
@@ -0,0 +1,106 @@
## 2.0 BOOTSTRAP JS PHILOSOPHY
These are the high-level design rules which guide the development of Bootstrap's plugin apis.
---
### DATA-ATTRIBUTE API
We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript.
We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this:
$('body').off('.data-api')
To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this:
$('body').off('.alert.data-api')
---
### PROGRAMATIC API
We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API.
All public APIs should be single, chainable methods, and return the collection acted upon.
$(".btn.danger").button("toggle").addClass("fat")
All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior:
$("#myModal").modal() // initialized with defaults
$("#myModal").modal({ keyboard: false }) // initialized with now keyboard
$("#myModal").modal('show') // initializes and invokes show immediately afterqwe2
---
### OPTIONS
Options should be sparse and add universal value. We should pick the right defaults.
All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … }
An options definition should take the following form:
*noun*: *adjective* - describes or modifies a quality of an instance
examples:
backdrop: true
keyboard: false
placement: 'top'
---
### EVENTS
All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action.
show | shown
hide | hidden
---
### CONSTRUCTORS
Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
$.fn.popover.Constructor
---
### DATA ACCESSOR
Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this:
$('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor
---
### DATA ATTRIBUTES
Data attributes should take the following form:
- data-{{verb}}={{plugin}} - defines main interaction
- data-target || href^=# - defined on "control" element (if element controls an element other than self)
- data-{{noun}} - defines class instance options
examples:
// control other targets
data-toggle="modal" data-target="#foo"
data-toggle="collapse" data-target="#foo" data-parent="#bar"
// defined on element they control
data-spy="scroll"
data-dismiss="modal"
data-dismiss="alert"
data-toggle="dropdown"
data-toggle="button"
data-toggle="buttons-checkbox"
data-toggle="buttons-radio"
docs/docs/likebutton/docs/assets/js/application.js
Executable
+184
View File
@@ -0,0 +1,184 @@
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
!function ($) {
$(function(){
// Disable certain links in docs
$('section [href^=#]').click(function (e) {
e.preventDefault()
})
// make code pretty
window.prettyPrint && prettyPrint()
// add-ons
$('.add-on :checkbox').on('click', function () {
var $this = $(this)
, method = $this.attr('checked') ? 'addClass' : 'removeClass'
$(this).parents('.add-on')[method]('active')
})
// position static twipsies for components page
if ($(".twipsies a").length) {
$(window).on('load resize', function () {
$(".twipsies a").each(function () {
$(this)
.tooltip({
placement: $(this).attr('title')
, trigger: 'manual'
})
.tooltip('show')
})
})
}
// add tipsies to grid for scaffolding
if ($('#grid-system').length) {
$('#grid-system').tooltip({
selector: '.show-grid > div'
, title: function () { return $(this).width() + 'px' }
})
}
// fix sub nav on scroll
var $win = $(window)
, $nav = $('.subnav')
, navTop = $('.subnav').length && $('.subnav').offset().top - 40
, isFixed = 0
processScroll()
// hack sad times - holdover until rewrite for 2.1
$nav.on('click', function () {
if (!isFixed) setTimeout(function () { $win.scrollTop($win.scrollTop() - 47) }, 10)
})
$win.on('scroll', processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if (scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass('subnav-fixed')
} else if (scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass('subnav-fixed')
}
}
// tooltip demo
$('.tooltip-demo.well').tooltip({
selector: "a[rel=tooltip]"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// popover demo
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})
// button state demo
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
// carousel demo
$('#myCarousel').carousel()
// javascript build logic
var inputsComponent = $("#components.download input")
, inputsPlugin = $("#plugins.download input")
, inputsVariables = $("#variables.download input")
// toggle all plugin checkboxes
$('#components.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsComponent.attr('checked', !inputsComponent.is(':checked'))
})
$('#plugins.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
})
$('#variables.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.download-btn').on('click', function () {
var css = $("#components.download input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins.download input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
, img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
$("#variables.download input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /\?dev/.test(window.location) ? 'http://localhost:3000' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
, img: img
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)
docs/docs/likebutton/docs/assets/js/bootstrap-alert.js
Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
/* ==========================================================
* bootstrap-alert.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* ALERT CLASS DEFINITION
* ====================== */
var dismiss = '[data-dismiss="alert"]'
, Alert = function (el) {
$(el).on('click', dismiss, this.close)
}
Alert.prototype.close = function (e) {
var $this = $(this)
, selector = $this.attr('data-target')
, $parent
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
e && e.preventDefault()
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
$parent.trigger(e = $.Event('close'))
if (e.isDefaultPrevented()) return
$parent.removeClass('in')
function removeElement() {
$parent
.trigger('closed')
.remove()
}
$.support.transition && $parent.hasClass('fade') ?
$parent.on($.support.transition.end, removeElement) :
removeElement()
}
/* ALERT PLUGIN DEFINITION
* ======================= */
$.fn.alert = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('alert')
if (!data) $this.data('alert', (data = new Alert(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.alert.Constructor = Alert
/* ALERT DATA-API
* ============== */
$(function () {
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-button.js
Vendored Executable
+96
View File
@@ -0,0 +1,96 @@
/* ============================================================
* bootstrap-button.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function ($) {
"use strict"; // jshint ;_;
/* BUTTON PUBLIC CLASS DEFINITION
* ============================== */
var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.button.defaults, options)
}
Button.prototype.setState = function (state) {
var d = 'disabled'
, $el = this.$element
, data = $el.data()
, val = $el.is('input') ? 'val' : 'html'
state = state + 'Text'
data.resetText || $el.data('resetText', $el[val]())
$el[val](data[state] || this.options[state])
// push to event loop to allow forms to submit
setTimeout(function () {
state == 'loadingText' ?
$el.addClass(d).attr(d, d) :
$el.removeClass(d).removeAttr(d)
}, 0)
}
Button.prototype.toggle = function () {
var $parent = this.$element.parent('[data-toggle="buttons-radio"]')
$parent && $parent
.find('.active')
.removeClass('active')
this.$element.toggleClass('active')
}
/* BUTTON PLUGIN DEFINITION
* ======================== */
$.fn.button = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('button')
, options = typeof option == 'object' && option
if (!data) $this.data('button', (data = new Button(this, options)))
if (option == 'toggle') data.toggle()
else if (option) data.setState(option)
})
}
$.fn.button.defaults = {
loadingText: 'loading...'
}
$.fn.button.Constructor = Button
/* BUTTON DATA-API
* =============== */
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle')
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-carousel.js
Vendored Executable
+169
View File
@@ -0,0 +1,169 @@
/* ==========================================================
* bootstrap-carousel.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* CAROUSEL CLASS DEFINITION
* ========================= */
var Carousel = function (element, options) {
this.$element = $(element)
this.options = options
this.options.slide && this.slide(this.options.slide)
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
}
Carousel.prototype = {
cycle: function (e) {
if (!e) this.paused = false
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
, to: function (pos) {
var $active = this.$element.find('.active')
, children = $active.parent().children()
, activePos = children.index($active)
, that = this
if (pos > (children.length - 1) || pos < 0) return
if (this.sliding) {
return this.$element.one('slid', function () {
that.to(pos)
})
}
if (activePos == pos) {
return this.pause().cycle()
}
return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
}
, pause: function (e) {
if (!e) this.paused = true
clearInterval(this.interval)
this.interval = null
return this
}
, next: function () {
if (this.sliding) return
return this.slide('next')
}
, prev: function () {
if (this.sliding) return
return this.slide('prev')
}
, slide: function (type, next) {
var $active = this.$element.find('.active')
, $next = next || $active[type]()
, isCycling = this.interval
, direction = type == 'next' ? 'left' : 'right'
, fallback = type == 'next' ? 'first' : 'last'
, that = this
, e = $.Event('slide')
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () { that.$element.trigger('slid') }, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
isCycling && this.cycle()
return this
}
}
/* CAROUSEL PLUGIN DEFINITION
* ========================== */
$.fn.carousel = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('carousel')
, options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
if (!data) $this.data('carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (typeof option == 'string' || (option = options.slide)) data[option]()
else if (options.interval) data.cycle()
})
}
$.fn.carousel.defaults = {
interval: 5000
, pause: 'hover'
}
$.fn.carousel.Constructor = Carousel
/* CAROUSEL DATA-API
* ================= */
$(function () {
$('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
$target.carousel(options)
e.preventDefault()
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-collapse.js
Vendored Executable
+157
View File
@@ -0,0 +1,157 @@
/* =============================================================
* bootstrap-collapse.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function ($) {
"use strict"; // jshint ;_;
/* COLLAPSE PUBLIC CLASS DEFINITION
* ================================ */
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.collapse.defaults, options)
if (this.options.parent) {
this.$parent = $(this.options.parent)
}
this.options.toggle && this.toggle()
}
Collapse.prototype = {
constructor: Collapse
, dimension: function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
, show: function () {
var dimension
, scroll
, actives
, hasData
if (this.transitioning) return
dimension = this.dimension()
scroll = $.camelCase(['scroll', dimension].join('-'))
actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData || actives.data('collapse', null)
}
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
this.$element[dimension](this.$element[0][scroll])
}
, hide: function () {
var dimension
if (this.transitioning) return
dimension = this.dimension()
this.reset(this.$element[dimension]())
this.transition('removeClass', $.Event('hide'), 'hidden')
this.$element[dimension](0)
}
, reset: function (size) {
var dimension = this.dimension()
this.$element
.removeClass('collapse')
[dimension](size || 'auto')
[0].offsetWidth
this.$element[size !== null ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function (method, startEvent, completeEvent) {
var that = this
, complete = function () {
if (startEvent.type == 'show') that.reset()
that.transitioning = 0
that.$element.trigger(completeEvent)
}
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
this.transitioning = 1
this.$element[method]('in')
$.support.transition && this.$element.hasClass('collapse') ?
this.$element.one($.support.transition.end, complete) :
complete()
}
, toggle: function () {
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
}
/* COLLAPSIBLE PLUGIN DEFINITION
* ============================== */
$.fn.collapse = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('collapse')
, options = typeof option == 'object' && option
if (!data) $this.data('collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.collapse.defaults = {
toggle: true
}
$.fn.collapse.Constructor = Collapse
/* COLLAPSIBLE DATA-API
* ==================== */
$(function () {
$('body').on('click.collapse.data-api', '[data-toggle=collapse]', function ( e ) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
$(target).collapse(option)
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-dropdown.js
Vendored Executable
+100
View File
@@ -0,0 +1,100 @@
/* ============================================================
* bootstrap-dropdown.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function ($) {
"use strict"; // jshint ;_;
/* DROPDOWN CLASS DEFINITION
* ========================= */
var toggle = '[data-toggle="dropdown"]'
, Dropdown = function (element) {
var $el = $(element).on('click.dropdown.data-api', this.toggle)
$('html').on('click.dropdown.data-api', function () {
$el.parent().removeClass('open')
})
}
Dropdown.prototype = {
constructor: Dropdown
, toggle: function (e) {
var $this = $(this)
, $parent
, selector
, isActive
if ($this.is('.disabled, :disabled')) return
selector = $this.attr('data-target')
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
$parent = $(selector)
$parent.length || ($parent = $this.parent())
isActive = $parent.hasClass('open')
clearMenus()
if (!isActive) $parent.toggleClass('open')
return false
}
}
function clearMenus() {
$(toggle).parent().removeClass('open')
}
/* DROPDOWN PLUGIN DEFINITION
* ========================== */
$.fn.dropdown = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('dropdown')
if (!data) $this.data('dropdown', (data = new Dropdown(this)))
if (typeof option == 'string') data[option].call($this)
})
}
$.fn.dropdown.Constructor = Dropdown
/* APPLY TO STANDARD DROPDOWN ELEMENTS
* =================================== */
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body')
.on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-modal.js
Vendored Executable
+218
View File
@@ -0,0 +1,218 @@
/* =========================================================
* bootstrap-modal.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================= */
!function ($) {
"use strict"; // jshint ;_;
/* MODAL CLASS DEFINITION
* ====================== */
var Modal = function (content, options) {
this.options = options
this.$element = $(content)
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this))
}
Modal.prototype = {
constructor: Modal
, toggle: function () {
return this[!this.isShown ? 'show' : 'hide']()
}
, show: function () {
var that = this
, e = $.Event('show')
this.$element.trigger(e)
if (this.isShown || e.isDefaultPrevented()) return
$('body').addClass('modal-open')
this.isShown = true
escape.call(this)
backdrop.call(this, function () {
var transition = $.support.transition && that.$element.hasClass('fade')
if (!that.$element.parent().length) {
that.$element.appendTo(document.body) //don't move modals dom position
}
that.$element
.show()
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element.addClass('in')
transition ?
that.$element.one($.support.transition.end, function () { that.$element.trigger('shown') }) :
that.$element.trigger('shown')
})
}
, hide: function (e) {
e && e.preventDefault()
var that = this
e = $.Event('hide')
this.$element.trigger(e)
if (!this.isShown || e.isDefaultPrevented()) return
this.isShown = false
$('body').removeClass('modal-open')
escape.call(this)
this.$element.removeClass('in')
$.support.transition && this.$element.hasClass('fade') ?
hideWithTransition.call(this) :
hideModal.call(this)
}
}
/* MODAL PRIVATE METHODS
* ===================== */
function hideWithTransition() {
var that = this
, timeout = setTimeout(function () {
that.$element.off($.support.transition.end)
hideModal.call(that)
}, 500)
this.$element.one($.support.transition.end, function () {
clearTimeout(timeout)
hideModal.call(that)
})
}
function hideModal(that) {
this.$element
.hide()
.trigger('hidden')
backdrop.call(this)
}
function backdrop(callback) {
var that = this
, animate = this.$element.hasClass('fade') ? 'fade' : ''
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
.appendTo(document.body)
if (this.options.backdrop != 'static') {
this.$backdrop.click($.proxy(this.hide, this))
}
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
this.$backdrop.addClass('in')
doAnimate ?
this.$backdrop.one($.support.transition.end, callback) :
callback()
} else if (!this.isShown && this.$backdrop) {
this.$backdrop.removeClass('in')
$.support.transition && this.$element.hasClass('fade')?
this.$backdrop.one($.support.transition.end, $.proxy(removeBackdrop, this)) :
removeBackdrop.call(this)
} else if (callback) {
callback()
}
}
function removeBackdrop() {
this.$backdrop.remove()
this.$backdrop = null
}
function escape() {
var that = this
if (this.isShown && this.options.keyboard) {
$(document).on('keyup.dismiss.modal', function ( e ) {
e.which == 27 && that.hide()
})
} else if (!this.isShown) {
$(document).off('keyup.dismiss.modal')
}
}
/* MODAL PLUGIN DEFINITION
* ======================= */
$.fn.modal = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
, options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
})
}
$.fn.modal.defaults = {
backdrop: true
, keyboard: true
, show: true
}
$.fn.modal.Constructor = Modal
/* MODAL DATA-API
* ============== */
$(function () {
$('body').on('click.modal.data-api', '[data-toggle="modal"]', function ( e ) {
var $this = $(this), href
, $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({}, $target.data(), $this.data())
e.preventDefault()
$target.modal(option)
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-popover.js
Vendored Executable
+98
View File
@@ -0,0 +1,98 @@
/* ===========================================================
* bootstrap-popover.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* =========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* POPOVER PUBLIC CLASS DEFINITION
* =============================== */
var Popover = function ( element, options ) {
this.init('popover', element, options)
}
/* NOTE: POPOVER EXTENDS BOOTSTRAP-TOOLTIP.js
========================================== */
Popover.prototype = $.extend({}, $.fn.tooltip.Constructor.prototype, {
constructor: Popover
, setContent: function () {
var $tip = this.tip()
, title = this.getTitle()
, content = this.getContent()
$tip.find('.popover-title')[this.isHTML(title) ? 'html' : 'text'](title)
$tip.find('.popover-content > *')[this.isHTML(content) ? 'html' : 'text'](content)
$tip.removeClass('fade top bottom left right in')
}
, hasContent: function () {
return this.getTitle() || this.getContent()
}
, getContent: function () {
var content
, $e = this.$element
, o = this.options
content = $e.attr('data-content')
|| (typeof o.content == 'function' ? o.content.call($e[0]) : o.content)
return content
}
, tip: function () {
if (!this.$tip) {
this.$tip = $(this.options.template)
}
return this.$tip
}
})
/* POPOVER PLUGIN DEFINITION
* ======================= */
$.fn.popover = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('popover')
, options = typeof option == 'object' && option
if (!data) $this.data('popover', (data = new Popover(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.popover.Constructor = Popover
$.fn.popover.defaults = $.extend({} , $.fn.tooltip.defaults, {
placement: 'right'
, content: ''
, template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-scrollspy.js
Vendored Executable
+151
View File
@@ -0,0 +1,151 @@
/* =============================================================
* bootstrap-scrollspy.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* SCROLLSPY CLASS DEFINITION
* ========================== */
function ScrollSpy( element, options) {
var process = $.proxy(this.process, this)
, $element = $(element).is('body') ? $(window) : $(element)
, href
this.options = $.extend({}, $.fn.scrollspy.defaults, options)
this.$scrollElement = $element.on('scroll.scroll.data-api', process)
this.selector = (this.options.target
|| ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
|| '') + ' .nav li > a'
this.$body = $('body')
this.refresh()
this.process()
}
ScrollSpy.prototype = {
constructor: ScrollSpy
, refresh: function () {
var self = this
, $targets
this.offsets = $([])
this.targets = $([])
$targets = this.$body
.find(this.selector)
.map(function () {
var $el = $(this)
, href = $el.data('target') || $el.attr('href')
, $href = /^#\w/.test(href) && $(href)
return ( $href
&& href.length
&& [[ $href.position().top, href ]] ) || null
})
.sort(function (a, b) { return a[0] - b[0] })
.each(function () {
self.offsets.push(this[0])
self.targets.push(this[1])
})
}
, process: function () {
var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
, scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
, maxScroll = scrollHeight - this.$scrollElement.height()
, offsets = this.offsets
, targets = this.targets
, activeTarget = this.activeTarget
, i
if (scrollTop >= maxScroll) {
return activeTarget != (i = targets.last()[0])
&& this.activate ( i )
}
for (i = offsets.length; i--;) {
activeTarget != targets[i]
&& scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])
&& this.activate( targets[i] )
}
}
, activate: function (target) {
var active
, selector
this.activeTarget = target
$(this.selector)
.parent('.active')
.removeClass('active')
selector = this.selector
+ '[data-target="' + target + '"],'
+ this.selector + '[href="' + target + '"]'
active = $(selector)
.parent('li')
.addClass('active')
if (active.parent('.dropdown-menu')) {
active = active.closest('li.dropdown').addClass('active')
}
active.trigger('activate')
}
}
/* SCROLLSPY PLUGIN DEFINITION
* =========================== */
$.fn.scrollspy = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('scrollspy')
, options = typeof option == 'object' && option
if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.scrollspy.Constructor = ScrollSpy
$.fn.scrollspy.defaults = {
offset: 10
}
/* SCROLLSPY DATA-API
* ================== */
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this)
$spy.scrollspy($spy.data())
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-tab.js
Vendored Executable
+135
View File
@@ -0,0 +1,135 @@
/* ========================================================
* bootstrap-tab.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* TAB CLASS DEFINITION
* ==================== */
var Tab = function ( element ) {
this.element = $(element)
}
Tab.prototype = {
constructor: Tab
, show: function () {
var $this = this.element
, $ul = $this.closest('ul:not(.dropdown-menu)')
, selector = $this.attr('data-target')
, previous
, $target
, e
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}
if ( $this.parent('li').hasClass('active') ) return
previous = $ul.find('.active a').last()[0]
e = $.Event('show', {
relatedTarget: previous
})
$this.trigger(e)
if (e.isDefaultPrevented()) return
$target = $(selector)
this.activate($this.parent('li'), $ul)
this.activate($target, $target.parent(), function () {
$this.trigger({
type: 'shown'
, relatedTarget: previous
})
})
}
, activate: function ( element, container, callback) {
var $active = container.find('> .active')
, transition = callback
&& $.support.transition
&& $active.hasClass('fade')
function next() {
$active
.removeClass('active')
.find('> .dropdown-menu > .active')
.removeClass('active')
element.addClass('active')
if (transition) {
element[0].offsetWidth // reflow for transition
element.addClass('in')
} else {
element.removeClass('fade')
}
if ( element.parent('.dropdown-menu') ) {
element.closest('li.dropdown').addClass('active')
}
callback && callback()
}
transition ?
$active.one($.support.transition.end, next) :
next()
$active.removeClass('in')
}
}
/* TAB PLUGIN DEFINITION
* ===================== */
$.fn.tab = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('tab')
if (!data) $this.data('tab', (data = new Tab(this)))
if (typeof option == 'string') data[option]()
})
}
$.fn.tab.Constructor = Tab
/* TAB DATA-API
* ============ */
$(function () {
$('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-tooltip.js
Vendored Executable
+275
View File
@@ -0,0 +1,275 @@
/* ===========================================================
* bootstrap-tooltip.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* TOOLTIP PUBLIC CLASS DEFINITION
* =============================== */
var Tooltip = function (element, options) {
this.init('tooltip', element, options)
}
Tooltip.prototype = {
constructor: Tooltip
, init: function (type, element, options) {
var eventIn
, eventOut
this.type = type
this.$element = $(element)
this.options = this.getOptions(options)
this.enabled = true
if (this.options.trigger != 'manual') {
eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
this.$element.on(eventIn, this.options.selector, $.proxy(this.enter, this))
this.$element.on(eventOut, this.options.selector, $.proxy(this.leave, this))
}
this.options.selector ?
(this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
this.fixTitle()
}
, getOptions: function (options) {
options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
if (options.delay && typeof options.delay == 'number') {
options.delay = {
show: options.delay
, hide: options.delay
}
}
return options
}
, enter: function (e) {
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
clearTimeout(this.timeout)
self.hoverState = 'in'
this.timeout = setTimeout(function() {
if (self.hoverState == 'in') self.show()
}, self.options.delay.show)
}
, leave: function (e) {
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
if (this.timeout) clearTimeout(this.timeout)
if (!self.options.delay || !self.options.delay.hide) return self.hide()
self.hoverState = 'out'
this.timeout = setTimeout(function() {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
}
, show: function () {
var $tip
, inside
, pos
, actualWidth
, actualHeight
, placement
, tp
if (this.hasContent() && this.enabled) {
$tip = this.tip()
this.setContent()
if (this.options.animation) {
$tip.addClass('fade')
}
placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
inside = /in/.test(placement)
$tip
.remove()
.css({ top: 0, left: 0, display: 'block' })
.appendTo(inside ? this.$element : document.body)
pos = this.getPosition(inside)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
}
$tip
.css(tp)
.addClass(placement)
.addClass('in')
}
}
, isHTML: function(text) {
// html string detection logic adapted from jQuery
return typeof text != 'string'
|| ( text.charAt(0) === "<"
&& text.charAt( text.length - 1 ) === ">"
&& text.length >= 3
) || /^(?:[^<]*<[\w\W]+>[^>]*$)/.exec(text)
}
, setContent: function () {
var $tip = this.tip()
, title = this.getTitle()
$tip.find('.tooltip-inner')[this.isHTML(title) ? 'html' : 'text'](title)
$tip.removeClass('fade in top bottom left right')
}
, hide: function () {
var that = this
, $tip = this.tip()
$tip.removeClass('in')
function removeWithAnimation() {
var timeout = setTimeout(function () {
$tip.off($.support.transition.end).remove()
}, 500)
$tip.one($.support.transition.end, function () {
clearTimeout(timeout)
$tip.remove()
})
}
$.support.transition && this.$tip.hasClass('fade') ?
removeWithAnimation() :
$tip.remove()
}
, fixTitle: function () {
var $e = this.$element
if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
$e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
}
}
, hasContent: function () {
return this.getTitle()
}
, getPosition: function (inside) {
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
width: this.$element[0].offsetWidth
, height: this.$element[0].offsetHeight
})
}
, getTitle: function () {
var title
, $e = this.$element
, o = this.options
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
, tip: function () {
return this.$tip = this.$tip || $(this.options.template)
}
, validate: function () {
if (!this.$element[0].parentNode) {
this.hide()
this.$element = null
this.options = null
}
}
, enable: function () {
this.enabled = true
}
, disable: function () {
this.enabled = false
}
, toggleEnabled: function () {
this.enabled = !this.enabled
}
, toggle: function () {
this[this.tip().hasClass('in') ? 'hide' : 'show']()
}
}
/* TOOLTIP PLUGIN DEFINITION
* ========================= */
$.fn.tooltip = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('tooltip')
, options = typeof option == 'object' && option
if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.tooltip.Constructor = Tooltip
$.fn.tooltip.defaults = {
animation: true
, placement: 'top'
, selector: false
, template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
, trigger: 'hover'
, title: ''
, delay: 0
}
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-transition.js
Vendored Executable
+61
View File
@@ -0,0 +1,61 @@
/* ===================================================
* bootstrap-transition.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ========================================================== */
!function ($) {
$(function () {
"use strict"; // jshint ;_;
/* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
* ======================================================= */
$.support.transition = (function () {
var transitionEnd = (function () {
var el = document.createElement('bootstrap')
, transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd'
, 'MozTransition' : 'transitionend'
, 'OTransition' : 'oTransitionEnd'
, 'msTransition' : 'MSTransitionEnd'
, 'transition' : 'transitionend'
}
, name
for (name in transEndEventNames){
if (el.style[name] !== undefined) {
return transEndEventNames[name]
}
}
}())
return transitionEnd && {
end: transitionEnd
}
})()
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap-typeahead.js
Vendored Executable
+285
View File
@@ -0,0 +1,285 @@
/* =============================================================
* bootstrap-typeahead.js v2.0.4
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ============================================================ */
!function($){
"use strict"; // jshint ;_;
/* TYPEAHEAD PUBLIC CLASS DEFINITION
* ================================= */
var Typeahead = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, $.fn.typeahead.defaults, options)
this.matcher = this.options.matcher || this.matcher
this.sorter = this.options.sorter || this.sorter
this.highlighter = this.options.highlighter || this.highlighter
this.updater = this.options.updater || this.updater
this.$menu = $(this.options.menu).appendTo('body')
this.source = this.options.source
this.shown = false
this.listen()
}
Typeahead.prototype = {
constructor: Typeahead
, select: function () {
var val = this.$menu.find('.active').attr('data-value')
this.$element
.val(this.updater(val))
.change()
return this.hide()
}
, updater: function (item) {
return item
}
, show: function () {
var pos = $.extend({}, this.$element.offset(), {
height: this.$element[0].offsetHeight
})
this.$menu.css({
top: pos.top + pos.height
, left: pos.left
})
this.$menu.show()
this.shown = true
return this
}
, hide: function () {
this.$menu.hide()
this.shown = false
return this
}
, lookup: function (event) {
var that = this
, items
, q
this.query = this.$element.val()
if (!this.query) {
return this.shown ? this.hide() : this
}
items = $.grep(this.source, function (item) {
return that.matcher(item)
})
items = this.sorter(items)
if (!items.length) {
return this.shown ? this.hide() : this
}
return this.render(items.slice(0, this.options.items)).show()
}
, matcher: function (item) {
return ~item.toLowerCase().indexOf(this.query.toLowerCase())
}
, sorter: function (items) {
var beginswith = []
, caseSensitive = []
, caseInsensitive = []
, item
while (item = items.shift()) {
if (!item.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item)
else if (~item.indexOf(this.query)) caseSensitive.push(item)
else caseInsensitive.push(item)
}
return beginswith.concat(caseSensitive, caseInsensitive)
}
, highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
})
}
, render: function (items) {
var that = this
items = $(items).map(function (i, item) {
i = $(that.options.item).attr('data-value', item)
i.find('a').html(that.highlighter(item))
return i[0]
})
items.first().addClass('active')
this.$menu.html(items)
return this
}
, next: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, next = active.next()
if (!next.length) {
next = $(this.$menu.find('li')[0])
}
next.addClass('active')
}
, prev: function (event) {
var active = this.$menu.find('.active').removeClass('active')
, prev = active.prev()
if (!prev.length) {
prev = this.$menu.find('li').last()
}
prev.addClass('active')
}
, listen: function () {
this.$element
.on('blur', $.proxy(this.blur, this))
.on('keypress', $.proxy(this.keypress, this))
.on('keyup', $.proxy(this.keyup, this))
if ($.browser.webkit || $.browser.msie) {
this.$element.on('keydown', $.proxy(this.keypress, this))
}
this.$menu
.on('click', $.proxy(this.click, this))
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
}
, keyup: function (e) {
switch(e.keyCode) {
case 40: // down arrow
case 38: // up arrow
break
case 9: // tab
case 13: // enter
if (!this.shown) return
this.select()
break
case 27: // escape
if (!this.shown) return
this.hide()
break
default:
this.lookup()
}
e.stopPropagation()
e.preventDefault()
}
, keypress: function (e) {
if (!this.shown) return
switch(e.keyCode) {
case 9: // tab
case 13: // enter
case 27: // escape
e.preventDefault()
break
case 38: // up arrow
if (e.type != 'keydown') break
e.preventDefault()
this.prev()
break
case 40: // down arrow
if (e.type != 'keydown') break
e.preventDefault()
this.next()
break
}
e.stopPropagation()
}
, blur: function (e) {
var that = this
setTimeout(function () { that.hide() }, 150)
}
, click: function (e) {
e.stopPropagation()
e.preventDefault()
this.select()
}
, mouseenter: function (e) {
this.$menu.find('.active').removeClass('active')
$(e.currentTarget).addClass('active')
}
}
/* TYPEAHEAD PLUGIN DEFINITION
* =========================== */
$.fn.typeahead = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typeahead')
, options = typeof option == 'object' && option
if (!data) $this.data('typeahead', (data = new Typeahead(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.typeahead.defaults = {
source: []
, items: 8
, menu: '<ul class="typeahead dropdown-menu"></ul>'
, item: '<li><a href="#"></a></li>'
}
$.fn.typeahead.Constructor = Typeahead
/* TYPEAHEAD DATA-API
* ================== */
$(function () {
$('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
var $this = $(this)
if ($this.data('typeahead')) return
e.preventDefault()
$this.typeahead($this.data())
})
})
}(window.jQuery);
docs/docs/likebutton/docs/assets/js/bootstrap.js
Vendored Executable
+1825
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/assets/js/bootstrap.min.js
Vendored Executable
+6
View File
File diff suppressed because one or more lines are too long
docs/docs/likebutton/docs/assets/js/google-code-prettify/prettify.css
Executable
+115
View File
@@ -0,0 +1,115 @@
/* .com { color: #93a1a1; } */
/* .lit { color: #195f91; } */
/* .pun, .opn, .clo { color: #93a1a1; } */
/* .fun { color: #dc322f; } */
/* .str, .atv { color: #D14; } */
/* .kwd, .linenums .tag { color: #1e347b; } */
/* .typ, .atn, .dec, .var { color: teal; } */
/* .pln { color: #48484c; } */
/* .prettyprint { */
/* padding: 8px; */
/* background-color: #f9f9f9; */
/* border: 1px solid #e1e1e8; */
/* } */
/* .prettyprint.linenums { */
/* -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
/* -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
/* box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; */
/* } */
/* /1* Specify class=linenums on a pre to get line numbering *1/ */
/* ol.linenums { */
/* margin: 0 0 0 33px; /1* IE indents via margin-left *1/ */
/* } */
/* ol.linenums li { */
/* padding-left: 12px; */
/* color: #bebec5; */
/* line-height: 18px; */
/* text-shadow: 0 1px 0 #fff; */
/* } */
/* Jordow's theme */
/* .com { */
/* color: rgba(90, 117, 200, 1); */
/* } */
/* .lit { color: #195f91; } */
/* .pun, .opn, .clo { color: #90908e; } */
/* .fun { color: #dc322f; } */
/* .str, .atv { color: #9a9; } */
/* .kwd, .linenums .tag { color: rgba(90, 117, 200, 1)} */
/* .typ, .atn, .dec, .var { color: #b86050; } */
/* .pln { color: #555550; } */
/* .prettyprint { */
/* padding: 8px; */
/* background-color: rgb(253,253,253); */
/* border: 1px solid #e0e0e7; */
/* } */
/* .prettyprint.linenums { */
/* -webkit-box-shadow: inset 40px 0 0 #f9f9f9, inset 41px 0 0 #E8E8EE; */
/* -moz-box-shadow: inset 40px 0 0 #f9f9f9, inset 41px 0 0 #E8E8EE; */
/* box-shadow: inset 40px 0 0 #f9f9f9, inset 41px 0 0 #E8E8EE; */
/* } */
/* /1* Specify class=linenums on a pre to get line numbering *1/ */
/* ol.linenums { */
/* margin: 0 0 0 33px; /1* IE indents via margin-left *1/ */
/* } */
/* ol.linenums li { */
/* padding-left: 12px; */
/* color: #ceced5; */
/* line-height: 18px; */
/* text-shadow: 0 1px 0 #fff; */
/* } */
/* code { */
/* /*border: 1px solid #E8E8EE;*/ */
/* box-sizing: border-box; */
/* padding: 1px 2px; */
/* background-color: #f7f7f7; */
/* color: rgba(90, 117, 200, 1); */
/* border: 1px solid #E8E8EE; */
/* } */
/** USE THE YELLOW THEME: */
/* http://docs.scala-lang.org/sips/completed/scala-2-8-arrays.html */
.lit { color: #195f91; }
.pun, .opn, .clo { color: #93a1a1; }
.fun { color: #dc322f; }
.str, .atv { color: #268bd2; }
.kwd, .tag { color: #195f91; }
.typ, .atn, .dec, .var { color: #CB4B16; }
.pln { color: #555 /*color: #93a1a1;*/ }
pre.prettyprint {
background: #fefbf3;
padding: 9px;
border: 1px solid rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.com {
color: rgb(110, 130, 117);
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin: 0 0 0 33px; /* IE indents via margin-left */
}
ol.linenums li {
padding-left: 12px;
color: #ceced5;
line-height: 18px;
text-shadow: 0 1px 0 #fff;
}
/* Alternate shading for lines */
li.L1, li.L3, li.L5, li.L7, li.L9 { }
docs/docs/likebutton/docs/assets/js/google-code-prettify/prettify.js
Executable
+28
View File
@@ -0,0 +1,28 @@
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
(function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a=
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m),
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/,
q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g,
"");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a),
a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e}
for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],
"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"],
H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],
J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css",
/^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),
["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes",
hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
!k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p<h.length?setTimeout(m,
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
docs/docs/likebutton/docs/assets/js/jquery.js
Vendored Executable
+9252
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/base-css.html
Executable
+1710
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/components.html
Executable
+1931
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/download.html
Executable
+454
View File
@@ -0,0 +1,454 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Download · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
</li>
<li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript plugins</a>
</li>
<li class="">
<a href="./less.html">Using LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="active">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Customize and download</h1>
<p class="lead"><a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#components">1. Choose components</a></li>
<li><a href="#plugins">2. Select jQuery plugins</a></li>
<li><a href="#variables">3. Customize variables</a></li>
<li><a href="#download">4. Download</a></li>
</ul>
</div>
</header>
<section class="download" id="components">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<h3>Scaffolding</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
<h3>Base CSS</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> Headings, body, etc</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> Code and pre</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> Labels and badges</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> Tables</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> Forms</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> Buttons</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> Icons</label>
</div><!-- /span -->
<div class="span3">
<h3>Components</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> Button groups and dropdowns</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> Navs, tabs, and pills</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> Navbar</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> Breadcrumbs</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> Pagination</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> Pager</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> Thumbnails</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> Alerts</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> Progress bars</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> Hero unit</label>
</div><!-- /span -->
<div class="span3">
<h3>JS Components</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> Tooltips</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> Popovers</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> Modals</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> Dropdowns</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> Collapse</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> Carousel</label>
</div><!-- /span -->
<div class="span3">
<h3>Miscellaneous</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> Wells</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> Close icon</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> Utilities</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> Component animations</label>
<h3>Responsive</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> Visible/hidden classes</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> Narrow tablets and below (<767px)</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> Tablets to desktops (767-979px)</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> Large desktops (>1200px)</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> Responsive navbar</label>
</div><!-- /span -->
</div><!-- /row -->
</section>
<section class="download" id="plugins">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Select jQuery plugins
<small>Quickly add only the necessary javascript</small>
</h1>
</div>
<div class="row download-builder">
<div class="span4">
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-transition.js">
Transitions <small>(required for any animation)</small>
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-modal.js">
Modals
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-dropdown.js">
Dropdowns
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
Scrollspy
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-tab.js">
Togglable tabs
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-tooltip.js">
Tooltips
</label>
</div><!-- /span -->
<div class="span4">
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-popover.js">
Popovers <small>(requires Tooltips)</small>
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-alert.js">
Alert messages
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-button.js">
Buttons
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-collapse.js">
Collapse
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-carousel.js">
Carousel
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-typeahead.js">
Typeahead
</label>
</div><!-- /span -->
<div class="span4">
<h4 class="muted">Heads up!</h4>
<p class="muted">All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
</div><!-- /span -->
</div><!-- /row -->
</section>
<section class="download" id="variables">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Reset to defaults</a>
<h1>
3. Customize variables
<small>Optionally modify Bootstrap without a compiler</small>
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<h3>Scaffolding</h3>
<label>@bodyBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@textColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<h3>Links</h3>
<label>@linkColor</label>
<input type="text" class="span3" placeholder="#08c">
<label>@linkColorHover</label>
<input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
<h3>Colors</h3>
<label>@blue</label>
<input type="text" class="span3" placeholder="#049cdb">
<label>@green</label>
<input type="text" class="span3" placeholder="#46a546">
<label>@red</label>
<input type="text" class="span3" placeholder="#9d261d">
<label>@yellow</label>
<input type="text" class="span3" placeholder="#ffc40d">
<label>@orange</label>
<input type="text" class="span3" placeholder="#f89406">
<label>@pink</label>
<input type="text" class="span3" placeholder="#c3325f">
<label>@purple</label>
<input type="text" class="span3" placeholder="#7a43b6">
<h3>Sprites</h3>
<label>@iconSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
<label>@iconWhiteSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
</div><!-- /span -->
<div class="span3">
<h3>Grid system</h3>
<label>@gridColumns</label>
<input type="text" class="span3" placeholder="12">
<label>@gridColumnWidth</label>
<input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label>
<input type="text" class="span3" placeholder="20px">
<h3>Fluid grid system</h3>
<label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%">
<h3>Typography</h3>
<label>@sansFontFamily</label>
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@serifFontFamily</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
<label>@monoFontFamily</label>
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
<label>@baseFontSize</label>
<input type="text" class="span3" placeholder="13px">
<label>@baseFontFamily</label>
<input type="text" class="span3" placeholder="@sansFontFamily">
<label>@baseLineHeight</label>
<input type="text" class="span3" placeholder="18px">
<label>@altFontFamily</label>
<input type="text" class="span3" placeholder="@serifFontFamily">
<label>@headingsFontFamily</label>
<input type="text" class="span3" placeholder="inherit">
<label>@headingsFontWeight</label>
<input type="text" class="span3" placeholder="bold">
<label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@heroUnitHeadingColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitLeadColor</label>
<input type="text" class="span3" placeholder="inherit">
</div><!-- /span -->
<div class="span3">
<h3>Tables</h3>
<label>@tableBackground</label>
<input type="text" class="span3" placeholder="transparent">
<label>@tableBackgroundAccent</label>
<input type="text" class="span3" placeholder="#f9f9f9">
<label>@tableBackgroundHover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@tableBorder</label>
<input type="text" class="span3" placeholder="#ddd">
<h3>Navbar</h3>
<label>@navbarHeight</label>
<input type="text" class="span3" placeholder="40px">
<label>@navbarBackground</label>
<input type="text" class="span3" placeholder="@grayDarker">
<label>@navbarBackgroundHighlight</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@navbarText</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@navbarBrandColor</label>
<input type="text" class="span3" placeholder="@navbarLinkColor">
<label>@navbarLinkColor</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@navbarLinkColorHover</label>
<input type="text" class="span3" placeholder="@white">
<label>@navbarLinkColorActive</label>
<input type="text" class="span3" placeholder="@navbarLinkColorHover">
<label>@navbarLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="transparent">
<label>@navbarLinkBackgroundActive</label>
<input type="text" class="span3" placeholder="@navbarBackground">
<label>@navbarSearchBackground</label>
<input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
<label>@navbarSearchBackgroundFocus</label>
<input type="text" class="span3" placeholder="@white">
<label>@navbarSearchBorder</label>
<input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
<h3>Dropdowns</h3>
<label>@dropdownBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownBorder</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
<label>@dropdownLinkColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@dropdownLinkColorHover</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@linkColor">
</div><!-- /span -->
<div class="span3">
<h3>Forms</h3>
<label>@placeholderText</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@inputBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@inputBorder</label>
<input type="text" class="span3" placeholder="#ccc">
<label>@inputBorderRadius</label>
<input type="text" class="span3" placeholder="3px">
<label>@inputDisabledBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@formActionsBackground</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@btnPrimaryBackground</label>
<input type="text" class="span3" placeholder="@linkColor">
<label>@btnPrimaryBackgroundHighlight</label>
<input type="text" class="span3" placeholder="darken(@white, 10%);">
<h3>Form states &amp; alerts</h3>
<label>@warningText</label>
<input type="text" class="span3" placeholder="#c09853">
<label>@warningBackground</label>
<input type="text" class="span3" placeholder="#fcf8e3">
<label>@errorText</label>
<input type="text" class="span3" placeholder="#b94a48">
<label>@errorBackground</label>
<input type="text" class="span3" placeholder="#f2dede">
<label>@successText</label>
<input type="text" class="span3" placeholder="#468847">
<label>@successBackground</label>
<input type="text" class="span3" placeholder="#dff0d8">
<label>@infoText</label>
<input type="text" class="span3" placeholder="#3a87ad">
<label>@infoBackground</label>
<input type="text" class="span3" placeholder="#d9edf7">
</div><!-- /span -->
</div><!-- /row -->
</section>
<section class="download" id="download">
<div class="page-header">
<h1>
4. Download
</h1>
</div>
<div class="download-btn">
<a class="btn btn-primary" href="#" >Customize and Download</a>
<h4>What's included?</h4>
<p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
</div>
</section><!-- /download -->
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
docs/docs/likebutton/docs/examples.html
Executable
+147
View File
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Examples · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
</li>
<li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript plugins</a>
</li>
<li class="">
<a href="./less.html">Using LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="active">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Bootstrap examples</h1>
<p class="lead">We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
</header>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a class="thumbnail" href="examples/hero.html">
<img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
</a>
<h3>Basic marketing site</h3>
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
</li>
<li class="span4">
<a class="thumbnail" href="examples/fluid.html">
<img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
</a>
<h3>Fluid layout</h3>
<p>Uses our new responsive, fluid grid system to create a seamless liquid layout.</p>
</li>
<li class="span4">
<a class="thumbnail" href="examples/starter-template.html">
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
</a>
<h3>Starter template</h3>
<p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
</li>
</ul>
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
docs/docs/likebutton/docs/examples/fluid.html
Executable
+162
View File
@@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profile</a></li>
<li class="divider"></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sidebar</li>
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="nav-header">Sidebar</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
</div><!--/row-->
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span-->
</div><!--/row-->
</div><!--/span-->
</div><!--/row-->
<hr>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
docs/docs/likebutton/docs/examples/hero.html
Executable
+109
View File
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>
<hr>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
docs/docs/likebutton/docs/examples/starter-template.html
Executable
+79
View File
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
docs/docs/likebutton/docs/index.html
Executable
+259
View File
@@ -0,0 +1,259 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
<a href="./index.html">Overview</a>
</li>
<li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript plugins</a>
</li>
<li class="">
<a href="./less.html">Using LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<h1>Bootstrap, from Twitter</h1>
<p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" >View project on GitHub</a>
<a href="assets/bootstrap.zip" class="btn btn-large" >Download Bootstrap <small>(v2.0.4)</small></a>
</p>
</div>
<div class="bs-links">
<ul class="quick-links">
<li><a href="./upgrading.html">Upgrading from 1.4</a></li>
<li><a href="https://github.com/twitter/bootstrap/zipball/master">Download with docs</a></li>
<li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
</ul>
<ul class="quick-links">
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</header>
<hr class="soften">
<div class="marketing">
<h1>Designed for everyone, everywhere.</h1>
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
<h2>Built for and by nerds</h2>
<p>Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>For all skill levels</h2>
<p>Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
<h2>Cross-everything</h2>
<p>Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>12-column grid</h2>
<p>Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
<h2>Responsive design</h2>
<p>With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>Styleguide docs</h2>
<p>Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
<h2>Growing library</h2>
<p>Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
<h2>Custom jQuery plugins</h2>
<p>What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/less-small.png">
<h2>Built on LESS</h2>
<p>Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-html5.png">
<h3>HTML5</h3>
<p>Built to support new HTML5 elements and syntax.</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-css3.png">
<h3>CSS3</h3>
<p>Progressively enhanced components for ultimate style.</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-github.png">
<h3>Open-source</h3>
<p>Built for and maintained by the community via <a href="https://github.com">GitHub</a>.</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-twitter.png">
<h3>Made at Twitter</h3>
<p>Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.</p>
</div>
</div><!--/row-->
<hr class="soften">
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.</p>
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
</ul>
</div><!-- /.marketing -->
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
docs/docs/likebutton/docs/javascript.html
Executable
+1520
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/less.html
Executable
+1060
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/scaffolding.html
Executable
+671
View File
@@ -0,0 +1,671 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scaffolding · Twitter Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Overview</a>
</li>
<li class="active">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">Javascript plugins</a>
</li>
<li class="">
<a href="./less.html">Using LESS</a>
</li>
<li class="divider-vertical"></li>
<li class="">
<a href="./download.html">Customize</a>
</li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
</div>
</header>
<!-- Global Bootstrap settings
================================================== -->
<section id="global">
<div class="page-header">
<h1>Global styles <small>for CSS reset, typography, and links</small></h1>
</div>
<div class="row">
<div class="span4">
<h2>Requires HTML5 doctype</h2>
<p>Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.</p>
<pre class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
...
&lt;/html&gt;
</pre>
</div><!-- /.span -->
<div class="span4">
<h2>Typography and links</h2>
<p>Within the <strong>scaffolding.less</strong> file, we set basic global display, typography, and link styles. Specifically, we:</p>
<ul>
<li>Remove margin on the body</li>
<li>Set <code>background-color: white;</code> on the <code>body</code></li>
<li>Use the <code>@baseFontFamily</code>, <code>@baseFontSize</code>, and <code>@baseLineHeight</code> attributes as our typographyic base</li>
<li>Set the global link color via <code>@linkColor</code> and apply link underlines only on <code>:hover</code></li>
</ul>
</div><!-- /.span -->
<div class="span4">
<h2>Reset via Normalize</h2>
<p>As of Bootstrap 2, the traditional CSS reset has evolved to make use of elements from <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>.</p>
<p>The new reset can still be found in <strong>reset.less</strong>, but with many elements removed for brevity and accuracy.</p>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Grid system
================================================== -->
<section id="gridSystem">
<div class="page-header">
<h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<p>The default grid system provided in Bootstrap utilizes <strong>12 columns</strong> that render out at widths of 724px, 940px (default without responsive CSS included), and 1170px. Below 767px viewports, the columns become fluid and stack vertically. </p>
</div><!-- /.span -->
<div class="span4">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
<div class="span4">
<p>As shown here, a basic layout can be created with two "columns", each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
</div><!-- /.span -->
</div><!-- /.row -->
<br>
<h2>Offsetting columns</h2>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span8 offset4">8 offset 4</div>
</div><!-- /row -->
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span4 offset4"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
<br>
<h2>Nesting columns</h2>
<div class="row">
<div class="span6">
<p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
<h3>Example</h3>
<p>Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested <code>.span3</code> columns should be placed within a <code>.span6</code>.</p>
<div class="row show-grid">
<div class="span6">
Level 1 of column
<div class="row show-grid">
<div class="span3">
Level 2
</div>
<div class="span3">
Level 2
</div>
</div>
</div>
</div>
</div><!-- /.span -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row"&gt;
&lt;div class="span6"&gt;
Level 1 column
&lt;div class="row"&gt;
&lt;div class="span3"&gt;Level 2&lt;/div&gt;
&lt;div class="span3"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Fluid grid system
================================================== -->
<section id="fluidGridSystem">
<div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div>
<h2>Fluid columns</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<div class="row">
<div class="span4">
<h3>Percents, not pixels</h3>
<p>The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
</div><!-- /.span -->
<div class="span4">
<h3>Fluid rows</h3>
<p>Make any row fluid simply by changing <code>.row</code> to <code>.row-fluid</code>. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.</p>
</div><!-- /.span -->
<div class="span4">
<h3>Markup</h3>
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span4"&gt;...&lt;/div&gt;
&lt;div class="span8"&gt;...&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
<h2>Fluid nesting</h2>
<div class="row">
<div class="span6">
<p>Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.</p>
<div class="row-fluid show-grid">
<div class="span12">
Fluid 12
<div class="row-fluid show-grid">
<div class="span6">
Fluid 6
</div>
<div class="span6">
Fluid 6
</div>
</div>
</div>
</div>
</div><!-- /.span -->
<div class="span6">
<pre class="prettyprint linenums">
&lt;div class="row-fluid"&gt;
&lt;div class="span12"&gt;
Level 1 of column
&lt;div class="row-fluid"&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;div class="span6"&gt;Level 2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Customizaton
================================================== -->
<section id="gridCustomization">
<div class="page-header">
<h1>Grid customization</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Variable</th>
<th>Default value</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>@gridColumns</code></td>
<td>12</td>
<td>Number of columns</td>
</tr>
<tr>
<td><code>@gridColumnWidth</code></td>
<td>60px</td>
<td>Width of each column</td>
</tr>
<tr>
<td><code>@gridGutterWidth</code></td>
<td>20px</td>
<td>Negative space between columns</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="span4">
<h3>Variables in LESS</h3>
<p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in variables.less.</p>
</div><!-- /.span -->
<div class="span4">
<h3>How to customize</h3>
<p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the <a href="less.html#compiling">four ways documented to recompile</a>. If you're adding more columns, be sure to add the CSS for those in grid.less.</p>
</div><!-- /.span -->
<div class="span4">
<h3>Staying responsive</h3>
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Layouts (Default and fluid)
================================================== -->
<section id="layouts">
<div class="page-header">
<h1>Layouts <small>Basic templates to create webpages</small></h1>
</div>
<div class="row">
<div class="span6">
<h2>Fixed layout</h2>
<p>The default and simple 940px-wide, centered layout for just about any website or page provided by a single <code>&lt;div class="container"&gt;</code>.</p>
<div class="mini-layout">
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;body&gt;
&lt;div class="container"&gt;
...
&lt;/div&gt;
&lt;/body&gt;
</pre>
</div><!-- /.span -->
<div class="span6">
<h2>Fluid layout</h2>
<p><code>&lt;div class="container-fluid"&gt;</code> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.</p>
<div class="mini-layout fluid">
<div class="mini-layout-sidebar"></div>
<div class="mini-layout-body"></div>
</div>
<pre class="prettyprint linenums">
&lt;div class="container-fluid"&gt;
&lt;div class="row-fluid"&gt;
&lt;div class="span2"&gt;
&lt;!--Sidebar content--&gt;
&lt;/div&gt;
&lt;div class="span10"&gt;
&lt;!--Body content--&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Responsive design
================================================== -->
<section id="responsive">
<div class="page-header">
<h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
</div>
<!-- Supported devices -->
<div class="row">
<div class="span4">
<p><img src="assets/img/responsive-illustrations.png" alt="Responsive devices"></p>
<h3>What they do</h3>
<p>Media queries allow for custom CSS based on a number of conditions&mdash;ratios, widths, display type, etc&mdash;but usually focuses around <code>min-width</code> and <code>max-width</code>.</p>
<ul>
<li>Modify the width of column in our grid</li>
<li>Stack elements instead of float wherever necessary</li>
<li>Resize headings and text to be more appropriate for devices</li>
</ul>
<p>Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.</p>
</div><!-- /.span -->
<div class="span8">
<h2>Supported devices</h2>
<p>Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Label</th>
<th>Layout width</th>
<th>Column width</th>
<th>Gutter width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smartphones</td>
<td>480px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Smartphones to tablets</td>
<td>767px and below</td>
<td class="muted" colspan="2">Fluid columns, no fixed widths</td>
</tr>
<tr>
<td>Portrait tablets</td>
<td>768px and above</td>
<td>42px</td>
<td>20px</td>
</tr>
<tr>
<td>Default</td>
<td>980px and up</td>
<td>60px</td>
<td>20px</td>
</tr>
<tr>
<td>Large display</td>
<td>1200px and up</td>
<td>70px</td>
<td>30px</td>
</tr>
</tbody>
</table>
<h3>Requires meta tag</h3>
<p>To ensure devices display responsive pages properly, include the viewport meta tag.</p>
<pre class="prettyprint linenums">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
</div><!-- /.span -->
</div><!-- /.row -->
<br>
<!-- Media query code -->
<h2>Using the media queries</h2>
<div class="row">
<div class="span4">
<p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
<ol>
<li>Use the compiled responsive version, bootstrap-responsive.css</li>
<li>Add @import "responsive.less" and recompile Bootstrap</li>
<li>Modify and recompile responsive.less as a separate file</li>
</ol>
<p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
</div><!-- /.span -->
<div class="span8">
<pre class="prettyprint linenums">
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }
</pre>
</div><!-- /.span -->
</div><!-- /.row -->
<br>
<!-- Responsive utility classes -->
<h2>Responsive utility classes</h2>
<div class="row">
<div class="span4">
<h3>What are they</h2>
<p>For faster mobile-friendly development, use these basic utility classes for showing and hiding content by device.</p>
<h3>When to use</h2>
<p>Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.</p>
<p>For example, you might show a <code>&lt;select&gt;</code> element for nav on mobile layouts, but not on tablets or desktops.</p>
</div><!-- /.span -->
<div class="span8">
<h3>Support classes</h3>
<p>Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in <code>responsive.less</code>.</p>
<table class="table table-bordered table-striped responsive-utilities">
<thead>
<tr>
<th>Class</th>
<th>Phones <small>480px and below</small></th>
<th>Tablets <small>767px and below</small></th>
<th>Desktops <small>768px and above</small></th>
</tr>
</thead>
<tbody>
<tr>
<th><code>.visible-phone</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-tablet</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
<tr>
<th><code>.visible-desktop</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-phone</code></th>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-tablet</code></th>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
<td class="is-visible">Visible</td>
</tr>
<tr>
<th><code>.hidden-desktop</code></th>
<td class="is-visible">Visible</td>
<td class="is-visible">Visible</td>
<td class="is-hidden">Hidden</td>
</tr>
</tbody>
</table>
<h3>Test case</h3>
<p>Resize your browser or load on different devices to test the above classes.</p>
<h4>Visible on...</h4>
<p>Green checkmarks indicate that class is visible in your current viewport.</p>
<ul class="responsive-utilities-test">
<li>Phone<span class="visible-phone">&#10004; Phone</span></li>
<li>Tablet<span class="visible-tablet">&#10004; Tablet</span></li>
<li>Desktop<span class="visible-desktop">&#10004; Desktop</span></li>
</ul>
<h4>Hidden on...</h4>
<p>Here, green checkmarks indicate that class is hidden in your current viewport.</p>
<ul class="responsive-utilities-test hidden-on">
<li>Phone<span class="hidden-phone">&#10004; Phone</span></li>
<li>Tablet<span class="hidden-tablet">&#10004; Tablet</span></li>
<li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
</ul>
</div><!-- /.span -->
</div><!-- /.row -->
<div class="row">
<div class="span4">
</div><!-- /.span -->
</div><!-- /.row -->
</section>
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
</body>
</html>
docs/docs/likebutton/docs/templates/layout.mustache
Vendored Executable
+146
View File
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
{{#production}}
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{{/production}}
</head>
<body data-spy="scroll" data-target=".subnav" data-offset="50">
<!-- Navbar
================================================== -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="{{index}}">
<a href="./index.html">{{_i}}Overview{{/i}}</a>
</li>
<li class="{{scaffolding}}">
<a href="./scaffolding.html">{{_i}}Scaffolding{{/i}}</a>
</li>
<li class="{{base-css}}">
<a href="./base-css.html">{{_i}}Base CSS{{/i}}</a>
</li>
<li class="{{components}}">
<a href="./components.html">{{_i}}Components{{/i}}</a>
</li>
<li class="{{javascript}}">
<a href="./javascript.html">{{_i}}Javascript plugins{{/i}}</a>
</li>
<li class="{{less}}">
<a href="./less.html">{{_i}}Using LESS{{/i}}</a>
</li>
<li class="divider-vertical"></li>
<li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a>
</li>
<li class="{{examples}}">
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
{{>body}}
<!-- Footer
================================================== -->
<footer class="footer">
<p class="pull-right"><a href="#">{{_i}}Back to top{{/i}}</a></p>
<p>{{_i}}Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.{{/i}}</p>
<p>{{_i}}Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
<p>{{_i}}Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.{{/i}}</p>
</footer>
</div><!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/application.js"></script>
{{#production}}
<!-- Analytics
================================================== -->
<script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
{{/production}}
</body>
</html>
docs/docs/likebutton/docs/templates/pages/base-css.mustache
Vendored Executable
+1594
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/templates/pages/components.mustache
Vendored Executable
+1815
View File
File diff suppressed because it is too large Load Diff
docs/docs/likebutton/docs/templates/pages/download.mustache
Vendored Executable
+338
View File
@@ -0,0 +1,338 @@
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Customize and download{{/i}}</h1>
<p class="lead">{{_i}}<a href="https://github.com/twitter/bootstrap/zipball/master">Download the full repository</a> or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.{{/i}}</p>
<div class="subnav">
<ul class="nav nav-pills">
<li><a href="#components">{{_i}}1. Choose components{{/i}}</a></li>
<li><a href="#plugins">{{_i}}2. Select jQuery plugins{{/i}}</a></li>
<li><a href="#variables">{{_i}}3. Customize variables{{/i}}</a></li>
<li><a href="#download">{{_i}}4. Download{{/i}}</a></li>
</ul>
</div>
</header>
<section class="download" id="components">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
<h1>
{{_i}}1. Choose components{{/i}}
<small>{{_i}}Get just the CSS you need{{/i}}</small>
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<h3>{{_i}}Scaffolding{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> {{_i}}Normalize and reset{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> {{_i}}Body type and links{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> {{_i}}Grid system{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> {{_i}}Layouts{{/i}}</label>
<h3>{{_i}}Base CSS{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="type.less"> {{_i}}Headings, body, etc{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="code.less"> {{_i}}Code and pre{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="labels-badges.less"> {{_i}}Labels and badges{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="tables.less"> {{_i}}Tables{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="forms.less"> {{_i}}Forms{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="buttons.less"> {{_i}}Buttons{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="sprites.less"> {{_i}}Icons{{/i}}</label>
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}Components{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="button-groups.less"> {{_i}}Button groups and dropdowns{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="navs.less"> {{_i}}Navs, tabs, and pills{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="navbar.less"> {{_i}}Navbar{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="breadcrumbs.less"> {{_i}}Breadcrumbs{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="pagination.less"> {{_i}}Pagination{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="pager.less"> {{_i}}Pager{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="thumbnails.less"> {{_i}}Thumbnails{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="alerts.less"> {{_i}}Alerts{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="progress-bars.less"> {{_i}}Progress bars{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="hero-unit.less"> {{_i}}Hero unit{{/i}}</label>
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}JS Components{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="tooltip.less"> {{_i}}Tooltips{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="popovers.less"> {{_i}}Popovers{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="modals.less"> {{_i}}Modals{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="dropdowns.less"> {{_i}}Dropdowns{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="accordion.less"> {{_i}}Collapse{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="carousel.less"> {{_i}}Carousel{{/i}}</label>
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}Miscellaneous{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="wells.less"> {{_i}}Wells{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="close.less"> {{_i}}Close icon{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="utilities.less"> {{_i}}Utilities{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="component-animations.less"> {{_i}}Component animations{{/i}}</label>
<h3>{{_i}}Responsive{{/i}}</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-utilities.less"> {{_i}}Visible/hidden classes{{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-767px-max.less"> {{_i}}Narrow tablets and below (<767px){{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-768px-979px.less"> {{_i}}Tablets to desktops (767-979px){{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-1200px-min.less"> {{_i}}Large desktops (>1200px){{/i}}</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="responsive-navbar.less"> {{_i}}Responsive navbar{{/i}}</label>
</div><!-- /span -->
</div><!-- /row -->
</section>
<section class="download" id="plugins">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Toggle all{{/i}}</a>
<h1>
{{_i}}2. Select jQuery plugins{{/i}}
<small>{{_i}}Quickly add only the necessary javascript{{/i}}</small>
</h1>
</div>
<div class="row download-builder">
<div class="span4">
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-transition.js">
{{_i}}Transitions <small>(required for any animation)</small>{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-modal.js">
{{_i}}Modals{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-dropdown.js">
{{_i}}Dropdowns{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-scrollspy.js">
{{_i}}Scrollspy{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-tab.js">
{{_i}}Togglable tabs{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-tooltip.js">
{{_i}}Tooltips{{/i}}
</label>
</div><!-- /span -->
<div class="span4">
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-popover.js">
{{_i}}Popovers <small>(requires Tooltips)</small>{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-alert.js">
{{_i}}Alert messages{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-button.js">
{{_i}}Buttons{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-collapse.js">
{{_i}}Collapse{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-carousel.js">
{{_i}}Carousel{{/i}}
</label>
<label class="checkbox">
<input type="checkbox" checked="true" value="bootstrap-typeahead.js">
{{_i}}Typeahead{{/i}}
</label>
</div><!-- /span -->
<div class="span4">
<h4 class="muted">{{_i}}Heads up!{{/i}}</h4>
<p class="muted">{{_i}}All checked plugins will be compiled into a single file, bootstrap.js. All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.{{/i}}</p>
</div><!-- /span -->
</div><!-- /row -->
</section>
<section class="download" id="variables">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">{{_i}}Reset to defaults{{/i}}</a>
<h1>
{{_i}}3. Customize variables{{/i}}
<small>{{_i}}Optionally modify Bootstrap without a compiler{{/i}}</small>
</h1>
</div>
<div class="row download-builder">
<div class="span3">
<h3>{{_i}}Scaffolding{{/i}}</h3>
<label>@bodyBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@textColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<h3>{{_i}}Links{{/i}}</h3>
<label>@linkColor</label>
<input type="text" class="span3" placeholder="#08c">
<label>@linkColorHover</label>
<input type="text" class="span3" placeholder="darken(@linkColor, 15%)">
<h3>{{_i}}Colors{{/i}}</h3>
<label>@blue</label>
<input type="text" class="span3" placeholder="#049cdb">
<label>@green</label>
<input type="text" class="span3" placeholder="#46a546">
<label>@red</label>
<input type="text" class="span3" placeholder="#9d261d">
<label>@yellow</label>
<input type="text" class="span3" placeholder="#ffc40d">
<label>@orange</label>
<input type="text" class="span3" placeholder="#f89406">
<label>@pink</label>
<input type="text" class="span3" placeholder="#c3325f">
<label>@purple</label>
<input type="text" class="span3" placeholder="#7a43b6">
<h3>{{_i}}Sprites{{/i}}</h3>
<label>@iconSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings.png'">
<label>@iconWhiteSpritePath</label>
<input type="text" class="span3" placeholder="'../img/glyphicons-halflings-white.png'">
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}Grid system{{/i}}</h3>
<label>@gridColumns</label>
<input type="text" class="span3" placeholder="12">
<label>@gridColumnWidth</label>
<input type="text" class="span3" placeholder="60px">
<label>@gridGutterWidth</label>
<input type="text" class="span3" placeholder="20px">
<h3>{{_i}}Fluid grid system{{/i}}</h3>
<label>@fluidGridColumnWidth</label>
<input type="text" class="span3" placeholder="6.382978723%">
<label>@fluidGridGutterWidth</label>
<input type="text" class="span3" placeholder="2.127659574%">
<h3>{{_i}}Typography{{/i}}</h3>
<label>@sansFontFamily</label>
<input type="text" class="span3" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
<label>@serifFontFamily</label>
<input type="text" class="span3" placeholder="Georgia, 'Times New Roman', Times, serif">
<label>@monoFontFamily</label>
<input type="text" class="span3" placeholder="Menlo, Monaco, 'Courier New', monospace">
<label>@baseFontSize</label>
<input type="text" class="span3" placeholder="13px">
<label>@baseFontFamily</label>
<input type="text" class="span3" placeholder="@sansFontFamily">
<label>@baseLineHeight</label>
<input type="text" class="span3" placeholder="18px">
<label>@altFontFamily</label>
<input type="text" class="span3" placeholder="@serifFontFamily">
<label>@headingsFontFamily</label>
<input type="text" class="span3" placeholder="inherit">
<label>@headingsFontWeight</label>
<input type="text" class="span3" placeholder="bold">
<label>@headingsColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@heroUnitHeadingColor</label>
<input type="text" class="span3" placeholder="inherit">
<label>@heroUnitLeadColor</label>
<input type="text" class="span3" placeholder="inherit">
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}Tables{{/i}}</h3>
<label>@tableBackground</label>
<input type="text" class="span3" placeholder="transparent">
<label>@tableBackgroundAccent</label>
<input type="text" class="span3" placeholder="#f9f9f9">
<label>@tableBackgroundHover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@tableBorder</label>
<input type="text" class="span3" placeholder="#ddd">
<h3>{{_i}}Navbar{{/i}}</h3>
<label>@navbarHeight</label>
<input type="text" class="span3" placeholder="40px">
<label>@navbarBackground</label>
<input type="text" class="span3" placeholder="@grayDarker">
<label>@navbarBackgroundHighlight</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@navbarText</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@navbarBrandColor</label>
<input type="text" class="span3" placeholder="@navbarLinkColor">
<label>@navbarLinkColor</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@navbarLinkColorHover</label>
<input type="text" class="span3" placeholder="@white">
<label>@navbarLinkColorActive</label>
<input type="text" class="span3" placeholder="@navbarLinkColorHover">
<label>@navbarLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="transparent">
<label>@navbarLinkBackgroundActive</label>
<input type="text" class="span3" placeholder="@navbarBackground">
<label>@navbarSearchBackground</label>
<input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
<label>@navbarSearchBackgroundFocus</label>
<input type="text" class="span3" placeholder="@white">
<label>@navbarSearchBorder</label>
<input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
<label>@navbarSearchPlaceholderColor</label>
<input type="text" class="span3" placeholder="#ccc">
<h3>{{_i}}Dropdowns{{/i}}</h3>
<label>@dropdownBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownBorder</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
<label>@dropdownLinkColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@dropdownLinkColorHover</label>
<input type="text" class="span3" placeholder="@white">
<label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@linkColor">
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}Forms{{/i}}</h3>
<label>@placeholderText</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@inputBackground</label>
<input type="text" class="span3" placeholder="@white">
<label>@inputBorder</label>
<input type="text" class="span3" placeholder="#ccc">
<label>@inputBorderRadius</label>
<input type="text" class="span3" placeholder="3px">
<label>@inputDisabledBackground</label>
<input type="text" class="span3" placeholder="@grayLighter">
<label>@formActionsBackground</label>
<input type="text" class="span3" placeholder="#f5f5f5">
<label>@btnPrimaryBackground</label>
<input type="text" class="span3" placeholder="@linkColor">
<label>@btnPrimaryBackgroundHighlight</label>
<input type="text" class="span3" placeholder="darken(@white, 10%);">
<h3>{{_i}}Form states &amp; alerts{{/i}}</h3>
<label>@warningText</label>
<input type="text" class="span3" placeholder="#c09853">
<label>@warningBackground</label>
<input type="text" class="span3" placeholder="#fcf8e3">
<label>@errorText</label>
<input type="text" class="span3" placeholder="#b94a48">
<label>@errorBackground</label>
<input type="text" class="span3" placeholder="#f2dede">
<label>@successText</label>
<input type="text" class="span3" placeholder="#468847">
<label>@successBackground</label>
<input type="text" class="span3" placeholder="#dff0d8">
<label>@infoText</label>
<input type="text" class="span3" placeholder="#3a87ad">
<label>@infoBackground</label>
<input type="text" class="span3" placeholder="#d9edf7">
</div><!-- /span -->
</div><!-- /row -->
</section>
<section class="download" id="download">
<div class="page-header">
<h1>
{{_i}}4. Download{{/i}}
</h1>
</div>
<div class="download-btn">
<a class="btn btn-primary" href="#" {{#production}}onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);"{{/production}}>Customize and Download</a>
<h4>{{_i}}What's included?{{/i}}</h4>
<p>{{_i}}Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.{{/i}}</p>
</div>
</section><!-- /download -->
docs/docs/likebutton/docs/templates/pages/examples.mustache
Vendored Executable
+31
View File
@@ -0,0 +1,31 @@
<!-- Masthead
================================================== -->
<header class="jumbotron subhead" id="overview">
<h1>{{_i}}Bootstrap examples{{/i}}</h1>
<p class="lead">{{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
</header>
<ul class="thumbnails bootstrap-examples">
<li class="span4">
<a class="thumbnail" href="examples/hero.html">
<img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
</a>
<h3>{{_i}}Basic marketing site{{/i}}</h3>
<p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
</li>
<li class="span4">
<a class="thumbnail" href="examples/fluid.html">
<img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
</a>
<h3>{{_i}}Fluid layout{{/i}}</h3>
<p>{{_i}}Uses our new responsive, fluid grid system to create a seamless liquid layout.{{/i}}</p>
</li>
<li class="span4">
<a class="thumbnail" href="examples/starter-template.html">
<img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
</a>
<h3>{{_i}}Starter template{{/i}}</h3>
<p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
</li>
</ul>
docs/docs/likebutton/docs/templates/pages/index.mustache
Vendored Executable
+144
View File
@@ -0,0 +1,144 @@
<!-- Masthead
================================================== -->
<header class="jumbotron masthead">
<div class="inner">
<h1>{{_i}}Bootstrap, from Twitter{{/i}}</h1>
<p>{{_i}}Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.{{/i}}</p>
<p class="download-info">
<a href="https://github.com/twitter/bootstrap/" class="btn btn-primary btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'GitHub Project', 'View project on GitHub']);"{{/production}}>{{_i}}View project on GitHub{{/i}}</a>
<a href="assets/bootstrap.zip" class="btn btn-large" {{#production}}onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 2.0.4']);"{{/production}}>{{_i}}Download Bootstrap <small>(v2.0.4)</small>{{/i}}</a>
</p>
</div>
<div class="bs-links">
<ul class="quick-links">
<li><a href="./upgrading.html">{{_i}}Upgrading from 1.4{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/zipball/master">{{_i}}Download with docs{{/i}}</a></li>
<li><a href="http://blog.getbootstrap.com">{{_i}}Read the blog{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/issues?state=open">{{_i}}Submit issues{{/i}}</a></li>
<li><a href="https://github.com/twitter/bootstrap/wiki">{{_i}}Roadmap and changelog{{/i}}</a></li>
</ul>
<ul class="quick-links">
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="112px" height="20px"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://markdotto.github.com/github-buttons/github-btn.html?user=twitter&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="98px" height="20px"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">{{_i}}Follow @twbootstrap{{/i}}</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twitter.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
</li>
</ul>
</div>
</header>
<hr class="soften">
<div class="marketing">
<h1>{{_i}}Designed for everyone, everywhere.{{/i}}</h1>
<p class="marketing-byline">{{_i}}Need reasons to love Bootstrap? Look no further.{{/i}}</p>
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_042_group.png">
<h2>{{_i}}Built for and by nerds{{/i}}</h2>
<p>{{_i}}Like you, we love building awesome products on the web. We love it so much, we decided to help people just like us do it easier, better, and faster. Bootstrap is built for you.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_079_podium.png">
<h2>{{_i}}For all skill levels{{/i}}</h2>
<p>{{_i}}Bootstrap is designed to help people of all skill levels&mdash;designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_163_iphone.png">
<h2>{{_i}}Cross-everything{{/i}}</h2>
<p>{{_i}}Originally built with only modern browsers in mind, Bootstrap has evolved to include support for all major browsers (even IE7!) and, with Bootstrap 2, tablets and smartphones, too.{{/i}}</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_155_show_thumbnails.png">
<h2>{{_i}}12-column grid{{/i}}</h2>
<p>{{_i}}Grid systems aren't everything, but having a durable and flexible one at the core of your work can make development much simpler. Use our built-in grid classes or roll your own.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_214_resize_small.png">
<h2>{{_i}}Responsive design{{/i}}</h2>
<p>{{_i}}With Bootstrap 2, we've gone fully responsive. Our components are scaled according to a range of resolutions and devices to provide a consistent experience, no matter what.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_266_book_open.png">
<h2>{{_i}}Styleguide docs{{/i}}</h2>
<p>{{_i}}Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only our features, but best practices and living, coded examples.{{/i}}</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_082_roundabout.png">
<h2>{{_i}}Growing library{{/i}}</h2>
<p>{{_i}}Despite being only 10kb (gzipped), Bootstrap is one of the most complete front-end toolkits out there with dozens of fully functional components ready to be put to use.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/glyphicons/glyphicons_009_magic.png">
<h2>{{_i}}Custom jQuery plugins{{/i}}</h2>
<p>{{_i}}What good is an awesome design component without easy-to-use, proper, and extensible interactions? With Bootstrap, you get custom-built jQuery plugins to bring your projects to life.{{/i}}</p>
</div>
<div class="span4">
<img class="bs-icon" src="assets/img/less-small.png">
<h2>{{_i}}Built on LESS{{/i}}</h2>
<p>{{_i}}Where vanilla CSS falters, LESS excels. Variables, nesting, operations, and mixins in LESS makes coding CSS faster and more efficient with minimal overhead.{{/i}}</p>
</div>
</div><!--/row-->
<div class="row">
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-html5.png">
<h3>HTML5</h3>
<p>{{_i}}Built to support new HTML5 elements and syntax.{{/i}}</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-css3.png">
<h3>CSS3</h3>
<p>{{_i}}Progressively enhanced components for ultimate style.{{/i}}</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-github.png">
<h3>{{_i}}Open-source{{/i}}</h3>
<p>{{_i}}Built for and maintained by the community via <a href="https://github.com">GitHub</a>.{{/i}}</p>
</div>
<div class="span3">
<img class="small-bs-icon" src="assets/img/icon-twitter.png">
<h3>{{_i}}Made at Twitter{{/i}}</h3>
<p>{{_i}}Brought to you by an experienced <a href="http://twitter.com/fat">engineer</a> and <a href="http://twitter.com/mdo">designer</a>.{{/i}}</p>
</div>
</div><!--/row-->
<hr class="soften">
<h1>{{_i}}Built with Bootstrap.{{/i}}</h1>
<p class="marketing-byline">{{_i}}For even more sites built with Bootstrap, <a href="http://builtwithbootstrap.tumblr.com/" target="_blank">visit the unofficial Tumblr</a> or <a href="./examples.html">browse the examples</a>.{{/i}}</p>
<ul class="thumbnails example-sites">
<li class="span3">
<a class="thumbnail" href="http://soundready.fm/" target="_blank">
<img src="assets/img/example-sites/soundready.png" alt="SoundReady.fm">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://kippt.com/" target="_blank">
<img src="assets/img/example-sites/kippt.png" alt="Kippt">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.fleetio.com/" target="_blank">
<img src="assets/img/example-sites/fleetio.png" alt="Fleetio">
</a>
</li>
<li class="span3">
<a class="thumbnail" href="http://www.jshint.com/" target="_blank">
<img src="assets/img/example-sites/jshint.png" alt="JS Hint">
</a>
</li>
</ul>
</div><!-- /.marketing -->

Some files were not shown because too many files have changed in this diff Show More