برای این کار می توانیم از opacity استفاده کنیم. با این ویژگی می توانیم وضوح تصویر را کم کنیم. برای این کار باید یک عدد بین 0 تا 1 بدهیم. هرچه عدد به صفر نزدیکتر باشد، عکس کمرنگ تر خواهد بود.
<html>
<head>
<style>
img {
opacity:0.3;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="image.jpg" width="170" height="100">
</body>
</html>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
برای مخفی کردن المان از display: none و نمایش المان از display: block می توانیم استفاده کنیم. در مثال زیر عبارت “برای ثبت نام شرایط زیر لازم می باشد” مخفی می باشد و سپس با کلیک بر روی “نمایش جزییات” نمایش داده می شود.
<!DOCTYPE html>
<html>
<head>
<style>
#panel, .flip {
font-size: 16px;
padding: 10px;
text-align: center;
background-color: #4CAF50;
color: white;
border: solid 1px #a6d8a8;
margin: auto;
}
#panel {
display: none;
}
</style>
</head>
<body>
<p class="flip" onclick="myFunction()">نمایش جزییات</p>
<div id="panel">
<p>برای ثبت نام شرایط زیر لازم می باشد</p>
</div>
<script>
function myFunction() {
document.getElementById("panel").style.display = "block";
}
</script>
</body>
</html>
همچنین برای مخفی کردن از visibility:hidden نیز می توانیم استفاده کنیم.
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
برای رفرش کردن صفحه در جاوا اسکریپت از متد location.reload استفاده می کنیم.برای رفرش کردن خودکار صفحه از متدهای setInterval و setTimeout می توانیم استفاده کنیم. رفرش کردن خودکار صفحه برای زمان هایی مناسب است که محتوای پیج ما مدام در حال تغییر می باشد. مثلا سایتهای نمایش قیمت طلا و ارز و سهام های بورس و یا سایتی که نظرات کاربران را نمایش می دهد.
برای استفاده از متد setInterval به صورت زیر عمل می کنیم:
<html>
<head>
<title> نظرات کاربران</title>
</head>
<body>
<script type="text/javascript">
setInterval(autoRefreshPage,10000);
function autoRefreshPage()
{
window.location = window.location.href;
}
</script>
</body>
</html>
در خط زیر گفتیم که url صفحه لود شود:
window.location = window.location.href;
در خط زیر هم گفتیم که متد autoRefreshPage هر 10 ثانیه اجرا شود که این متد صفحه را آپدیت می کند:
setInterval(autoRefreshPage,10000);
برای استفاده از متد setTimeout نیز به صورت زیر عمل می کنیم:
<html>
<head>
<title>نظرات کاربران</title>
<script>
function autoRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
window.onload = autoRefresh(10000);
</script>
</head>
<body>
</body>
</html>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
ابتدا با استفاده از css کادر آن را تعریف می کنیم:
#myProgress {
width: 100%;
background-color: grey;
}
#myBar {
width: 0%;
height: 20px;
background-color: blue;
}
برای پیاده سازی مقدار پیشرفت فرایند از متد setInterval استفاده می کنیم و برای متوقف کردن آن از متد clearInterval استفاده می کنیم.
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
در خط (id = setInterval(frame, 100 گفتیم که متد frame هر 100 میلی ثانیه اجرا شود. این زمان بستگی به کار مورد نظر ما دارد. مثلا فرض کنیم می خواهیم کاربر عکسی را آپلود کند و می دانیم که اینکار 10 ثانیه طول می کشد. بنابراین در اینجا زمان را 1000 قرار می دهیم. سپس در متد frame مقدار متغیر width که مقدار پیشرفت را نشان می دهد یکی یکی افزایش می دهیم. زمانیکه مقدار این فیلد به 100 رسید با فراخوانی متد clearInterval متد setInterval را متوقف می کنیم. کد کامل به صورت زیر می شود:
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: 0%;
height: 20px;
background-color: blue;
}
</style>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">آپلود</button>
<script>
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 100);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
</script>
</body>
</html>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
گاهی اوقات که جداول رکوردهای زیادی داشته باشند بازیابی همه رکوردها روی کارایی دیتابیس اثر منفی خواهد داشت.در چنین حالتی بهتر است که فقط رکوردهایی که می خواهیم را بازیابی کنیم. برای اینکار از دستور زیر استفاده می کنیم:
SELECT TOP number column_name(s)
با استفاده از این دستور می توانیم چند رکورد بالای جدول را بازیابی کنیم. مثلاً فرض کنیم ما 10 رکورد اول را بخواهیم:
SELECT TOP 10 * FROM Courses;
همچنین می توانیم درصدی از رکوردهای جدول را انتخاب کنیم. مثلاً فرض کنیم ما نصف رکوردهای جدول را نیاز داشته باشیم:
SELECT TOP 50 PERCENT * FROM Courses;
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
bootstrap برای رنگ فونت و متن کلاس های زیر را دارد:
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-light و text-body
مثلاً رنگ هدر را به صورت زیر تعیین می کنیم:
<h1 class="text-muted"> نام افراد</h1>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
Jumbotron یک باکس خاکستری رنگ برای ما می سازد که در آن می توانیم متن و یا اطلاعاتی که مهم هستند و می خواهیم کاربر به آنها توجه کند را نمایش دهیم.استفاده از Jumbotron به صورت زیر می باشد:
<div class="jumbotron">
<h1>لطفا توجه نمایید</h1>
<p>همراه داشتن کارت ملی الزامی می باشد</p>
</div>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
نوار پیشرفت برای این است که به کاربر نشان دهیم چه مقدار از یک فرایند را طی کرده است.
![]()
برای اینکار در تگ <div> کلاس progress و progress-bar را بصورت زیر استفاده می کنیم.
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
با استفاده از style مقدار پیشرفت ( حجم آبی ) را نشان دهیم.
برای نشان دادن درصد پیشرفت بصورت زیر عمل می کنیم.
![]()
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
برای نشان دادن نوار پیشرفت متحرک از کلاس progress-bar-striped progress-bar-animated استفاده می کنیم
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
- فرشته حقیقی 5 سال قبل پاسخ داد
برای اینکار باید از کامپوننت modal بصورت زیر استفاده کنیم. modal یک باکس برای نمایش پیغام یا متن می باشد.این کامپوننت شامل 3 قسمت Header ، body و footer می باشد.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
می توانیم اندازه باکس را با استفاده از کلاس های modal-sm و modal-lg و modal-xl زیر انتخاب کنیم .
.
.
.
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm">
.
.
.
درصورتیکه بخواهیم باکس در وسط صفحه باشد از کلاس modal-dialog-centered استفاده می کنیم.
.
.
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
.
.
درصورتیکه متن پیام طولانی باشد می توانیم از کلاس modal-dialog-scrollable برای ایجاد اسکرول در باکس استفاده کنیم.
.
.
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-scrollable">
.
.
- فرشته حقیقی 5 سال قبل پاسخ داد
در bootstrap کامپوننتی برای قرار دادن فیلتر روی جدول نداریم و باید از جی کوئری استفاده کنیم.در مثال زیر یک فیلتر روی ستون های جدول فیلتر قرار داده ایم که براساس حرف اول بتوانیم جستجو انجام دهیم.
<div class="container mt-3">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>vfeee</td>
<td>fds</td>
<td>john@example.com</td>
</tr>
<tr>
<td>sara</td>
<td>dfggs</td>
<td>mghgary@gmail.com</td>
</tr>
<tr>
<td>sam</td>
<td>sam</td>
<td>july@dfr.com</td>
</tr>
<tr>
<td>reza</td>
<td>rezaee</td>
<td>rezza@rere.com</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
- فرشته حقیقی 5 سال قبل پاسخ داد
در bootstrap3 آیکون هایی جهت استفاده در فرم وجود دارد.برای استفاده از این آیکون ها ابتدا باید خط زیر را در تگ <head> فرم خود قرار دهیم
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
سپس برای استفاده از هر آیکون باید کلاس آن را در تگ <i> یا <span> مانند زیر قید کنیم
<span class="glyphicon glyphicon-folder-open"></span>
lما در bootstrap4 کتابخانه ای برای آیکون وجود ندارد و در نتیجه این آیکون ها وجود ندارد.برای استفاده از آیکون در bootsttrap4 می توانیم از کتابخانه هایی که در اینترنت وجود دارد استفاده کنیم مانند Font Awesome و Google Material Design Icons. برای استفاده از آیکون iهای این سایتها نیازی به دانلود یا نصب آنها نیست.مثلا برای استفاده از آیکون های سایت Font Awesome ابتدا خط زیر را در تگ <head> فرم خود وارد می کنیم
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
سپس کلاس آیکون مورد نظر خود را در تگ <i> یا <span> مانند زیر قید کنیم
<i class="fas fa-cloud"></i>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
برای ایجاد نوار آدرس در بالای صفحه از تگ <nav class=”navbar navbar-default”> استفاده می کنیم.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">COURSES</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</nav>
درصورتیکه تگ <ul class=”nav navbar-nav”> را نگذاریم نوار آدرس به صورت عمودی در سمت چپ صفحه قرار می گیرد.
درصورتیکه بخواهیم نوار آدرس تیره باشد از کلاس navbar-inverse استفاده می کنیم.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">COURSES</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>
</nav>
- فرشته حقیقی 5 سال قبل پاسخ داد
Pager در bootsrap نوعی صفحه بندی برای ایجاد دکمه های قبل و بعد در فرم می باشد.برای این صفحه بندی از کلاس pager در تگ <ul> استفاده می کنیم.
<ul class="pager">
<li><a href="#">قبل</a></li>
<li><a href="#">بعد</a></li>
</ul>
دقت کنید که در این نوع صفحه بندی فقط دکمه قبل و بعد داریم و شماره صفحه نداریم.
در صورتیکه بخواهیم این دکمه ها در دو طرف صفحه باشند از کلاس از کلاس های previous و next استفاده می کنیم.
<ul class="pager">
<li class="previous"><a href="#">قبل</a></li>
<li class="next"><a href="#">بعد</a></li>
</ul>
- فرشته حقیقی 5 سال قبل پاسخ داد
برای پیاده سازی select list در bootstrap بصورت زیر عمل می کنیم
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
درصورتیکه بخواهیم کاربر این امکان را داشته باشد که چند مورد را انتخاب کند در تگ select می بایست واژه multiple را قید کنیم.
<select multiple class="form-control" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
- فرشته حقیقی 5 سال قبل پاسخ داد
برای پیاده سازی radio بصورت زیر عمل می کنیم.
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 3
</label>
</div>
درصورتیکه بخواهیم آیتم ها در یک خط باشند از کلاس form-check-inline استفاده می کنیم.
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 2
</label>
</div>
<div class="form-check-inline disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">Option 3
</label>
</div>
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
برای تعریف رنگ و سایر اطلاعات جدول مانند طول و عرض به دو روش می توانیم عمل کنیم:
- در فایل css رنگ مورد نظر خود را تعریف کرده و در فرم استفاده کنیم:
import React from 'react';
import './App.css';
function App() {
return (
<div className="my-component" />
);
}
export default App;
کامپوننت my-component در فایل css تعریف شده است
-
- 2. تعریف رنگ به صورت مستقیم در فرم:
import React from 'react';
function App() {
return (
<div
style={{
backgroundColor: 'blue',
width: '100px',
height: '100px'
}}
/>
);
}
export default App;
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
برای ایجاد چک باکس به صورت زیر عمل می کنیم:
import React, { Component } from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
// Checkbox Initial State
state = {
react: false,
boootstrap: false,
jsp: false,
};
// React Checkboxes onChange Methods
onChangereact = () => {
this.setState(initialState => ({
react: !initialState.react,
}));
}
onChangeboootstrap = () => {
this.setState(initialState => ({
boootstrap: !initialState.boootstrap,
}));
}
onChangejsp = () => {
this.setState(initialState => ({
jsp: !initialState.jsp,
}));
}
// Submit
onSubmit = (e) => {
e.preventDefault();
console.log(this.state);
}
render() {
return (
<div className="App">
<h2>Store Multiple Checkboxes Values in React</h2>
<form onSubmit={this.onSubmit}>
<div className="form-check">
<label className="form-check-label">
<input type="checkbox"
checked={this.state.react}
onChange={this.onChangereact}
className="form-check-input"
/>
Apple
</label>
</div>
<div className="form-check">
<label className="form-check-label">
<input type="checkbox"
checked={this.state.bootstrap}
onChange={this.onChangebootstrap}
className="form-check-input"
/>
Avocado
</label>
</div>
<div className="form-check">
<label className="form-check-label">
<input type="checkbox"
checked={this.state.jsp}
onChange={this.onChangejsp}
className="form-check-input"
/>
Banana
</label>
</div>
<div className="form-group">
<button className="btn btn-success">
Save
</button>
</div>
</form>
</div>
);
}
}
export default App;
- فرشته حقیقی 5 سال قبل پاسخ داد
- آخرین فعالیت در 5 سال قبل
برای کنترل فیلدها از کلاس was-validated و یا needs-validation در تگ <form> می توانیم استفاده کنیم.این کلاسها خالی نبودن ورودی ها را چک می کنند. همچنین در تگ ورودی ها باید عبارت required را قید کنیم. با استفاده از کلاس valid-feedback و invalid-feedback kنیز می توانیم پیغام معتبر یا غیرمعتبر بودن فیلد را به کاربر نشان بدهیم.
<form action="/..." class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
- فرشته حقیقی 5 سال قبل پاسخ داد
برای پیاده سازی فرم از کلاس form-control استفاده می کنیم.این کلاس پهنای فیلدها را 100% قرار می دهد و باعث می شود فرم مرتب و یکدست باشد.همچنین برای اینکه فاصله فیلدها از هم یکسان و مناسب باشد از کلاس form-group برای هر فیلد استفاده می کنیم.
<form action="/...">
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> select me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
همچنین درصورتیکه بخواهیم همه فیلدهای فرم در یک خط باشند از کلاس form-inline در تگ <form> استفاده می کنیم.
<form class="form-inline" action="/...">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" placeholder="Enter password" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> sellect me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
- فرشته حقیقی 5 سال قبل پاسخ داد
برای پیاده سازی چک باکس باید از تگ <“input type=”checkbox> استفاده کنیم.
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" >Option 3
</label>
</div>
درصورتیکه بخواهیم
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 1
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">Option 2
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" >Option 3
</label>
</div>
- فرشته حقیقی 5 سال قبل پاسخ داد