EN

موستانگ، وحشیِ دوست داشتنی

-1 امتیاز

برای این کار می توانیم از 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>
0 رای
در پاسخ به: نمایش المان در css

برای  مخفی  کردن المان از 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 نیز می توانیم استفاده کنیم.

0 رای

برای رفرش کردن صفحه در جاوا اسکریپت از متد 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>
0 رای

ابتدا با استفاده از 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>
0 رای

گاهی اوقات که جداول رکوردهای زیادی داشته باشند بازیابی همه رکوردها روی کارایی دیتابیس اثر منفی خواهد داشت.در چنین حالتی بهتر است که فقط رکوردهایی که می خواهیم را بازیابی کنیم. برای اینکار از دستور زیر استفاده می کنیم:

SELECT TOP number  column_name(s) 

با استفاده از این دستور می توانیم چند رکورد بالای جدول را بازیابی کنیم. مثلاً فرض کنیم ما 10 رکورد اول را بخواهیم:

SELECT TOP 10 * FROM Courses;

همچنین می توانیم درصدی از رکوردهای جدول را انتخاب کنیم. مثلاً فرض کنیم ما نصف رکوردهای جدول را نیاز داشته باشیم:

SELECT TOP 50 PERCENT * FROM Courses;
0 رای
در پاسخ به: رنگ فونت در bootstrap

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>
0 رای
در پاسخ به: Jumbotron در bootstrap

Jumbotron یک باکس خاکستری رنگ برای ما می سازد که در آن می توانیم متن و یا اطلاعاتی که مهم هستند و می خواهیم کاربر به آنها توجه کند را نمایش دهیم.استفاده از Jumbotron به صورت زیر می باشد:

<div class="jumbotron">
  <h1>لطفا توجه نمایید</h1>
  <p>همراه داشتن کارت ملی الزامی می باشد</p>
</div>
0 رای

نوار پیشرفت برای این است که به کاربر نشان دهیم چه مقدار از یک فرایند را طی کرده است.

 

برای اینکار در تگ <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>

 

0 رای

برای اینکار باید از  کامپوننت 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">&times;</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">
.
.
0 رای

در 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>
1 رای

در 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>

0 رای
در پاسخ به: نوار آدرس در bootstrap

برای ایجاد نوار آدرس در بالای صفحه از تگ  <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>
0 رای
در پاسخ به: Pager در bootsrap

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>
0 رای
در پاسخ به: select list در bootstrap

برای پیاده سازی 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>
0 رای
در پاسخ به: radio در bootstrap

برای پیاده سازی 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>
0 رای

برای تعریف رنگ و سایر اطلاعات جدول مانند طول و عرض به دو روش می توانیم عمل کنیم:

  1. در فایل css رنگ مورد نظر خود را تعریف کرده و در فرم استفاده کنیم:
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="my-component" />
  );
}

export default App;

کامپوننت my-component در فایل css تعریف شده است

    1. 2. تعریف رنگ به صورت مستقیم در فرم:
import React from 'react';

function App() {
  return (
    <div
      style={{
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }}
    />
  );
}

export default App;
0 رای

برای  ایجاد چک باکس به صورت زیر عمل می کنیم:

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;
0 رای
در پاسخ به: validation در bootstrap

برای کنترل فیلدها از کلاس 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>
0 رای
در پاسخ به: فرم در bootstrap

برای پیاده سازی فرم از کلاس 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>
0 رای
در پاسخ به: checkbox در bootstrap

برای پیاده سازی چک باکس باید از تگ <“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>

 

نمایش 101 - 120 از 217 نتیجه