This repository uses the largefiles extension.

Please enable it in your Mercurial config file.

pull받으려는 소스들이 largefiles들을 사용한다는 의미.

Files > Settings 

It’s September! Which means fall is here, the pumpkin spice lattes are flowing, and the end of 2014 is in sight. We can now begin to look at the web design trends of 2014 (so far) and make some predictions as to what will have staying power in 2015. At least that’s what I plan to attempt in today’s post. And of course, since Elegant Themes exists at the intersection of web design and WordPress, I’ll be talking throughout about how these trends have and will impact the WordPress Community–from existing WordPress themes and plugins to the new opportunities these trends will provide. Let’s get into it!

1. Responsive or Go Home

Ok, so maybe you don’t have to go home. Maybe you have a really good reason for not using responsive design? I just doubt it. Over the last few years responsive design has solidified itself as the new standard for web design in general and WordPress themes in particular. Sure, there are still arguments over implementation, but no one is saying, “let’s get rid of responsive design” and in fact more and more sites are opting to go in that direction. That was certainly the case in 2014 and I wouldn’t look for it to go anywhere in 2015. This one has ceased to be a trend and can now be considered the new norm.

2. Ghost Buttons

Ghost buttons are a prominent design feature in Divi–the flagship theme here at Elegant Themes–and it’s easy to see why. They’re minimal, stylish, and with the subtle hover animation they’re a delight to use. Look for this trend to continue into 2015; especially considering how well they pair with the large background images and videos we’ll talk about in #4.

3. Bigger Emphasis on Typography

Image via Paul Rand

Traditionally web type-kits that allowed for beautiful fonts and typefaces to be used on websites have been expensive. Meaning that sites leaning heavily on typographic design tended to require larger budgets–leaving the small guys (and most WordPress users) out of the fun. That however, is changing. Type kits are becoming more affordable (or free in the case of Google Fonts) and that means there is more freedom for designers working with a smaller budget to bring their typography skills to the web design table. Additionally, this allows WordPress theme designers to include more typographic flexibility in their themes, making stylish type-centric design attainable for anyone with a well designed WordPress theme.

4. Large, Beautiful Background Images & Videos

Another staple of Divi which has been and will continue to be a big hit are the large, beautiful background images and videos. One of the simplest ways to make your site stand out is by having great content displayed prominently. This trend is a wonderful way to accomplish that and when folded into a larger design style/philosophy it doesn’t feel gimmicky but powerful and elegant.

5. Scrolling Over Clicking

As the mobile web continues to grow and web design continues to skew in the direction of a more effective and enjoyable mobile experience, scrolling will continue to dominate clicking. It’s more intuitive, easier to do, cuts down on load times and allows for more dynamic interaction to take place between the user and the website.

6. Card Design Will Continue (Get Better)

Image via Pinterest

“Card” design, while not new, has proven to be a great tool for designers working on responsive websites. Cards are a great way to keep things modular, rearrange columns without things getting sloppy or disorganized, to browse a lot of general data, but also to prompt users to drill down and see more. In short, cards are clean and simple with a lot of versatility. Exactly what the web needs. So expect to see more of it in the remainder of 2014 and throughout 2015.

7. Flat Design is Growing Up (or, The Rise of Material Design?)

Image via Google Design

Flat design has achieved a lot of momentum over the last year or two and it appears to have staying power into 2015. However, it might be possible that as a concept, flat design is growing up. Perhaps into material design.  So, what is material design?

Material design is something Google unveiled this year as their new direction for mobile (and design in general). “Material,” to quote their brief, “is the metaphor. A material metaphor is the unifying theory of rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.”

Outside of marketing speak (and including the observation that they’ve settled on something that might otherwise be called “almost flat design”) we can see that what the designers at Google mean when they say Material Design is a mostly flat design that uses very subtle gradients, layering, and animation to retain a sense of the tangible world (physical space and objects) while still achieving all the advantages of flat design. Some may disagree but personally, I think this is where flat design as a whole is headed and I look forward to seeing more companies and individuals adopt it in the remainder of 2014 and beyond.

8. Microinteractions

Microinteractions are a good trend to talk about after material design. What are microinteractions? They are contained experiences or moments within a product (or perhaps a module on a website) that revolve around a single use case. One example of this is the email signup box that pops up on this website. It sort of wiggles back and forth on the screen, giving a playful personality to an otherwise static graphic.  This microinteraction promotes an increase in user engagement; which in this particular case means more email signups. I’d look for this theory to further permeate web design in the coming years. I’d love to see more WordPress theme and plugin developers begin to think in this vein. In particular, I’d like to see plugins that don’t just add new features to a WordPress website but add new experiences.

9. Interactive Storytelling

Image via The Guardian

What do you get when you put all of that together? Something I’ve written about extensively here at Elegant Themes: a better platform for telling compelling stories and narratives. Now of course I do not mean that every web page has to tell a fairy tale, yarn or other bit of fiction. That’s not what I mean when I say story or narrative. What I mean is that your brand is made up of a series of concepts or values (elegance, creativity, simplicity, etc.) and everything from your page layout to your font choice to your web copy and microinteractive page elements are narrative tools with which you can tell stories that embody those concepts and values by showing them in action. A perfect example of this is the Tesla website, which I talk about below.

10. Personalized UX

Image via Netflix

The idea of using cookies to help you display more relevant content to repeat visitors is nothing new. However, just as certain spammy practices (such as the popup) have made a classier return with better design and best practices in place, so too can the technique of using cookies to display certain content to repeat visitors be used for more than spam and shameless upselling. Netflix uses it to remember what you’ve recently watched. So does YouTube. Would it be so odd for a large editorial site to create a “recently read” sidebar widget for quick access to articles you may have enjoyed and/or commented on? Or perhaps hiding recently viewed content in order to highlight new posts/pages? I don’t think so and I think we’ll see more tasteful uses of this technique in the months to come. I’d also love to see that happening more in the WordPress community via plugins.

A Few Fantastic Examples

Sometimes reading about all these design concepts can make it hard to imagine them working together seamlessly “in the wild”. To help remedy that I’ve put together a short list of three examples that collectively embody all of the web design trends I’ve mentioned in this post.

1. Apple

You don’t have to be an Apple fan boy to appreciate good web design. Something that Apple has always accomplished with their trademark simplicity, and yet, continue to manage to squeeze in a remarkable number of current and future design trends. If you’re looking to learn but not mimic them, I think the thing to keep in mind is not that you have to create a site exactly like theirs but rather copy their insistency on subtlety to avoid making a trend come off as gimmick.

Visit Site

2. Tesla

One of my favorite websites right now, not just because I also love their products, is Tesla’s website. They combine all of my favorite trends into one fluid experience. I especially love their Go Electric page which uses large images, long scrolling, embedded infographics and interactive storytelling to explain their top five FAQ’s. It’s a brilliant bit of design chock full of delightful microinteractions that turns a traditionally boring part of most websites into a jaw-dropping showcase.

Visit Site

3. Divi

Finally, we have an example that is not to be drooled over and dreamed of as hopelessly out of reach, but something that we can get our hands on and work with. Divi is without a doubt the best WordPress theme for the average user with limited (or zero) coding ability to achieve all of the trends covered in this article on their very own WordPress website. It’s possibly one of the most empowering WordPress themes I’ve ever come across. The drag-and-drop page builder takes advantage of interactive modules to help you create beautiful and effective pages of any length. And of course, thanks to its responsive design, that look and work beautifully on any device.

View  Theme

In Conclusion

The the dominant trends of 2014 look as if they will carry on into 2015, with a few of them maturing (perhaps in the way responsive went from a possible solution to a design problem, to a trend, to a new standard). In this case I’m speaking particularly about material design and microinteractions. The latter of which is the reason I didn’t include parallax in this post, as I would consider it a type of microinteraction that may or may not fade out in the next year but whose underlying concept will undoubtedly remain and mature.

As for what all this means for the WordPress community, I would think that we will see more themes follow the lead of Divi in creating more seamless ways for non-coding users to take advantage of these design trends. I also believe that as certain microinteractions become more popular in situations that have traditionally required custom development, the community will provide turn-key solutions via plugins; like they have with various popup form plugins.

Most of all, I think the future of these trends will be decided by how far we push them in the months to come. Where will we find limitations that require refinement or perhaps going in a new direction altogether? I know I’m looking forward to watching it all unfold.

If, however, you already have some ideas or thoughts on where things are headed in 2015 or my take on the design trends in this post, please feel free to leave them in the comments below!

Article thumbnail image by Sergey Korkin / shutterstock.com

http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015

http://cimple.postype.com/post/746/2015-%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8A%B8%EB%A0%8C%EB%93%9C%E2%80%94web-design-trend-in-2015

제어판 - 프로그램 및 기능 - Windows 기능 사용/사용 안함 - 인터넷 정보 서비스 - World Wide Web 서비스 - 응용 프로그램 개발 기능 체크

http://lesscss.org/

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

$ npm install -g less

$ lessc styles.less

$ lessc styles.less > styles.css

var less = require('less');

less.render('.class { width: (1 + 1) }', function (e, css) {
  console.log(css);
});

.class {
  width: 2;
}

var parser = new(less.Parser);

parser.parse('.class { width: (1 + 1) }', function (err, tree) {
  if (err) {
    return console.error(err)
  }
  console.log(tree.toCSS());
});

var parser = new(less.Parser)({
  paths: ['.', './lib'], // Specify search paths for @import directives
  filename: 'style.less' // Specify a filename, for better error messages
});

parser.parse('.class { width: (1 + 1) }', function (e, tree) {
  tree.toCSS({
    // Minify CSS output
    compress: true
  });
});

java -jar js.jar -f less-rhino-<version>.js lessc-rhino-<version>.js styles.less styles.css

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

<!-- set options before less.js script -->
<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

bower install less

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

Compiling CSS and JavaScript

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

bootstrap은 프레임워크 동작의 편리를 위해 Grunt 의 빌드시스템을 사용한다. 아래는, 우리가 어떻게 코드를 컴파일하고, 테스트와 기타 외작업을 어떻게 하는지 설명한다. 

Installing Grunt

To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:

1. Install grunt-cli globally with npm install -g grunt-cli.
2. Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.

When completed, you'll be able to run the various Grunt commands provided from the command line.

Grunt 설치하기

Available Grunt commands

grunt dist (Just compile CSS and JavaScript)

Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

grunt watch (Watch)

Watches the Less source files and automatically recompiles them to CSS whenever you save a change.

grunt test (Run tests)

Runs JSHint and runs the QUnit tests headlessly in PhantomJS.

grunt (Build absolutely everything and run tests)

Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.

Troubleshooting

Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

http://gruntjs.com/

Getting started

Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0. Odd version numbers of Node.js are considered unstable development versions.

Before setting up Grunt ensure that your npm is up-to-date by running npm update -g npm (this might requiresudo on certain systems).

Installing the CLI

Using Grunt 0.3? Please see Grunt 0.3 Notes

In order to get started, you'll want to install Grunt's command line interface (CLI) globally. You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this.

npm install -g grunt-cli

This will put the grunt command in your system path, allowing it to be run from any directory.

Note that installing grunt-cli does not install the Grunt task runner! The job of the Grunt CLI is simple: run the version of Grunt which has been installed next to a Gruntfile. This allows multiple versions of Grunt to be installed on the same machine simultaneously.

1. node.js 설치

2. cmd에서 명령어 입력

How the CLI works

Each time grunt is run, it looks for a locally installed Grunt using node's require() system. Because of this, you can run grunt from any subfolder in your project.

If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from your Gruntfile, and executes any tasks you've requested for it to run. To really understand what is happening, read the code. 

Working with an existing Grunt project

Assuming that the Grunt CLI has been installed and that the project has already been configured with apackage.json and a Gruntfile, it's very easy to start working with Grunt:

1. Change to the project's root directory.
2. Install project dependencies with npm install.
3. Run Grunt with grunt.

That's really all there is to it. Installed Grunt tasks can be listed by running grunt --help but it's usually a good idea to start with the project's documentation.  

Preparing a new Grunt project

A typical setup will involve adding two files to your project: package.json and the Gruntfile.

package.json: This file is used by npm to store metadata for projects published as npm modules. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Gruntfile: This file is named Gruntfile.js or Gruntfile.coffee and is used to configure or define tasks and load Grunt plugins. When this documentation mentions a Gruntfile it is talking about a file, which is either a Gruntfile.js or a Gruntfile.coffee.

package.json

The package.json file belongs in the root directory of your project, next to the Gruntfile, and should be committed with your project source. Running npm install in the same folder as a package.json file will install the correct version of each dependency listed therein.

There are a few ways to create a package.json file for your project:

• Most grunt-init templates will automatically create a project-specific package.json file.
• The npm init command will create a basic package.json file.
• Start with the example below, and expand as needed, following this specification.

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

Installing Grunt and gruntplugins

The easiest way to add Grunt and gruntplugins to an existing package.json is with the commandnpm install <module> --save-dev. Not only will this install <module> locally, but it will automatically be added to the devDependencies section, using a tilde version range.

For example, this will install the latest version of Grunt in your project folder, adding it to your devDependencies:

npm install grunt --save-dev

The same can be done for gruntplugins and other node modules. Be sure to commit the updatedpackage.json file with your project when you're done!

프로젝트 파일의 root 지점으로 이동한 뒤, Grunt를 설치한다. 

그럼, node_modules 이라는 폴더가 생성되고, 그 안에 생성된 Grunt라는 폴더에는 다음과 같은 파일들이 함께 생성된다.

The Gruntfile

The Gruntfile.js or Gruntfile.coffee file is a valid JavaScript or CoffeeScript file that belongs in the root directory of your project, next to the package.json file, and should be committed with your project source.

A Gruntfile is comprised of the following parts:

• The "wrapper" function
• Project and task configuration
• Loading Grunt plugins and tasks
• Custom tasks

An example Gruntfile

In the following Gruntfile, project metadata is imported into the Grunt config from the project'spackage.json file and the grunt-contrib-uglify plugin's uglify task is configured to minify a source file and generate a banner comment dynamically using that metadata. When grunt is run on the command line, theuglify task will be run by default.

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

Now that you've seen the whole Gruntfile, let's look at its component parts.

The "wrapper" function

Every Gruntfile (and gruntplugin) uses this basic format, and all of your Grunt code must be specified inside this function:

module.exports = function(grunt) {
  // Do grunt-related things in here
};

Project and task configuration

Most Grunt tasks rely on configuration data defined in an object passed to the grunt.initConfig method.

In this example, grunt.file.readJSON('package.json') imports the JSON metadata stored in package.jsoninto the grunt config. Because <% %> template strings may reference any config properties, configuration data like filepaths and file lists may be specified this way to reduce repetition.

You may store any arbitrary data inside of the configuration object, and as long as it doesn't conflict with properties your tasks require, it will be otherwise ignored. Also, because this is JavaScript, you're not limited to JSON; you may use any valid JS here. You can even programmatically generate the configuration if necessary.

Like most tasks, the grunt-contrib-uglify plugin's uglify task expects its configuration to be specified in a property of the same name. Here, the banner option is specified, along with a single uglify target namedbuild that minifies a single source file to a single destination file.

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

Loading Grunt plugins and tasks

Many commonly used tasks like concatenation, minification and linting are available as grunt plugins. As long as a plugin is specified in package.json as a dependency, and has been installed via npm install, it may be enabled inside your Gruntfile with a simple command:

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

Note: the grunt --help command will list all available tasks.

Custom tasks

You can configure Grunt to run one or more tasks by default by defining a default task. In the following example, running grunt at the command line without specifying a task will run the uglify task. This is functionally the same as explicitly running grunt uglify or even grunt default. Any number of tasks (with or without arguments) may be specified in the array.

// Default task(s).
grunt.registerTask('default', ['uglify']);

If your project requires tasks not provided by a Grunt plugin, you may define custom tasks right inside theGruntfile. For example, this Gruntfile defines a completely custom default task that doesn't even utilize task configuration:

module.exports = function(grunt) {

  // A very basic default task.
  grunt.registerTask('default', 'Log some stuff.', function() {
    grunt.log.write('Logging some stuff...').ok();
  });

};

Custom project-specific tasks don't need to be defined in the Gruntfile; they may be defined in external.js files and loaded via the grunt.loadTasks method.

Further Reading

• The Installing grunt guide has detailed information about installing specific, production or in-development, versions of Grunt and grunt-cli.
• The Configuring Tasks guide has an in-depth explanation on how to configure tasks, targets, options and files inside the Gruntfile, along with an explanation of templates, globbing patterns and importing external data.
• The Creating Tasks guide lists the differences between the types of Grunt tasks and shows a number of sample tasks and configurations.
• For more information about writing custom tasks or Grunt plugins, check out the developer documentation.

http://gruntjs.com/getting-started

DATEDIFF ( datepart , startdate , enddate )

Return Type int

http://msdn.microsoft.com/en-us/library/ms189794.aspx

Create a new li element  : $('<li>');

Select the h2 element nested insind the <div class="article"> ... </div> element. : $('.article h2');

1. Click on the first article.
2. Use the n keyboard shortcut to go to the next article.
3. Then use the o keyboard shortcut to open the article description.
4. If you have issues, check out the hint!
5. Click Save & Submit Code to get started!

Program skeleton

var main = function() {

};


$(document).ready(main);

Event Handlers
We can write a function that specifies what to do when an event occurs. This function is called anevent handler.

When a user clicks the .like-button element, the event handler toggles the "active" class. This alternates the button between the normal gray view and the selected blue view.

.click()

In the page to the right, click the three share buttons at the top of the page.

One common user event is the click event. A click event occurs when a user clicks on an HTML element.

The .click() method attaches an event handler to an HTML element so that it can respond to a click event.

$('.social li') selects each share button at the top of the web page.

The .click() method attaches an event handler to each button.

The event handler adds the CSS class .active, which changes the button's background-color to red. We use $(this) to refer to the HTML element that was clicked on. We can now operate on this element using .toggleClass().

Putting it all together, when you click on a share button at the top of the page, a click event is triggered by the browser.

When the click event occurs, the .click() method runs the event handler. In this code, the event handler changes the button color to red.

.keypress()

In the page to the right, click inside the page, and then press any letter or number key.

Another common user event is the keypress event. A keypress event occurs when a user types a key on the keyboard.

The .keypress() method attaches an event handler to an HTML element so that it can respond to a keypress event.

$(document) selects the whole web page.The .keypress() method attaches an event handler to document

When any keyboard key is pressed, the event handler toggles the dropdown menu.

Putting it all together, when you press any keyboard key, a keypress event is triggered by the browser.

When the keypress event occurs, the .keypress()method runs the event handler.

Here, the event handler toggles the dropdown menu. Putting it all together, when you press any keyboard key, a keypress event is triggered by the browser.

When the keypress event occurs, the .keypress()method runs the event handler.

Here, the event handler toggles the dropdown menu.

event

In the page to the right, click inside the page, and then press the m key.

Triggering a keypress event handler when any key is typed isn't particularly useful. For more control, we can use the event object.

The event object contains more information about an event, such as which mouse button was clicked or which key was pressed.

Comparisons

It's possible to compare variables using comparisons.

• > - Greater than

• < - Less than

• >= Greater than or equal to

• <= Less than or equal to

• === Equal to score1 === score2;

• !== Not equal to

Functions

A function is run by calling its name and giving it input values.

1. Click on the menu icon. The menu displays by pushing the page's body over to the right.
2. Then click on the X icon. The menu closes by pulling the body back to where it was.
3. Click Save & Submit Code to get started!

/*Inside the app.js file, use the keyword var and create a function called main.*/

var main = function(){
    
};

/*Use jQuery to run the main function once the web page has fully loaded.*/
$(document).ready(main);

1. In app.js, find the main function.
2. Inside the main function, use jQuery to select the class 'icon-menu'.  $('.icon-menu');
3. Small hint: jQuery is all about the dollars! And to select a class, use a period (ie. full stop).

1. Start with a $( ) to tell the computer we're using jQuery.
2. To use CSS to select the class 'icon-menu', we type in '.icon-menu'.

After $('.icon-menu'), add the .click()method.

1. Add a function inside the .click()method.
2. Select the 'menu' class and animate it.

3. Right now, the menu is 285px past the left edge of the screen. That's why it is not visible! Inside the animate method:

   a move it 0px to the left
   b. make this happen over 200 milliseconds.

4. We now want to push the rest of the page to the left 285px. Use jQuery to select the body HTML element, animate it, and move it left 285px over 200 milliseconds.

1. 웹에서 음악변환  

http://media.io/

2. 음악 수정 (cut)

http://mp3cut.net/

뭐 다른 설치필요없이 웹에서 하니까 편리하게 사용 가능^.^ 

Make an Interactive Website

<div class="container">

  <div class="row">
    <div class="col-md-4">
      ...
    </div>

    <div class="col-md-4">
      ...
    </div>

    <div class="col-md-4">
      ...
    </div>

  </div>
</div>

<div class="row">
  <div class="col-md-4">
     <img src="http://goo.gl/0sX3jq" >
  </div>

  <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/Av1pac" >
    </div>
    <div class="thumbnail">
      <img src="http://goo.gl/vw43v1">
    </div>
  </div>

  <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/0Kd7UO" >
    </div>
  </div>

</div>

Navigation