> create-react-app sample-15
> cd sample-15
> npm start

> npm install --save bootstrap

import "bootstrap/dist/css/bootstrap.css";

> npm i react-router-dom --save

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

import React from "react";

const NavBar = () => {
  return (
    <nav className="navbar bg-dark navbar-dark navbar-expand-sm">
      <div className="navbar-nav">
        <a className="nav-item nav-link" href="/">
          Home
        </a>
        <a className="nav-item nav-link" href="/products">
          Products
        </a>
        <a className="nav-item nav-link" href="/posts/2018/06">
          Posts
        </a>
        <a className="nav-item nav-link" href="/admin">
          Admin
        </a>
      </div>
    </nav>
  );
};

export default NavBar;

import "./App.css";

import React, { Component } from "react";

import NavBar from "./components/navbar";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
      </div>
    );
  }
}

export default App;

import "./App.css";

import React, { Component } from "react";
import { Route } from "react-router-dom";

import Dashboard from "./components/admin/dashboard";
import Home from "./components/home";
import NavBar from "./components/navbar";
import Posts from "./components/posts";
import Products from "./components/products";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="container">
          <Route path="/products" component={Products} />
          <Route path="/posts" component={Posts} />
          <Route path="/admin" component={Dashboard} />
          <Route path="/" component={Home} />
        </div>
      </div>
    );
  }
}

export default App;

import React from "react";

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

import React from "react";

const Posts = () => {
  return (
    <div>
      <h1>Posts</h1>
      Year: , Month:
    </div>
  );
};

export default Posts;

import React from "react";

const Dashboard = ({ match }) => {
  return (
    <div>
      <h1>Admin Dashboard</h1>
    </div>
  );
};

export default Dashboard;

<div className="container">
  <Route path="/products" component={Products} />
  <Route path="/posts" component={Posts} />
  <Route path="/admin" component={Dashboard} />
  <Route path="/" component={Home} />
</div>

<Route path="/" exact component={Home} />

import { Route, Switch } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="container">
          <Switch>
            <Route path="/products" component={Products} />
            <Route path="/posts" component={Posts} />
            <Route path="/admin" component={Dashboard} />
            <Route path="/"  component={Home} />
          </Switch>
        </div>
      </div>
    );
  }
}

import React from "react";
import { Link } from "react-router-dom";

const NavBar = () => {
  return (
    <nav className="navbar bg-dark navbar-dark navbar-expand-sm">
      <div className="navbar-nav">
        <Link className="nav-item nav-link" to="/">
          Home
        </Link>
        <Link className="nav-item nav-link" to="/products">
          Products
        </Link>
        <Link className="nav-item nav-link" to="/posts/2018/06">
          Posts
        </Link>
        <Link className="nav-item nav-link" to="/admin">
          Admin
        </Link>
      </div>
    </nav>
  );
};

export default NavBar;

<Route
  path="/products"
  render={() => <Products param1="123" param2="456" />}
/>

<Route
  path="/products"
  render={props => (
    <Products param1="123" param2="456" {...props} />
  )}
/>

DoFilter is a Full Responsive Bootstrap Multipurpose Filtering and Shorting plugin built on Latest Version of Bootstrap Framework (v3.3.7), HTML5, CSS3 and jQuery. Its wonderful features can be used to Filtering and Shorting your website content as like Portfolio, Service, Team, Blog, Products, Pricing, FAQ etc. Also you can customize it for Filtering and Shorting any your website content.

DoFilter is a Full Responsive Isotope Multipurpose Filtering and Shorting plugin. Filtering can hide and show item elements with the filter option. Items that match that filter will be shown. DoFilter Responsive Isotope Multipurpose Filtering and Shorting can rearrange the order of item elements based on their data. Items that do not match will be hidden.

There are 19+ filter styles with 100% responsive design. Indeed, you will be able to showcase your content on mobile devices such as smart phones and tablets. It has many features like CSS3 and jQuery animations, single and multiple Shorting and Filtering. All the codes are clean and well organized. Also have proper help documentation. It looks great with all types of devices. 

import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { MenuComponent } from './menu/menu.component';
import { SubSystemComponent } from './subsystem/subsystem.component';
import { MenuService } from './menu/menu.service';
import { SubSystemService } from './subsystem/subsystem.service';

import { ROUTER_DIRECTIVES, RouterLink, RouterOutlet} from '@angular/router';
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [MenuComponent, SubSystemComponent, ROUTER_DIRECTIVES, RouterOutlet, RouterLink],
    providers: [MenuService, SubSystemService, HTTP_PROVIDERS]
})
export class AppComponent {
    currentSubsSystemId: number=1;
}

@model IEnumerable<DomainClasses.Page>
@helper ShowNavBar(IEnumerable<DomainClasses.Page> pages)
{
    
    foreach (var page in pages)
    {
        if (page != null)
        {
            if (page.Children.Count == 0)
            {
                <text><li><a tabindex="-1" href="#">@page.Title</a></li></text>
            }

            if (page.Children.Count > 0 && page.Parent == null)
            {         
                <text><li class="dropdown"><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">@page.Title<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li><a tabindex="-1" href="#">@page.Title</a></li></text>
                @ShowNavBar(page.Children)
                @:</ul></li>
            }

            if (page.Children.Count > 0 && page.Parent != null)
            {         
                <text><li class="dropdown-submenu"><a tabindex="-1" href="#">@page.Title</a><ul class="dropdown-menu"></text>
                @ShowNavBar(page.Children)
                @:</ul></li>
            }

        }
    }
    
}
<div class="navbar" style="margin-bottom: 10px;">
    <div class="navbar-inner">
        <a class="brand" href="www.google.com">IT-EBOOK</a>
        <ul class="nav">
            <li class="active"><a href="#">خانه</a></li>
            <li><a href="#">ورود</a></li>
            @ShowNavBar(Model)
            <li><a href="#">ارتباط با ما</a></li>
        </ul>
        <div class="input-append pull-left visible-desktop" style="margin-top: 5px;">
            <input class="span6 search-input" id="Text1" type="text">
            <button class="btn btn-primary" type="button">جست و جو</button>
            <button class="btn btn-info btn-advanced-search" type="button">پیشرفته</button>
        </div>
    </div>
</div>

            <ol class="breadcrumb">
                <li><a href="#">خانه</a></li>
                <li><a href="#">خدمات</a></li>
                <li class="active">محصولات</li>
            </ol>

.breadcrumb > li + li:before {
  content: "/\00a0";
  padding: 0 5px;
  color: #cccccc;
}

.breadcrumb > li + li:before {
  content: none;
}

            <ol class="breadcrumb">
                <li><a href="#">خانه</a> <span class="glyphicon glyphicon-circle-arrow-left"></span></li>
                <li><a href="#">خدمات</a> <span class="glyphicon glyphicon-circle-arrow-left"></span></li>
                <li class="active">محصولات</li>
            </ol>

.glyphicon {
color: #cdae51;
}

                <ul class="nav nav-pills nav-justified">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li class="active"><a href="#">Services</a></li>
                    <li><a href="#">Photo Gallery</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>

    <div class="container">
        <h4 class="alert alert-info">
            nav</h4>
        <div class="row">
            <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li class="active"><a href="#">Services</a></li>
                        <li><a href="#">Photo Gallery</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <!-- end row -->
    </div>
    <!-- /container -->

 body { padding-top: 70px; }

• آموزش استفاده از کنترل ListView در دات نت سه و نیم

• تنظیمات اس کیوال سرور 2005 برای فعال کردن دسترسی ریموت به آن

• مجله گرافیک دیجیتال گاما

• انحصار تأمین پهنای باند را لغو کنید.

• قابلیت های جدید C# 4.0 و VB.NET 10.0: عدم نیاز به اسمبلی های COM در سیستم مقصد

• قیمت سیستم‌عامل ویندوز برای کاربران چینی 60 درصد کاهش خواهد یافت

• سوراخ امنیتی اجتماعی از طریق POS

• ۵ زبان برنامه‌نویسی که هرگز از آن‌ها نخواهید شنید!

• نقشه مفاهیم تکنولوژی جاوا

• مقدمه‌ای بر معماری MVC در CakePHP

• Write Your Own Windows Inspector

• Microsoft Anti-Cross Site Scripting Library V3.0 Beta

• اف شارپ جزئی از Visual studio 2010 خواهد بود

• ماکرو نویسی در VS.Net

• افزونه‌ای برای گزارشگیری از IIS7

• ویدیویی از Dynamic Data

• کدامیک از کنترل‌های وب در صورت خاموش کردن view state‌ باز هم view state خود را حفظ می‌کنند؟

• طراحی لایه دسترسی به داده‌ها در ASP.Net

• بررسی معنای Page.IsValid

• بررسی فنی یک سایت پر درآمد ASP.Net

• مقایسه‌ای بین ASP.Net MVC و Web forms

• 5 نکته برای برخورد با خواص راست به چپ

• 37 پلاگین جالب توجه jQuery

• 960 CSS Framework

• 13 آموزش طراحی منو با استفاده از jQuery

• آزمایش سایت خود با چند نگارش IE به صورت همزمان

• چگونه باید یک فریم ورک جدید PHP را آموخت؟

• آیا واقعا برای برنامه نویسی PHP نیاز به فریم ورک وجود دارد؟

• Aptana PHP 1.0 منتشر شد (اگر قبلا این IDE بسیار قابل توجه را دریافت کرده بودید فقط کافی است به منوی aptana و گزینه my aptana مراجعه کرده و از قسمت plugins ، این پلاگین 18 مگابایتی را دریافت کنید.)

• نگارش جدید SQL Assistant

• طراحی یک صف چند ریسمانی

• آیا اف شارپ از سی شارپ سریعتر است؟

• Parallel LINQ

• چگونه RegEx سریعتری داشته باشیم؟

• چگونه برای یک خاصیت مقدار پیش فرض تعیین کنیم؟

• Java 1.5 for the .NET Platform

• مقایسه بنچ‌مارک ویندوز 7 و ویندوز ویستا

• 10 نکته برای طراحی بهتر رابط کاربر

• مزایای مهاجرت از ویژوال سورس سیف مایکرسافت به SVN

• افزونه‌ای برای فایرفاکس جهت GUI prototyping (خیلی کار جالبی کرده ولی چرا به صورت یک افزونه؟)

• گوگل و native client

• چگونه یک زبان برنامه نویسی جدید را سریعتر یاد بگیریم؟

• 7 دلیل برای اینکه دیگر کیفیت مای اس‌کیوال مانند سابق نخواهد بود