PM> Install-Package DNTCommon.Web.Core
PM> Install-Package DNTCommon.Web.Core
PM> Install-Package DNTCommon.Web.Core
3. کد جاوا اسکریپت خود را تولید کنید (تمام سرویس دهندگان این امکان را پیاده سازی کرده اند).
4. قطعه کد جاوا اسکریپت تولید شده را، در قسمت <head> فایل (Layout.cshtml (Razor_ یا (Site.Master (ASPX کپی کنید.
5. CSS Selectorهای لازم برای فونت مورد نظر را تولید کنید.
6. کد css تولید شده را در فایل Site.css کپی کنید. در مثال جاری فونت کل اپلیکیشن را تغییر می‌دهیم. برای اینکار، خانواده فونت "bistro-script-web" را به تگ body اضافه میکنیم.
نکته: فونت cursive بعنوان fallback تعریف شده. یعنی در صورتی که بارگذاری و رندر فونت مورد نظر با خطا مواجه شد، از این فونت استفاده می‌شود. بهتر است فونت‌های fallback به مقادیری تنظیم کنید که در اکثر پلتفرم‌ها وجود دارند.
همین! حالا می‌توانیم تغییرات اعمال شده را مشاهده کنیم. بصورت پیش فرض قالب پروژه‌ها از فونت "Segoe UI" استفاده می‌کنند، که خروجی زیر را رندر می‌کند.
استفاده از فونت جدید "Bistro Script Web" وب سایت را مانند تصویر زیر رندر خواهد کرد.
همانطور که می‌بینید استفاده از فونت‌های وب بسیار ساده است. اما بهتر است از اینگونه فونت‌ها برای کل سایت استفاده نشود و تنها روی المنت‌های خاصی مانند سر تیتر‌ها (h1,h2,etc) اعمال شوند.
// Core variables and mixins @import "variables.less"; @import "mixins.less"; // Core CSS @import "forms.less"; // Components @import "navbar.less"; // Utility classes @import "utilities.less";
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">منوی پایین افتادنی
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.site1.com">site1</a></li>
<li><a href="http://www.site2.com">site2</a></li>
<li><a href="http://www.site3.com">site3</a></li>
<li class="divider"></li>
<li class="dropdown-submenu"><a href="#">سایر موارد</a>
<ul class="dropdown-menu">
<li><a href="http://www.site4.com">site4</a></li>
<li><a href="http://www.site5.com">site5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="btn-group">
<a class="btn btn-primary" href="#">Split button</a> <a class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.site1.com">site1</a></li>
<li><a href="http://www.site2.com">site2</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h2>
Navigational menus
</h2>
<div class="span3">
<ul class="nav nav-tabs">
<li class="nav-header">nav nav-tabs</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="span3">
<ul class="nav nav-tabs nav-stacked">
<li class="nav-header">nav nav-tabs nav-stacked</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="span3">
<ul class="nav nav-pills">
<li class="nav-header">nav nav-pills</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="span3">
<ul class="nav nav-list">
<li class="nav-header">nav nav-list</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
...<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.site1.com">site1</a></li>
<li><a href="http://www.site2.com">site2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Home</a></li>
<li><a data-toggle="tab" href="#tab2">About</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
data ... data ...
</div>
<div class="tab-pane" id="tab2">
data2 ... data2 ...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<a href="/" class="brand">نام سایت در اینجا</a>
<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>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="/about">درباره</a></li>
<li><a href="/contact">تماس</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
...<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="http://www.site1.com">site1</a></li>
<li><a href="http://www.site2.com">site2</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right input-append" action="/search">
<input class="span2" type="search" />
<button class="btn" type="button">
جستجو</button>
</form>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<ul class="breadcrumb">
<li><a href="/level1">سطح یک</a> <span class="divider">/</span></li>
<li><a href="/level2">سطح دو</a> <span class="divider">/</span></li>
<li class="active">سطح سه</li>
</ul>
</div>
</div>
</div>
عموما مرسوم است در یک سایت چند سطحی، موقعیت جاری کاربر، به نحوی به او اعلام شود. یکی از این روش‌ها استفاده از breadcrumbs است که نمونه‌ای از آن‌را در مثال فوق ملاحظه می‌کنید.<div class="container">
<div class="row">
<div class="span12">
<div class="pagination pagination-centered pagination-large">
<ul>
<li class="disabled"><a href="#">Prev</a></li>
<li class="active"><a href="/page/1">1</a></li>
<li><a href="/page/2">2</a></li>
<li><a href="/page/3">3</a></li>
<li><a href="/page/4">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<section>
<ul class="unstyled">
<li><span class="label">پیش فرض</span></li>
<li><span class="label label-success">موفقیت آمیز</span></li>
<li><span class="label label-warning">اخطار</span></li>
<li><span class="label label-importatnt">مهم است</span></li>
<li><span class="label label-info">اطلاعات</span></li>
<li><span class="label label-inverse">رنگ معکوس</span></li>
</ul>
</section>
<section>
<ul class="unstyled">
<li><span class="badge">پیش فرض</span></li>
<li><span class="badge badge-success">موفقیت آمیز</span></li>
<li><span class="badge badge-warning">اخطار</span></li>
<li><span class="badge badge-importatnt">مهم است</span></li>
<li><span class="badge badge-info">اطلاعات</span></li>
<li><span class="badge badge-inverse">رنگ معکوس</span></li>
</ul>
</section>
<div>
<div class="alert">
<button class="close" data-dismiss="alert">×</button>
نمایش اعلانات
</div>
<div class="alert alert-danger">
<button class="close" data-dismiss="alert">×</button>
نمایش اعلانات
</div>
<div class="alert alert-info">
<button class="close" data-dismiss="alert">×</button>
نمایش اعلانات
</div>
<div class="alert alert-success">
<button class="close" data-dismiss="alert">×</button>
نمایش اعلانات
</div>
<div class="alert alert-error">
<button class="close" data-dismiss="alert">×</button>
نمایش اعلانات
</div>
</div>
</div>
</div>
</div>
Right click on the folder -> Properties -> Security tab -> Click at Edit button -> Enter `IIS AppPool\DefaultAppPool` user (IIS AppPool\<app_pool_name>) -> Click at Check names -> OK -> Then give it `write` or other permissions.
من دنبال این کار هستم، چطوری میتونم آدرس تگ img رو به این صورت دربیارم، فایل css رو میتونم با باندل به این حالت دربیارم ولی تگ img رو نه!
