آذرخش برنامه نویسان کرمانشاه

مبحث Bootstrap در asp.net 1403/11/21

1-&nbsp;&nbsp;&nbsp;&nbsp; افزودن بوت استرپ به پروژه&nbsp;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;
&lt;link type="text/css" rel="stylesheet" href="bootstrap.css" /&gt;&nbsp;&nbsp;
&nbsp;&nbsp; &lt;script type="text/javascript" src=" bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
&nbsp; &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
&nbsp; &lt;script type="text/javascript"
نکته1: خط اول meta ربطی به بوت استرپ ندارد ولی همراه بوت استرپ به شکل فوق نوشته میشود.
نکته2: در صورتیکه نخواهید از امکاناتی نظیر منو ها و Modal ها&nbsp; استفاده کنید تنها لینک حاوی bootstrap.css کافیست در این حال شما می تواندی صفحه html خود را آرایش کنید
نکته 3: لینکهای فوق در پروژه دارای مستر پیج فقط در هدر صفحه مستر پیج قرار می گیرند ولی در پروژ ه های فاقد مستر ، در هدر همه صفحات باید گنجانده شوند.
2-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; شروع کار با BootStrap
قرار دادن کلاس container در div اول به شکل &lt;div class="container"&gt; این دایو در اغلب موارد در خط بعد از فرم قرار می گیرد
قرار دادن کلاس row در div دوم به شکل &lt;div class="row"&gt;
هر دو دایو فوق در انتهای صفحه بسته میشوند
3-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; گراید بندی در بوت استرپ
هدف از گراید بندی کم کردن عرض صفحه نمایش برای یک دایو یا کل صفحه است به فرم زیر
&nbsp;
&nbsp;
&nbsp;
<div>
<table dir="rtl" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="247" valign="top">
برای صفحات
</td>
<td width="163" valign="top">
مدل مورد استفاده
</td>
<td width="204" valign="top">
تا ابعاد
</td>
</tr>
<tr>
<td width="247" valign="top">
مانیتورهای معمولی و لپ تاپ
</td>
<td width="163" valign="top">
Lg
</td>
<td width="204" valign="top">
&gt;=1200px
</td>
</tr>
<tr>
<td width="247" valign="top">
لپ تاپ های کوچک
</td>
<td width="163" valign="top">
md
</td>
<td width="204" valign="top">
&gt;=992
</td>
</tr>
<tr>
<td width="247" valign="top">
تبلت
</td>
<td width="163" valign="top">
sm
</td>
<td width="204" valign="top">
&gt;=768
</td>
</tr>
<tr>
<td width="247" valign="top">
گوشی های موبایل
</td>
<td width="163" valign="top">
xs
</td>
<td width="204" valign="top">
&lt;768
</td>
</tr>
</tbody>
</table>
</div>
تمام مدلهای فوق 12 ستونی می باشد و بکار بردن کلاسی مثل col-lg-6 یعنی عرض صفحه یا دایو در صفحه نمایش مانیتور نصف عرض مانیتور &nbsp;باشد
4-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; رنگها در بوت استرپ
<div>
<table dir="rtl" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="319" valign="top">
آبی
</td>
<td width="319" valign="top">
Primary
</td>
</tr>
<tr>
<td width="319" valign="top">
مایل به سبز
</td>
<td width="319" valign="top">
Info
</td>
</tr>
<tr>
<td width="319" valign="top">
سبز
</td>
<td width="319" valign="top">
Success
</td>
</tr>
<tr>
<td width="319" valign="top">
قرمز
</td>
<td width="319" valign="top">
Danger
</td>
</tr>
<tr>
<td width="319" valign="top">
سیاه
</td>
<td width="319" valign="top">
Dark
</td>
</tr>
<tr>
<td width="319" valign="top">
سفید
</td>
<td width="319" valign="top">
Light
</td>
</tr>
<tr>
<td width="319" valign="top">
زرد
</td>
<td width="319" valign="top">
warning
</td>
</tr>
<tr>
<td width="319" valign="top">
طوسی
</td>
<td width="319" valign="top">
secondry
</td>
</tr>
</tbody>
</table>
</div>
&nbsp;
5-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; کلاسها در بوت استرپ
کلاسها اغلب داخل یک div قرار می گیرند
کلاس input group mb-3 برای گروهبندی عناصر ورودی در یک فرم است عناصر داخل بلاک حاوی این کلاس به هم مرتبط میشوند به جای mb-3 می توان از هر شماره مجاز یا گراید مجاز نظیر lb استفاده کرد.
کلاس input-group-Prepend قرار دادن پیش عنصر (عنصری قبل زا عنصر مورد نظر)
کلاس input-group-append قرار دادن پس عنصر (عنصری بعد از عنصر مورد نظر)
کلاس form-control واکنش گرایی عنصر در فرم (افزایش و کاهش طول عنصر متناسب با صفحه)
مثل گروه بندی عناصر فرم
&lt;div class="input-group mb-3"&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="input-group-prepend"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="input-group-text"&gt;مبلغ &lt;/span&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;asp:TextBox ID="txtPay" runat="server" CssClass="form-control"&gt;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/asp:TextBox&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="input-group-append"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="form-control" &gt;تومان&lt;/span&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;
کلاس text ویژه کار روی متون
کلاس btn کار روی دکمه ها
کلاس alert برای پیامها و هشدارها
کلاس bg کار روی زمینه عناصر
کلاس justify-content-center وسط چین کردن عناصر
&nbsp;
ترکیب رنگها و کلاس عناصر
btn ایجاد دکمه مثلاً btn btn-waprimary
alert هشدار (بیشتر رنگ متن)&nbsp; مثل alert-success
text برای متون نظیر text-danger
bg رنگ زمینه مثل bg-secondry زمینه طوسی
یک مثال جامع تر
&lt;div class="input-group mb-3"&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="input-group-prepend"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="input-group-text bg-primary text-light" style="width:120px;margin-left:5px; margin-right:5px;"&gt;مساحت&lt;/span&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp; &lt;asp:TextBox ID="txtSurface" runat="server" CssClass="form-control &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bg-light" ReadOnly="true" style="margin-left:5px;"&gt;&lt;/asp:TextBox&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="input-group-append"&gt;
&nbsp;&nbsp;&nbsp; &lt;span class="form-control bg-primary text-light" style="margin- left:5px;"&gt;متر مربع&lt;/span&gt;
&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;
6-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Modal در بوت استرپ
مودالها بحثی بسیار جالب و زیبا در بوت استرپ هستند که بشترین کاربرد آنها در ساخت پنجره های دیالوگ می باشد بدین منظور می توان یک مودال ساخت و id آنرا به یک دکمه یا تگ a نسبت داد. پنجره دیالوگ ساخت مودال شامل بخشهای زیر است (بهتر است مودالها در آخر صفحه قبل از بسته شدن تگ&nbsp; form بیایند.
یک دایو شروع کننده با کلاس modal که دارای پارامترهای مختلفی است
&lt;div class="modal fade" id="ShowWindow"&gt; &nbsp;&nbsp;&lt;% fade is for beuteaful %&gt;
در مثال فوق id بسیا ضروری بوده و آدرس ارجاع صفحه به دیالوگ است
یک دایو مشخص کنده نوع با کلاس modal-dialog که دارای یک پارامتر است
&lt;div class="modal-dialog" role="document"&gt;
دایو در برگیرنده بخشهای اصلی دیالوگ با کلاس modal-content
&lt;div class="modal-content"&gt;
بخشهای اصلی دیالوگ که شامل سر-بدنه و پا می باشند داخل این دایو قرار می گیرند
دایو سر Head با کلاس modal-header که عنوان پنجره دیالوگ را مشخص می کند داخل این دایو هر عنصر نمایشی دلخواه مثل &lt;h&gt; &lt;span&gt; و ... قرار می گیرد (مودال می تواند بدون سر باشد)
&lt;div class="modal-header&gt;
دایو بدنه Body &nbsp;با کلاس modal-body بدنه اصلی دیالوگ را مشخص می کند
&lt;div class="modal-body"&gt;
دایو پا footer با کلاس modal-footer زیر صفحه دیالوگ را مشخص می کند که می تواند نباشد
&lt;div class="modal-footer"&gt;
نمونه کاربری مودال جهت نمایش پیام خطای گذرواژه ورودی روی&nbsp; صفحه
&lt;div class="modal fade" id="Msg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&nbsp; aria-hidden="true"&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="modal-dialog" role="document"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="modal-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="modal-header" style="direction:rtl"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h5 class="modal-title" style="color:red;font-size:larg;" &nbsp;id="H1"&gt;توجه&lt;/h5&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="modal-body" style="direction:rtl;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="input-group mb-3"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="input-group-text"&gt;گذرواژه اشتباه بود دوباره سعی کنید&lt;/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;&nbsp; &lt;%--End body--%&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="modal-footer" style="direction:rtl;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="button"&nbsp; id="pp" value="متوجه شدم" /&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp; &lt;/div&gt;
فراخوانی مودال
با دکمه &lt;button id=&rdquo;x&rdquo; data-toggle=&rdquo;modal&rdquo; target=&rdquo;#Fk&rdquo;&gt; &nbsp;که Fk ای دی مودال است
با تگ &lt;a&gt; &nbsp;به فرم &lt;a data-toggle=&rdquo;modal&rdquo; href=&rdquo;#Fk&rdquo;&gt; که Fk ای دی مودال است
خلاصه بحث مودال
در صفحه اصلی: فراخوانی مودال
&lt;a data-toggle=&rdquo;modal&rdquo; href=&rdquo;#Msg&rdquo;&gt;نمایش پیام&lt;a&gt;
در مودال
&lt;div class="modal fade" id="Msg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&nbsp; aria-hidden="true"&gt;
&lt;div class="modal-dialog" role="document"&gt;
&nbsp;&nbsp;&nbsp; &lt;div class="modal-content"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="modal-header" style="direction:rtl"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; مشخص کردن محتویات سر صفحه دیالوگ
&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="modal-body" style="direction:rtl;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; مشخص کردن محتویات بدنه
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp; &lt;div class="modal-footer" style="direction:rtl;"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; دیالوگ پاصفحه مشخص کردن محتویات
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp; &lt;/div&gt;
&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
فراخوانی مودال با برنامه نویسی: گاها پیش میاید که ما تگ خاصی برای فرا خوانی مودال نداریم مثل فراخوانی یکباره با باز شدن صفحه در این حالت در سمت سرور یک تابع جاور اسکریپت را در لود صفحه فراخوانی می کنیم که این تابع بهتر است یک تابع jquery باشد که مودال را فراخوانی می کند
فرا خوانی تابع jquery در page_load
ScriptManager.RegisterStartupScript(Me, GetType(String), "Pym", "ShowDialog()", True)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
تابع jquery فرا خوان&nbsp; مودال که در بخش &lt;script&hellip;&gt;&lt;/script&gt; قرار&nbsp; می گیرد و به زبان جاوا اسکریپت است
&lt;script type="text/javascript" &gt;
function ShowDialog ()
&nbsp;&nbsp;&nbsp; &nbsp; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('#Msg').modal('show');
&nbsp;&nbsp;&nbsp; &nbsp; }&nbsp;&nbsp;&nbsp;
&lt;/script&gt;&nbsp;&nbsp;&nbsp;
&nbsp;

امتیاز این مقاله