Bootstrap PDF

‫وُبرة عه تقىيت ‪Bootstrap‬‬
‫حتميم وتضمني املكتبت ضمه املشسوع‬

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Bootstrap Page</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />

<script src="js/bootstrap.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-

scale=1,user-scalable=no"/>

</head>
<body>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta name="keywords"
content="Learning,BootstrapOpenSourcProjects,Themes,TestingSite" />

</head>
<body>
</body>
</html>
,
<!DOCTYPE html>
<head>
<!— JQuery ‫ربط مكتبت‬-->
<script src="jquery/jquery-3.2.1.js"></script>
</head>
<body>
</body>
</html>
Bootstrap ‫كيفيت عمم تقىيت‬
<!DOCTYPE html>
<head>


<link href="MyCSS_StyleFile.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">
<p>Col1</p>
</div>

<p>Col2</p>
</div>

<p>Col3</p>
</div>

<p>Col4</p>
</div>

<p>Col5</p>
</div>

<p>Col5</p>
</div>

<p>Col6</p>
</div>

<p>Col7</p>
</div>

<p>Col8</p>
</div>

<p>Col9</p>
</div>

<p>Col10</p>
</div>

<p>Col11</p>
</div>

<p>Col12</p>
</div>
</div>
</div>
</body>
</html>
body p{
font-family:'Times New Roman';
font-size:16pt;
font-weight:bold;
margin-top:17px;
text-align:center;
color:#fff;
background:#000;
}
<!DOCTYPE html>
<head>

<link href="MyCSS_StyleFile.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<img src="image/facebook.png" />
<h3>facebook SocialMedia</h3>
<p>systems here as well. Note that before you can download the
Windows x86 32-bit .exe file or the
Windows x64 64-bit .exe file, you must click the radio button selector next to
the “Accept License
Agreement” option at the top of the webpage section, as shown in Figure 1-2.
Once you do this, the
download links on the right become bold, and you can click them to download
the </p>
</div>
<img src="image/youtube.png" />
<h3>YouTube watch Video</h3>
the </p>
</div>
<img src="image/instagram.png" />
<h3>instagram Crate Your Chanel</h3>
the </p>
</div>
<img src="image/print-flat.png" />
<h3>Print The Page</h3>
the </p>
</div>
<img src="image/telegram.png" />
<h3>telegram upload any thing</h3>
the </p>
</div>

<img src="image/Extranet-2.png" />
<h3>Hello World</h3>
the </p>
</div>
</div>
</div>
</body>
</html>
body img{
width:150px;
height:150px;
margin-top:18px;
}
body h3{
text-align:center;
}
body p{
text-align:justify;
}
clearfix ‫انكالض‬
<div class="clearfix visible-md-block"></div>
<div class="clearfix visible-sm-block"></div>
‫انصوز وانىصوص‬
<body>
<div class="container">
<div class="row">
<div>
<img class="img-rounded" src="image/MyImage.jpg" />
<img class="img-circle" src="image/MyImage.jpg" />
<img class="img-thumbnail" src="image/MyImage.jpg" />
</div>
</div>
</div>
</body>
‫نووه‬ ‫انكالض‬
This Is Danger Color Text text-danger
This Is Information Color Text text-info
This Is Primary Color Text text-primary
This Is Success Color Text text-success
This Is Warning Color Text text-warning
‫موضع املُحاذاة‬ ‫انكالض‬

text-center
text-right
text-left
<body>
<div class="row">
<div>

<p class="text-danger">This Is Danger Color Text</p>
<p class="text-info">This Is Information Color Text</p>
<p class="text-primary">This Is Primary Color Text</p>
<p class="text-success">This Is Success Color Text</p>
<p class="text-warning">This Is Warning Color Text</p>
<hr />

<p class="text-center">This Text Go To The Center by using "text-center" class</p>
<p class="text-right">This Text Go To The Rigtht by using "text-right" class</p>
<p class="text-left">This Text Go To The Left by using "text-left" class</p>
<hr />

<p class="text-hide">This Text Has been hiden</p>
<p class="text-justify">
It can be said that, for a while, traditional desktop application
developers have been
spoiled. This is not to say that traditional desktop application development is easier
other forms of development. However, as traditional desktop application developers, we
have had the ability to.
</p>
<hr />
<p class="text-lowercase">This text With Lowercase Letters</p>
<p class="text-uppercase">This text With Upercase Letters</p>
</div>
</div>
</div>
</body>
<body>
<div class="row">
<div class="text-center">
<h1>WOW I Like <small>This Web Site</small></h1>
<h3>this Site <small>Is Amazing</small></h3>
<mark class="text-primary">Press Here</mark> To Login <br/>
<del>From 145$</del> To 100$
<br/>
<p>To Delete File From Computer Press <kbd>Del</kbd> or Press
<kbd>Shift</kbd>+<kbd>Del</kbd></p> <br />
<p>To Copy File From Computer Press <kbd>Ctrl</kbd> + <kbd>C</kbd> and
<kbd>Ctrl</kbd>+<kbd>V</kbd> to Paste it</p>
</div>
</div>
</div>
</body>
buttons ‫ واألشزاز‬glyphicons ‫األيقوواث‬
<span class="glyphicon glyphicon-search" ></span>


<i class="glyphicon glyphicon-search" ></i>
<body>
<div class="row">
<table class="table table-bordered">
<tr>
<td><span class="glyphicon glyphicon-search" ></span>glyphicon glyphicon-search</td>
<td> <span class="glyphicon glyphicon-adjust"></span>glyphicon glyphicon-adjust</td>
<td> <span class="glyphicon glyphicon-alert"></span>glyphicon glyphicon-alert</td>
<td> <span class="glyphicon glyphicon-align-center"></span>glyphicon glyphicon-align-
center</td>
<td> <span class="glyphicon glyphicon-align-justify"></span>glyphicon glyphicon-align-
justify</td>
<td><span class="glyphicon glyphicon-align-left"></span>glyphicon glyphicon-align-
left</td>
<td><span class="glyphicon glyphicon-align-right"></span>glyphicon glyphicon-align-
right</td>
<td> <span class="glyphicon glyphicon-apple"></span>glyphicon glyphicon-apple</td>
<td> <span class="glyphicon glyphicon-arrow-down"></span>glyphicon glyphicon-arrow-
down</td>
<td> <span class="glyphicon glyphicon-arrow-left"></span>glyphicon glyphicon-arrow-
left</td>
<td> <span class="glyphicon glyphicon-arrow-right"></span>glyphicon glyphicon-arrow-
right</td>
<td> <span class="glyphicon glyphicon-arrow-up"></span>glyphicon glyphicon-arrow-up</td>
<td> <span class="glyphicon glyphicon-asterisk"></span>glyphicon glyphicon-asterisk</td>
<td> <span class="glyphicon glyphicon-baby-formula"></span>glyphicon glyphicon-baby-
formula</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-backward"></span>glyphicon glyphicon-backward</td>
<td> <span class="glyphicon glyphicon-ban-circle"></span>glyphicon glyphicon-ban-
circle</td>
<td> <span class="glyphicon glyphicon-barcode"></span>glyphicon glyphicon-barcode</td>
<td> <span class="glyphicon glyphicon-bed"></span>glyphicon glyphicon-bed</td>
<td><span class="glyphicon glyphicon-bell"></span>glyphicon glyphicon-bell</td>
<td> <span class="glyphicon glyphicon-bishop"></span>glyphicon glyphicon-bishop</td>
<td> <span class="glyphicon glyphicon-blackboard"></span>glyphicon glyphicon-
blackboard</td>
<td> <span class="glyphicon glyphicon-bold"></span>glyphicon glyphicon-bold</td>
<td> <span class="glyphicon glyphicon-book"></span>glyphicon glyphicon-book</td>
<td><span class="glyphicon glyphicon-bookmark"></span>glyphicon glyphicon-bookmark</td>
<td><span class="glyphicon glyphicon-briefcase"></span>glyphicon glyphicon-briefcase</td>
<td> <span class="glyphicon glyphicon-btc"></span>glyphicon glyphicon-btc</td>
<td> <span class="glyphicon glyphicon-bullhorn"></span>glyphicon glyphicon-bullhorn</td>
<td><span class="glyphicon glyphicon-calendar"></span>glyphicon glyphicon-calendar</td>
</tr>
<tr>
<td> <span class="glyphicon glyphicon-camera"></span>glyphicon glyphicon-camera</td>
<td> <span class="glyphicon glyphicon-cd"></span>glyphicon glyphicon-cd</td>
<td> <span class="glyphicon glyphicon-certificate"></span>glyphicon glyphicon-
certificate</td>
<td> <span class="glyphicon glyphicon-check"></span>glyphicon glyphicon-check</td>
<td><span class="glyphicon glyphicon-chevron-down"></span>glyphicon glyphicon-chevron-
down</td>
<td> <span class="glyphicon glyphicon-chevron-left"></span>glyphicon glyphicon-chevron-
left</td>
<td> <span class="glyphicon glyphicon-chevron-right"></span>glyphicon glyphicon-chevron-
right</td>
<td><span class="glyphicon glyphicon-chevron-up"></span>glyphicon glyphicon-chevron-
up</td>
<td><span class="glyphicon glyphicon-circle-arrow-left"></span>glyphicon glyphicon-circle-
arrow-left</td>
<td><span class="glyphicon glyphicon-circle-arrow-right"></span>glyphicon glyphicon-
circle-arrow-right</td>
<td><span class="glyphicon glyphicon-circle-arrow-up"></span>glyphicon glyphicon-circle-
arrow-up</td>
<td><span class="glyphicon glyphicon-circle-arrow-down"></span>glyphicon glyphicon-circle-
arrow-down</td>
<td><span class="glyphicon glyphicon-cloud"></span>glyphicon glyphicon-cloud</td>
<td><span class="glyphicon glyphicon-cloud-download"></span>glyphicon glyphicon-cloud-
download</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-cloud-upload"></span>glyphicon glyphicon-cloud-
upload</td>
<td><span class="glyphicon glyphicon-cog"></span>glyphicon glyphicon-cog</td>
<td><span class="glyphicon glyphicon-collapse-down"></span>glyphicon glyphicon-collapse-
down</td>
<td><span class="glyphicon glyphicon-collapse-up"></span>glyphicon glyphicon-collapse-
up</td>
<td><span class="glyphicon glyphicon-comment"></span>glyphicon glyphicon-comment</td>
<td><span class="glyphicon glyphicon-compressed"></span>glyphicon glyphicon-
compressed</td>
<td><span class="glyphicon glyphicon-console"></span>glyphicon glyphicon-console</td>
<td><span class="glyphicon glyphicon-copy"></span>glyphicon glyphicon-copy</td>
<td><span class="glyphicon glyphicon-copyright-mark"></span>glyphicon glyphicon-copyright-
mark</td>
<td><span class="glyphicon glyphicon-credit-card"></span>glyphicon glyphicon-credit-
card</td>
<td><span class="glyphicon glyphicon-cutlery"></span>glyphicon glyphicon-cutlery</td>
<td><span class="glyphicon glyphicon-dashboard"></span>glyphicon glyphicon-dashboard</td>
<td><span class="glyphicon glyphicon-download"></span>glyphicon glyphicon-download</td>
<td><span class="glyphicon glyphicon-download-alt"></span>glyphicon glyphicon-download-
alt</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-duplicate"></span>glyphicon glyphicon-duplicate</td>
<td><span class="glyphicon glyphicon-earphone"></span>glyphicon glyphicon-earphone</td>
<td><span class="glyphicon glyphicon-edit"></span>glyphicon glyphicon-edit</td>
<td><span class="glyphicon glyphicon-education"></span>glyphicon glyphicon-education</td>
<td><span class="glyphicon glyphicon-eject"></span>glyphicon glyphicon-eject</td>
<td><span class="glyphicon glyphicon-envelope"></span>glyphicon glyphicon-envelope</td>
<td><span class="glyphicon glyphicon-equalizer"></span>glyphicon glyphicon-equalizer</td>
<td><span class="glyphicon glyphicon-erase"></span>glyphicon glyphicon-erase</td>
<td><span class="glyphicon glyphicon-euro"></span>glyphicon glyphicon-euro</td>
<td><span class="glyphicon glyphicon-exclamation-sign"></span>glyphicon glyphicon-
exclamation-sign</td>
<td><span class="glyphicon glyphicon-expand"></span>glyphicon glyphicon-expand</td>
<td><span class="glyphicon glyphicon-export"></span>glyphicon glyphicon-export</td>
<td><span class="glyphicon glyphicon-eye-close"></span>glyphicon glyphicon-eye-close</td>
<td><span class="glyphicon glyphicon-eye-open"></span>glyphicon glyphicon-eye-open</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-facetime-video"></span>glyphicon glyphicon-facetime-
video</td>
<td><span class="glyphicon glyphicon-fast-backward"></span>glyphicon glyphicon-fast-
backward</td>
<td><span class="glyphicon glyphicon-fast-forward"></span>glyphicon glyphicon-fast-
forward</td>
<td> <span class="glyphicon glyphicon-file"></span>glyphicon glyphicon-file</td>
<td> <span class="glyphicon glyphicon-film"></span>glyphicon glyphicon-film</td>
<td><span class="glyphicon glyphicon-filter"></span>glyphicon glyphicon-filter</td>
<td><span class="glyphicon glyphicon-fire"></span>glyphicon glyphicon-fire</td>
<td><span class="glyphicon glyphicon-flag"></span>glyphicon glyphicon-flag</td>
<td> <span class="glyphicon glyphicon-flash"></span>glyphicon glyphicon-flash</td>
<td><span class="glyphicon glyphicon-floppy-disk"></span>glyphicon glyphicon-floppy-
disk</td>
<td> <span class="glyphicon glyphicon-floppy-open"></span>glyphicon glyphicon-floppy-
open</td>
<td><span class="glyphicon glyphicon-floppy-remove"></span>glyphicon glyphicon-floppy-
remove</td>
<td><span class="glyphicon glyphicon-floppy-saved"></span>glyphicon glyphicon-floppy-
saved</td>
<td><span class="glyphicon glyphicon-folder-close"></span>glyphicon glyphicon-folder-
close</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-folder-open"></span>glyphicon glyphicon-folder-
open</td>
<td><span class="glyphicon glyphicon-font"></span>glyphicon glyphicon-font</td>
<td><span class="glyphicon glyphicon-forward"></span>glyphicon glyphicon-forward</td>
<td><span class="glyphicon glyphicon-fullscreen"></span>glyphicon glyphicon-
fullscreen</td>
<td><span class="glyphicon glyphicon-gbp"></span>glyphicon glyphicon-gbp</td>
<td><span class="glyphicon glyphicon-gift"></span>glyphicon glyphicon-gift</td>
<td><span class="glyphicon glyphicon-glass"></span>glyphicon glyphicon-glass</td>
<td><span class="glyphicon glyphicon-globe"></span>glyphicon glyphicon-globe</td>
<td><span class="glyphicon glyphicon-grain"></span>glyphicon glyphicon-grain</td>
<td><span class="glyphicon glyphicon-hand-right"></span>glyphicon glyphicon-hand-
right</td>
<td><span class="glyphicon glyphicon-hand-up"></span>glyphicon glyphicon-hand-up</td>
<td><span class="glyphicon glyphicon-hd-video"></span>glyphicon glyphicon-hd-video</td>
<td><span class="glyphicon glyphicon-hdd"></span>glyphicon glyphicon-hdd</td>
<td><span class="glyphicon glyphicon-header"></span>glyphicon glyphicon-header</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-hand-left"></span>glyphicon glyphicon-hand-left</td>
<td><span class="glyphicon glyphicon-hand-down"></span>glyphicon glyphicon-hand-down</td>
<td><span class="glyphicon glyphicon-headphones"></span>glyphicon glyphicon-
headphones</td>
<td><span class="glyphicon glyphicon-heart"></span>glyphicon glyphicon-heart</td>
<td><span class="glyphicon glyphicon-heart-empty"></span>glyphicon glyphicon-heart-
empty</td>
<td><span class="glyphicon glyphicon-home"></span>glyphicon glyphicon-home</td>
<td><span class="glyphicon glyphicon-hourglass"></span>glyphicon glyphicon-hourglass</td>
<td><span class="glyphicon glyphicon-ice-lolly-tasted"></span>glyphicon glyphicon-ice-
lolly-tasted</td>
<td><span class="glyphicon glyphicon-import"></span>glyphicon glyphicon-import</td>
<td><span class="glyphicon glyphicon-inbox"></span>glyphicon glyphicon-inbox</td>
<td><span class="glyphicon glyphicon-indent-left"></span>glyphicon glyphicon-
<td><span class="glyphicon glyphicon-indent-right"></span>glyphicon glyphicon-indent-
right</td>
<td><span class="glyphicon glyphicon-info-sign"></span>glyphicon glyphicon-info-sign</td>
<td> <span class="glyphicon glyphicon-italic"></span>glyphicon glyphicon-italic</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-jpy"></span>glyphicon glyphicon-jpy</td>
<td><span class="glyphicon glyphicon-king"></span>glyphicon glyphicon-king</td>
<td><span class="glyphicon glyphicon-knight"></span>glyphicon glyphicon-knight</td>
<td><span class="glyphicon glyphicon-lamp"></span>glyphicon glyphicon-lamp</td>
<td><span class="glyphicon glyphicon-leaf"></span>glyphicon glyphicon-leaf</td>
<td><span class="glyphicon glyphicon-level-up"></span>glyphicon glyphicon-level-up</td>
<td><span class="glyphicon glyphicon-link"></span>glyphicon glyphicon-link</td>
<td><span class="glyphicon glyphicon-list"></span>glyphicon glyphicon-list</td>
<td><span class="glyphicon glyphicon-list-alt"></span>glyphicon glyphicon-list-alt</td>
<td><span class="glyphicon glyphicon-lock"></span>glyphicon glyphicon-lock</td>
<td><span class="glyphicon glyphicon-log-in"></span>glyphicon glyphicon-log-in</td>
<td><span class="glyphicon glyphicon-log-out"></span>glyphicon glyphicon-log-out</td>
<td><span class="glyphicon glyphicon-magnet"></span>glyphicon glyphicon-magnet</td>
<td><span class="glyphicon glyphicon-map-marker"></span>glyphicon glyphicon-map-
marker</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-menu-down"></span>glyphicon glyphicon-menu-down</td>
<td><span class="glyphicon glyphicon-menu-hamburger"></span>glyphicon glyphicon-menu-
hamburger</td>
<td><span class="glyphicon glyphicon-menu-left"></span>glyphicon glyphicon-menu-left</td>
<td><span class="glyphicon glyphicon-menu-right"></span>glyphicon glyphicon-menu-
right</td>
<td><span class="glyphicon glyphicon-menu-up"></span>glyphicon glyphicon-menu-up</td>
<td> <span class="glyphicon glyphicon-minus"></span>glyphicon glyphicon-minus</td>
<td><span class="glyphicon glyphicon-minus-sign"></span>glyphicon glyphicon-minus-
sign</td>
<td><span class="glyphicon glyphicon-modal-window"></span>glyphicon glyphicon-modal-
window</td>
<td><span class="glyphicon glyphicon-move"></span>glyphicon glyphicon-move</td>
<td><span class="glyphicon glyphicon-music"></span>glyphicon glyphicon-music</td>
<td><span class="glyphicon glyphicon-new-window"></span>glyphicon glyphicon-briefcase</td>
<td><span class="glyphicon glyphicon-object-align-bottom"></span>glyphicon glyphicon-
object-align-bottom</td>
<td><span class="glyphicon glyphicon-object-align-horizontal"></span>glyphicon glyphicon-
object-align-horizontal</td>
<td><span class="glyphicon glyphicon-object-align-vertical"></span>glyphicon glyphicon-
object-align-vertical</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-object-align-left"></span>glyphicon glyphicon-object-
align-left</td>
<td><span class="glyphicon glyphicon-object-align-right"></span>glyphicon glyphicon-
object-align-righte</td>
<td><span class="glyphicon glyphicon-object-align-top"></span>glyphicon glyphicon-object-
align-top</td>
<td><span class="glyphicon glyphicon-oil"></span>glyphicon glyphicon-oil</td>
<td><span class="glyphicon glyphicon-ok"></span>glyphicon glyphicon-ok</td>
<td> <span class="glyphicon glyphicon-ok-circle"></span>glyphicon glyphicon-ok-circle</td>
<td><span class="glyphicon glyphicon-ok-sign"></span>glyphicon glyphicon-ok-sign</td>
<td><span class="glyphicon glyphicon-open"></span>glyphicon glyphicon-open</td>
<td><span class="glyphicon glyphicon-open-file"></span>glyphicon glyphicon-open-file</td>
<td><span class="glyphicon glyphicon-option-horizontal"></span>glyphicon glyphicon-option-
horizontal</td>
<td><span class="glyphicon glyphicon-option-vertical"></span>glyphicon glyphicon-option-
vertical</td>
<td><span class="glyphicon glyphicon-paperclip"></span>glyphicon glyphicon-paperclip</td>
<td><span class="glyphicon glyphicon-paste"></span>glyphicon glyphicon-paste</td>
<td><span class="glyphicon glyphicon-pause"></span>glyphicon glyphicon-pause</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-pawn"></span>glyphicon glyphicon-pawn</td>
<td><span class="glyphicon glyphicon-pencil"></span>glyphicon glyphicon-pencil</td>
<td><span class="glyphicon glyphicon-phone"></span>glyphicon glyphicon-phone</td>
<td><span class="glyphicon glyphicon-phone-alt"></span>glyphicon glyphicon-phone-alt</td>
<td><span class="glyphicon glyphicon-picture"></span>glyphicon glyphicon-picture</td>
<td> <span class="glyphicon glyphicon-piggy-bank"></span>glyphicon glyphicon-piggy-
bank</td>
<td><span class="glyphicon glyphicon-plane"></span>glyphicon glyphicon-plane</td>
<td><span class="glyphicon glyphicon-play"></span>glyphicon glyphicon-play</td>
<td><span class="glyphicon glyphicon-play-circle"></span>glyphicon glyphicon-play-
circle</td>
<td><span class="glyphicon glyphicon-plus"></span>glyphicon glyphicon-plus</td>
<td><span class="glyphicon glyphicon-print"></span>glyphicon glyphicon-print</td>
<td><span class="glyphicon glyphicon-pushpin"></span>glyphicon glyphicon-pushpin</td>
<td><span class="glyphicon glyphicon-qrcode"></span>glyphicon glyphicon-qrcode</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-queen"></span>glyphicon glyphicon-queen</td>
<td><span class="glyphicon glyphicon-question-sign"></span>glyphicon glyphicon-question-
sign</td>
<td><span class="glyphicon glyphicon-random"></span>glyphicon glyphicon-random</td>
<td><span class="glyphicon glyphicon-record"></span>glyphicon glyphicon-record</td>
<td><span class="glyphicon glyphicon-refresh"></span>glyphicon glyphicon-refresh</td>
<td> <span class="glyphicon glyphicon-registration-mark"></span>glyphicon glyphicon-
registration-mark</td>
<td><span class="glyphicon glyphicon-remove"></span>glyphicon glyphicon-remove</td>
<td> <span class="glyphicon glyphicon-remove-circle"></span>glyphicon glyphicon-remove-
circle</td>
<td><span class="glyphicon glyphicon-remove-sign"></span>glyphicon glyphicon-remove-
sign</td>
<td><span class="glyphicon glyphicon-repeat"></span>glyphicon glyphicon-repeat</td>
<td><span class="glyphicon glyphicon-resize-full"></span>glyphicon glyphicon-resize-
full</td>
<td><span class="glyphicon glyphicon-resize-horizontal"></span>glyphicon glyphicon-resize-
horizontal</td>
<td><span class="glyphicon glyphicon-resize-small"></span>glyphicon glyphicon-resize-
small</td>
<td><span class="glyphicon glyphicon-resize-vertical"></span>glyphicon glyphicon-resize-
vertical</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-retweet"></span>glyphicon glyphicon-retweet</td>
<td><span class="glyphicon glyphicon-road"></span>glyphicon glyphicon-road</td>
<td><span class="glyphicon glyphicon-rub"></span>glyphicon glyphicon-rub</td>
<td><span class="glyphicon glyphicon-save"></span>glyphicon glyphicon-save</td>
<td><span class="glyphicon glyphicon-save-file"></span>glyphicon glyphicon-save-file</td>
<td> <span class="glyphicon glyphicon-saved"></span>glyphicon glyphicon-saved</td>
<td><span class="glyphicon glyphicon-scale"></span>glyphicon glyphicon-scale</td>
<td> <span class="glyphicon glyphicon-scissors"></span>glyphicon glyphicon-scissors</td>
<td><span class="glyphicon glyphicon-screenshot"></span>glyphicon glyphicon-screenshot</td>
<td><span class="glyphicon glyphicon-sd-video"></span>glyphicon glyphicon-sd-video</td>
<td><span class="glyphicon glyphicon-send"></span>glyphicon glyphicon-send</td>
<td><span class="glyphicon glyphicon-share"></span>glyphicon glyphicon-share</td>
<td><span class="glyphicon glyphicon-share-alt"></span>glyphicon glyphicon-share-alt</td>
<td><span class="glyphicon glyphicon-shopping-cart"></span>glyphicon glyphicon-shopping-
cart</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-signal"></span>glyphicon glyphicon-signal</td>
<td><span class="glyphicon glyphicon-sort"></span>glyphicon glyphicon-sort</td>
<td><span class="glyphicon glyphicon-sort-by-alphabet"></span>glyphicon glyphicon-sort-by-
alphabet</td>
<td><span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>glyphicon glyphicon-sort-
by-alphabet-alt</td>
<td><span class="glyphicon glyphicon-sort-by-attributes"></span>glyphicon glyphicon-sort-by-
attributes</td>
<td><span class="glyphicon glyphicon-sort-by-attributes-alt"></span>glyphicon glyphicon-
sort-by-attributes-alt</td>
<td><span class="glyphicon glyphicon-sort-by-order"></span>glyphicon glyphicon-sort-by-
order</td>
<td> <span class="glyphicon glyphicon-sort-by-order-alt"></span>glyphicon glyphicon-sort-by-
order-alt</td>
<td><span class="glyphicon glyphicon-sound-5-1"></span>glyphicon glyphicon-sound-5-1</td>
<td><span class="glyphicon glyphicon-sound-dolby"></span>glyphicon glyphicon-sound-
dolby</td>
<td><span class="glyphicon glyphicon-sound-stereo"></span>glyphicon glyphicon-sound-
stereo</td>
<td><span class="glyphicon glyphicon-star"></span>glyphicon glyphicon-star</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-step-backward"></span>glyphicon glyphicon-step-
backward</td>
<td><span class="glyphicon glyphicon-star-empty"></span>glyphicon glyphicon-star-empty</td>
<td><span class="glyphicon glyphicon-stats"></span>glyphicon glyphicon-stats</td>
<td><span class="glyphicon glyphicon-step-forward"></span>glyphicon glyphicon-step-
forward</td>
<td><span class="glyphicon glyphicon-stop"></span>glyphicon glyphicon-stop</td>
<td><span class="glyphicon glyphicon-subscript"></span>glyphicon glyphicon-subscript</td>
<td><span class="glyphicon glyphicon-subtitles"></span>glyphicon glyphicon-subtitles</td>
<td><span class="glyphicon glyphicon-sunglasses"></span>glyphicon glyphicon-sunglasses</td>
<td><span class="glyphicon glyphicon-superscript"></span>glyphicon glyphicon-
superscript</td>
<td><span class="glyphicon glyphicon-tags"></span>glyphicon glyphicon-tags</td>
<td><span class="glyphicon glyphicon-tasks"></span>glyphicon glyphicon-tasks</td>
<td><span class="glyphicon glyphicon-tent"></span>glyphicon glyphicon-tent</td>
<td><span class="glyphicon glyphicon-text-background"></span>glyphicon glyphicon-text-
background</td>
<td><span class="glyphicon glyphicon-text-color"></span>glyphicon glyphicon-text-color</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-text-height"></span>glyphicon glyphicon-text-
height</td>
<td><span class="glyphicon glyphicon-text-size"></span>glyphicon glyphicon-text-size</td>
<td><span class="glyphicon glyphicon-text-width"></span>glyphicon glyphicon-text-width</td>
<td><span class="glyphicon glyphicon-th"></span>glyphicon glyphicon-th</td>
<td><span class="glyphicon glyphicon-th-large"></span>glyphicon glyphicon-th-large</td>
<td><span class="glyphicon glyphicon-th-list"></span>glyphicon glyphicon-th-list</td>
<td><span class="glyphicon glyphicon-thumbs-down"></span>glyphicon glyphicon-thumbs-
down</td>
<td><span class="glyphicon glyphicon-thumbs-up"></span>glyphicon glyphicon-thumbs-up</td>
<td><span class="glyphicon glyphicon-time"></span>glyphicon glyphicon-time</td>
<td><span class="glyphicon glyphicon-tint"></span>glyphicon glyphicon-tint</td>
<td><span class="glyphicon glyphicon-tower"></span>glyphicon glyphicon-tower</td>
<td><span class="glyphicon glyphicon-transfer"></span>glyphicon glyphicon-transfer</td>
<td><span class="glyphicon glyphicon-trash"></span>glyphicon glyphicon-trash</td>
<td><span class="glyphicon glyphicon-tree-conifer"></span>glyphicon glyphicon-tree-
conifer</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-tree-deciduous"></span>glyphicon glyphicon-tree-
deciduous</td>
<td><span class="glyphicon glyphicon-triangle-bottom"></span>glyphicon glyphicon-triangle-
bottom</td>
<td><span class="glyphicon glyphicon-triangle-left"></span>glyphicon glyphicon-triangle-
left</td>
<td><span class="glyphicon glyphicon-triangle-right"></span>glyphicon glyphicon-triangle-
right</td>
<td><span class="glyphicon glyphicon-triangle-top"></span> glyphicon glyphicon-triangle-
top</td>
<td><span class="glyphicon glyphicon-unchecked"></span>glyphicon glyphicon-unchecked</td>
<td><span class="glyphicon glyphicon-upload"></span>glyphicon glyphicon-upload</td>
<td><span class="glyphicon glyphicon-usd"></span>glyphicon glyphicon-usd</td>
<td><span class="glyphicon glyphicon-user"></span>glyphicon glyphicon-user</td>
<td><span class="glyphicon glyphicon-volume-down"></span>glyphicon glyphicon-volume-
down</td>
<td><span class="glyphicon glyphicon-volume-off"></span>glyphicon glyphicon-volume-off</td>
<td><span class="glyphicon glyphicon-volume-up"></span>glyphicon glyphicon-volume-up</td>
<td><span class="glyphicon glyphicon-warning-sign"></span>glyphicon glyphicon-warning-
sign</td>
<td><span class="glyphicon glyphicon-wrench"></span>glyphicon glyphicon-wrench</td>
</tr>
<tr>
<td><span class="glyphicon glyphicon-yen"></span>glyphicon glyphicon-yen</td>
<td><span class="glyphicon glyphicon-zoom-in"></span>glyphicon glyphicon-zoom-in</td>
<td><span class="glyphicon glyphicon-zoom-out"></span>glyphicon glyphicon-zoom-out</td>
</tr>
</table>
</div>
</div>
</body>
‫نون انصز‬ ‫انكالض‬

btn btn-danger
btn btn-primary
btn btn-warning
btn btn-success
btn btn-deafult
btn btn-info
<body>
<div class="row">
<p> HTML Buttons Without Bootstrap</p>
<button type="submit">Click Here</button><br />
<br />
<button type="button">OK</button><br />
<br />
<p>Bootstrap Buttons Colors</p>

<button type="button" class="btn btn-danger" >danger color
button</button>
<button type="button" class="btn btn-primary" >primary color
button</button>
<button type="button" class="btn btn-warning" >warning color
button</button>
<button type="button" class="btn btn-success" >success color
button</button>
<button type="button" class="btn btn-deafult" >deafult color
button</button>
<button type="button" class="btn btn-info" >info color
button</button>
</div>
</div>
</body>
<body>
<div class="row">
<br />
<p>Bootstrap Buttons Size</p>
<button type="button" class="btn btn-info btn-block" >Block button Size</button>
<button type="button" class="btn btn-success btn-lg" >Large button Size</button>
<button type="button" class="btn btn-warning btn-xl" >Extra button Size</button>
<button type="button" class="btn btn-danger btn-sm" >Small button Size</button>
</div>
</div>
</body>
Jumbotron ‫اجلامبو تسون‬
<body>
<div class="jumbotron">
<div class="row">
<div class="text-justify col-md-8">
<h1>WebSite Title</h1>
<h2><small>Write Here WebSite Description Like This Lorem
Ipsom Text. The first thing that we need to do before we can learn Android
Application Development is to put
together a working Android Application Development Environment on our
development workstation.
Hopefully you have an entry-level quad-core AMD or Intel computer with 4GB or
more of DDR
memory</small><h2>
<a href="#" class="btn btn-primary">Read More...</a>
</div>
<div class="col-md-4">
<img src="image/Myimg.jpg" class="img-circle" width="350" height="350" />
</div>
</div>
</div>
</div>
</body>
Forms ‫تىسيق انىماذج‬
<body>
<div class="row">
<form>
<label for="EmailText">Email Address:</label>
<input type="email" class="form-control" id="EmailText"
placeholder="Email Address"/>
<label for="PasswordText">Your Password:</label>

<input type="password" class="form-control" id="PasswordText"
placeholder="Password"/>
<label for="notes">put your notes:</label>

<textarea id="notes" row="5" class="form-control"
placeholder="Write Here Your Notes..."></textarea>
<select class="form-control">
<option>facebook</option>
<option>Twitter</option>
<option>YouTube</option>
<option>Telegram</option>
<option>Viber</option>
<option>WhatsApp</option>
<option>Instegram</option>
</select>
</form>
</div>
</div>
</body>
<body>
<form>
<div class="form-group has-success has-feedback">
<label class="control-label" for="em">
Email Address:
</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" id="em" class="form-control" placeholder="Your Mail...">
</div>
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
<div class="form-group has-warning has-feedback">

<label class="control-label" for="SearchText">
Search Here:
</label>
<span class="input-group-addon"><i class="glyphicon
glyphicon-search"></i></span>
<input type="search" id="SearchText" class="form-control"
placeholder="Search Here..."/>
</div>
<span class="glyphicon glyphicon-search form-control-
feedback"></span>
</div>
<div class="form-group has-error has-feedback">

<label class="control-label" for="pasText">
Your Password:
</label>
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" id="pasText" class="form-control"
placeholder="Password"/>
</div>
<span class="glyphicon glyphicon-eye-open form-control-feedback"></span>
</div>
</div>
</form>
</div>
</body>
Modal Window ‫انىوافر املُىبثقت‬
<body>
<div class="row">
<button type="button" class="btn btn-success btn-lg" data-
toggle="modal" data-target="#mywindow"> Open Modal Window</button>
<div class="modal fade" id="mywindow">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Enter Your Information correctly:</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group has-success">
<label for="textname">Write Your Name:</label>
<input type="text" class="form-control" placeholder="Your
Name..." id="textname"/>
<label for="pass">Write Your Password:</label>
<input type="password" class="form-control" placeholder="Your
Password..." id="pass"/>
<label for="mail">Write Your Email:</label>
<input type="email" class="form-control" placeholder="Your Mail..." id="mail"/>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-deafult btn btn-xl" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Tables ‫تىسيق اجلداول‬
<body>
<div class="row">
<table class="table">
<caption><h3>Defualt Bootstrap table without border</h3></caption>
<tr>
<td>User Name</td>
<td>Email</td>
<td>Date</td>
<td>gender</td>
</tr>
<tr>
<td>Rasoul Hassan</td>
<td>rasoulprogramming94@gmail.com</td>
<td>1994/6/27</td>
<td>male</td>
</tr>
<tr>
<td>Emad Hakem</td>
<td>Emo1993@yahoo.com</td>
<td>1993/11/14</td>
<td>male</td>
</tr>
<tr>
<td>Zahra Kareem</td>
<td>Zahraofnight@gmail.com</td>
<td>1991/03/25</td>
<td>female</td>
</tr>
</table>
</div>
</div>
</body>

<table class="table table-striped">
<body>
<div class="row">
<div class="table-responsive">
<caption><h3>Defualt Bootstrap table With All Rows Color </h3></caption>
<tr class="success">
<td>User Name</td>
<td>Email</td>
<td>Date</td>
<td>gender</td>
</tr>
<tr class="info">
<td>Rasoul Hassan</td>
<td>rasoulprogramming94@gmail.com</td>
<td>1994/6/27</td>
<td>male</td>
</tr>
<tr class="danger">
<td>Emad Hakem</td>
<td>Emo1993@yahoo.com</td>
<td>1993/11/14</td>
<td>male</td>
</tr>
<tr class="active">
<td>Zahra Kareem</td>
<td>Zahraofnight@gmail.com</td>
<td>1991/03/25</td>
<td>female</td>
</tr>
<tr class="warning">
<td>Zainab Mustafa</td>
<td>ZizoMustafax@yahoo.com</td>
<td>1992/12/10</td>
<td>female</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<div class="table-responsive">
navbar ‫شسيط انتصفح انعهوي‬
<body>
<nav class="navbar navbar-default">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#navbar_Content" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSite Title</a>
</div>

<div class="collapse navbar-collapse" id="navbar_Content">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="#"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
<li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> About</a></li>
<li><a href="#"><i class="glyphicon glyphicon-info-sign"></i> Help</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">facebook</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Telegram</a></li>
<li><a href="#">Instegram</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button id="search-btn" type="submit" class="btn btn-
primary">GO!</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="glyphicon glyphicon-user"></i> Sign
up</a></li>
<li><a href="#"><i class="glyphicon glyphicon-lock"></i>
Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button">dropdown2 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Header 1</a></li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
/* ‫*شيفرة تغيير لون شريط التصفح‬/
.navbar-default {
background-color: #0c407d;
border-color: #337ab7;
}
/*‫* شيفرة محتوى الشريط‬/
.navbar-default .navbar-nav>li>a {
color: #fff;
font-family:Aparajita,'Times New Roman';
font-size:14pt;
font-weight:bold;
}
/* hover ‫*شيفرة ُمحتوى الشريط عند مرور مؤشر الماوس علي عنصر ُمعيه‬/
.navbar-default .navbar-nav>li>a:hover {
color: #ffd800;
}
/*‫*شيفرة عنوان الموقع‬/
.navbar-default .navbar-brand {
color: #fff;
font-family:Old English Text MT;
letter-spacing:2px;
font-size:16pt;
}
/*‫*شيفرة عنوان الموقع عند مرور مؤشر الماوس عليه‬/
.navbar-default .navbar-brand:hover {
color:#fffa00;
}
/* active ‫* شيفرة الكالس‬/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-
nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
{
color: #fff;
background-color: #1657a5;
}
Tab Control ‫أداة انتبويباث‬
<body>
<div class="row">
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab"> Home</a></li>
<li><a href="#Download" data-toggle="tab">Downlaod</a></li>
<li><a href="#Contact" data-toggle="tab">Contact</a></li>
<li><a href="#About_us" data-toggle="tab">Who We Are</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Welcome in Home Page</h2>
</div>
<div id="Download" class="tab-pane fade">
<h2>Welcome in Download Page</h2>
</div>
<div id="Contact" class="tab-pane fade">
<div><br /><a href="#"><img src="image/facebook.png" width="50" height="50"/></a>
<br /><a href="#">www.facebook.com/rasul.hassan</a></div>
<div><br /><a href="#"><img src="image/youtube.png" width="50" height="50"/></a>

<br /><a href="#">www.youtube.com/rasul.hassan</a></div>
<div><br /><a href="#"><img src="image/instagram.png" width="50"

height="50"/></a>
<br /><a
href="#">www.instagram.com/rasul.hassan</a></div>
<h2>Welcome in Contact Page</h2>

</div>
<div id="About_us" class="tab-pane fade">

<br /><br />
<img src="image/MyPicture.jpg" width="150" height="150" />
<p>lorem Ipsom Site Is One Of the Sites gives you Testing
Text To Your web Site like this text. Web Site and PC application Developing in
the ¯elds of nuclear engineering, oil rig platform o®shore design, oil reser-
voir engineering, and steel industry. All of these include working in dierent
international
environments
.</p>
<h2>Welcome in Abou us Page</h2>
</div>
</div>
</div>
</div>
</div>
</body>
<li>
<a href="#home" data-toggle="tab">
<img src="image/home-icon.png" width="30" height="30" /> Home
</a>
</li>
<li>
<a href="#Download" data-toggle="tab">
<img src="image/Download-Button.png" width="80" height="30"/> Downlaod
</a>
</li>
<li>
<a href="#Contact" data-toggle="tab">
<img src="image/Social_Icon.gif" width="30" height="30"/> Contact
</a>
</li>
<li>
<a href="#About_us" data-toggle="tab">
<img src="image/support%20(2).png" width="30" height="30"/> Who We Are
</a>
</li>
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {

color: #fff;
cursor: default;
background-color: #321984;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
Panel Group ‫ وأداة‬SlideShow ‫انساليدز‬
<body>
<div class="row">
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="image/1.png"/>
<div class="carousel-caption">
<h2>Welcome To Our WebSite</h2>
<div class="slide_paragrap_background">
<p>Description for First SlideShow Image</p>
</div>
</div>
</div>
<div class="item">
<p>Description for Second SlideShow Image</p>
</div>
</div>
</div>
<div class="item">
<p>Description for Third SlideShow Image</p>
</div>
</div>
</div>
<div class="item">
<div class="slide_paragrap_background"/>
<p>Description for Forth SlideShow Image</p>
</div>
</div>
</div>

<a class="left carousel-control" href="#slider" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slider" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</body>
<body>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="panel-group" id="acoordion">

<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">
<a data-toggle="collapse" data-parent="#acoordion" href="#one">
Panel One <span class="glyphicon glyphicon-film"></span>
</a>
</h2>
</div>
<div class="panel-collapse collapse in" id="one">
<div class="panel-body">
This Is Content Of First Panel
</div>
</div>
</div>

<div class="panel panel-success">
<a data-toggle="collapse" data-parent="#acoordion" href="#two">
Panel Two <span class="glyphicon glyphicon-music"></span>
</a>
</h2>
</h2>
</div>
<div class="panel-collapse collapse" id="two">
This Is Content Of Second Panel
</div>
</div>
</div>

<div class="panel panel-danger">
<a data-toggle="collapse" data-parent="#acoordion" href="#three">
Panel Three
</a>
</h2>
</div>
<div class="panel-collapse collapse" id="three">
This Is Content Of Third Panel
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
.panel-success>.panel-heading {
color: #ffffff;
background-color: #bb50b9;
border-color: red;
}
.panel-danger>.panel-heading {
color: #ffffff;
background-color: #981410;
border-color: #ef5d74;
}
<body>
<div class="row">
<div class="panel-group">
<div class="panel-heading"><h1>Title</h1></div>
<div class="embed-responsive embed-responsive-16by9">
<video src="TestingVideo.mp4" controls="controls" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<iframe src="//www.youtube.com/video_url" width="1280" height="720"></iframe>
<body>
<div class="row">
<div class="panel-heading"><h1>Video 1</h1></div>
<video src="Testing.mp4" controls="controls" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>

Bootstrap PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Bootstrap PDF

Transféré par

Droits d'auteur :

Formats disponibles

‫وُبرة عه تقىيت ‪Bootstrap‬‬

‫حتميم وتضمني املكتبت ضمه املشسوع‬

<link href="css/bootstrap.min.css" rel="stylesheet" />

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-

<link href="css/bootstrap.min.css" rel="stylesheet" />

<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-1 col-md-1 col-sm-4 col-xs-12">

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">

‫موضع املُحاذاة‬ ‫انكالض‬

<span class="glyphicon glyphicon-search" ></span>

‫نون انصز‬ ‫انكالض‬

<p>Bootstrap Buttons Colors</p>

<label for="PasswordText">Your Password:</label>

<label for="notes">put your notes:</label>

<div class="form-group has-warning has-feedback">

<div class="form-group has-error has-feedback">

<table class="table table-bordered">

navbar ‫شسيط انتصفح انعهوي‬

<div><br /><a href="#"><img src="image/youtube.png" width="50" height="50"/></a>

<div><br /><a href="#"><img src="image/instagram.png" width="50"

<h2>Welcome in Contact Page</h2>

<div id="About_us" class="tab-pane fade">

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {

<iframe src="//www.youtube.com/video_url" width="1280" height="720"></iframe>

Vous aimerez peut-être aussi