Botstrap Exercise

minisoft
Home Work-1
HomeWork1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home Work 1</title>
<link rel="stylesheet" href="style/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class ="navbar navbar-expand-sm navbar-dark bg-dark p-0 ">

<div class="container">
<ul class="navbar-nav">
<a href="HomeWork1.html" class="navbar-brand">Blogen</a>
<button class="navbar-toggler" data-toggle="collapse" data-
target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse"></div>
<li class = "nav-item px-2"><a href="HomeWork1.html" class="nav-link active"
>Dashboard</a></li>
P a g e 1 | 37
minisoft
<li class = "nav-item px-2"><a href="Post.html" class="nav-link"

>Post</a></li>
<li class = "nav-item px-2"><a href="Category.html" class="nav-link
">Category</a></li>
<li class = "nav-item px-2"><a href="Users.html" class="nav-link"
>Users</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class = "nav-item dropdown mr-3">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i> Welcome Bard</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<i class="fa fa-user-circle"></i>Profile</a>
<a class="dropdown-item" href="setting.html">
<i class="fa fa-cog"></i>Setting</a>
</div>
</li>
<li class = "nav-item">
<a class="nav-link" href="login.html">
<i class="fa fa-user-times"></i>Logout</a>
</li>
</ul>
</div>
</nav>

<header class="py-2 bg-primary text-white" id="main-header">
<div class="row">
<div class="col-md-6">
<h1><i class="fa fa-cog"></i> Dashboard</h1>
</div>
</div>
</div>
</header>

<section id="action" class="py-4 bg-light">
<div class="row">
<div class="col-md-3 text-center">
<a href="#" class="btn-primary btn-block" data-toggle="modal" data-
target="#addPostModal">
<i class="fa fa-plus "></i> Add Post
</a>
</div>
<a href="#" class="btn-success btn-block text-dark" data-
toggle="modal" data-target="#addCategoryModal">
<i class="fa fa-plus"></i> Add Category
</a>
</div>
<a href="#" class="btn-warning btn-block" data-toggle="modal" data-
target="#addUserModal">
<i class="fa fa-plus"></i> Add User
</a>
</div>
</div>
</div>
</section>

<section id="posts">
P a g e 2 | 37
minisoft
<div class="row">
<div class="card">
<div class="card-header">
<h4>Latest Posts</h4>
</div>
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>Title</th>
<th>Category</th>
<th>Date </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Post One</td>
<td>Web Development</td>
<td>May 10 2018</td>
<td>
<a href="details.html" class="btn btn-secondary">
<i class="fa fa-angle-double-right"></i>Details
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Post Two</td>
<td>Tech Gadgets</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Post Three</td>
<td>Business</td>
<td>May 13 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>4</td>
<td>Business</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
P a g e 3 | 37
minisoft
<td>5</td>
<td>Post Five</td>
<td>May 17 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>6</td>
<td>Post Six</td>
<td>Health & Wellness</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card text-center bg-primary text-white mb-3">
<div class="card-body">
<h3>Posts</h3>
<h4 class="display-4">
<i class="fa fa-pencil"></i> 6
</h4>
<a href="post.html" class="btn btn-outline-light btn-sm">View</a>
</div>
</div>
<div class="card text-center bg-success text-white mb-3">
<h3>Category</h3>
<i class="fa fa-folder"></i> 4
</h4>
<a href="categories.html" class="btn btn-outline-light btn-sm">
View</a>
</div>
</div>
<div class="card text-center bg-warning text-white mb-3">
<h3>User</h3>
<i class="fa fa-users"></i> 4
</h4>
<a href="user.html" class="btn btn-outline-light btn-sm">View</a>
</div>
</div>
</div>
</div>
</div>
</section>


<footer id="main-footer" class="bg-dark text-white mt-5 p-5">
<div class="row">
P a g e 4 | 37
minisoft
<div class="col">
<p class="lead text-center">Copyright ©<span id="year"></span>
2018 Bloge
</p>
</div>
</div>
</div>
</footer>


<div class="modal fade " id="addPostModal" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title" >Add Post</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form >
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title">
</div>
<label for="category">Category</label>
<select class="form-control" id="category">
<option value="" >Web Development</option>
<option value="" >Tech Gasgets</option>
<option value="" >Business</option>
<option value="" >Health & Wellness</option>
</select>
</div>
<label for="image">Upload Image</label>
<div class="custom-file">
<input type="file" class="custom-file-input" id="image">
<label for="image" class="custom-file-label"></label>
</div>
<small class="form-text text-mute">maxsize 3md</small>
</div>
<label for="body">Body</label>
<textarea name="editor1" class="form-control" id="body">
</textarea>
<script>
// $('#year').text(new Date().getFullYear());
CKEDITOR.replace( 'editor1' );
</script>
</div>
</form>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Save Change
</button>
</div>
</div></div></div></div>

<div class="modal fade " id="addCategoryModal" >
P a g e 5 | 37
minisoft
<div class="modal-header bg-success text-white">

<h5 class="modal-title" >Add Category</h5>
<span>×</span>
</button>
</div>
<form >
<input type="text" class="form-control">
</div>
</form>
<button class="btn btn-success" data-dismiss="modal">Save
Change</button>
</div>
</div>
</div>
</div>
</div>

<div class="modal fade " id="addUserModal" >
<div class="modal-header bg-warning text-white">
<h5 class="modal-title" >Add User</h5>
<span>×</span>
</button>
</div>
<form >
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name">
</div>
<label for="email">Email</label>
<input type="email" class="form-control" id="email">
</div>
<label for="Password">Password</label>
<input type="password" class="form-control" id="Password">
</div>
<label for="password">Confirm Password</label>
<input type="password" class="form-control">
</div>
</form>
<button class="btn btn-warning" data-dismiss="modal">
Save Change </button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
P a g e 6 | 37
minisoft
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
</body>
</html>
Post.html
Coding
<body>
<div class="container ">
<li class = "nav-item px-2"><a class="nav-link "
href="HomeWork1.html">Dashboard</a></li>
<li class = "nav-item px-2"><a class="nav-link active"
href="Post.html">Post</a></li>
href="Category.html">Category</a></li>
<li class = "nav-item px-2"><a class="nav-link"
href="Users.html">Users</a></li>
</ul>
<li class = "nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
P a g e 7 | 37
minisoft
<i class="fa fa-user "></i> Welcome</a>

<a class="dropdown-item" href="Profile.html">
<i class="fa fa-user-plus"></i>Profile</a>
</div>
</li>
</li>
</ul>
</div>
</nav>

<div class="row">
<h1><i class="fa fa-pencil"></i> Post</h1>
</div>
</div>
</div>
</header>

<section id="search" class="py-4 bg-light">
<div class="row">
<div class="col-md-6 ml-auto">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search Posts...">
<div class="input-group-append">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</section>

<div class="row">
<div class="col">
<div class="card">
</div>
<tr>
<th>#</th>
<th>Title</th>
<th>Category</th>
<th>Date </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Post One</td>
P a g e 8 | 37
minisoft
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Post Two</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Post Three</td>
<td>Business</td>
<td>May 13 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>4</td>
<td>Post Four</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>5</td>
<td>Post Five</td>
<td>May 17 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>6</td>
<td>Post Six</td>
<td>May 10 2018</td>
<td>
</a>
</td></tr> </tbody>
P a g e 9 | 37
minisoft
</table>

<nav class="ml-4">
<ul class="pagination">
<li class="page-item disabled">
<a href="#" class="page-link">Previous</a>
</li>
<li class="page-item active">
<a href="#" class="page-link">1</a>
</li>
</li>
</li>
<a href="#" class="page-link">Next</a>
</li>
</ul>
</nav>
</div>
</div> </div></div></div>
</section>

<div class="row">
<div class="col">
2018 Bloge
</p>
</div>
</div>
</div>
</footer>
Category.html
P a g e 10 | 37
minisoft
Coding
<body>
</ul>
</div>
</li>
</li>
</ul>
</div>
</nav>

<header class="py-2 bg-primary text-white bg-success" id="main-header">
<div class="row">
<h1><i class="fa fa-folder"></i> Category</h1>
</div>
</div>
</div>
</header>

<div class="row">
<input type="text" class="form-control" placeholder="Search Category...">
<button class="btn btn-success">Search</button>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="category">
<div class="row">
P a g e 11 | 37
minisoft
<div class="col">
<div class="card">
<h4>Latest Categories</h4>
</div>
<tr>
<th>#</th>
<th>Title</th>
<th>Date </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>May 1 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Business </td>
<td>May 13 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>4</td>
<td>May 15 2018</td>
<td>
</a>
</td>
</tr>
</tbody>
</table>

<nav class="ml-4">
</li>
P a g e 12 | 37
minisoft

</li>
</li>
</li>
</li>
</ul>
</nav>
</div> </div></div></div></div>
</section>

<div class="row">
<div class="col">
2018 Bloge
</p>
</div>
</div>
</div>
</footer>
User.html
Code
<body>
P a g e 13 | 37
minisoft

</ul>
</div>
</li>
</li>
</ul>

</div>
</nav>

<header class="py-2 bg-warning text-white" id="main-header">
<div class="row">
<h1><i class="fa fa-users"></i> Users</h1>
</div>
</div>
</div>
</header>

<div class="row">
<input type="text" class="form-control" placeholder="Search
Users...">
<button class="btn btn-warning">Search</button>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="users">
<div class="row">
<div class="col">
<div class="card">
<h4>Latest Users</h4>
</div>
P a g e 14 | 37
minisoft
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>jdoe@gmail.com</td>
<td>
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Harry White</td>
<td>harry@yahoo.com</td>
<td>
</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Marry Johson</td>
<td>marry@gmail.com</td>
<td>
</a>
</td>
</tr>
</tbody>
</table>
</div> </div></div> </div> </div>
</section>

<div class="row">
<div class="col">
2018 Bloge
</p>
</div>
</div>
</div>
</footer>
P a g e 15 | 37
minisoft
Detail.html
Code
<body>
</ul>
</div>
</li>
</li>
</ul>

</div>
</nav>

P a g e 16 | 37
minisoft

<div class="row">
<h1><i class="fa fa-pencil"></i> Post One</h1>
</div>
</div>
</div>
</header>

<div class="row">
<a href="HomeWork1.html" class="btn-light btn-block">
<i class="fa fa-arrow-left "></i> Back To Dashboard
</a>
</div>
<a href="HomeWork1.html" class="btn-success btn-block ">
<i class="fa fa-check"></i> Save Changes
</a>
</div>
<a href="HomeWork1.html" class="btn-danger btn-block" >
<i class="fa fa-trash"></i> Delete Post
</a>
</div>
</div>
</div>
</section>

<section id="details" class="py-4 bg-light">
<div class="row">
<div class="col">
<div class="card">
<h4>Edit Post</h4>
</div>
<form action="">
<input type="text" class="form-control" value="Post One">
</div>
<select class="form-control">
<option value="" selected>Web Development</option>
</select>
</div>
<input type="file" class="custom-file-input">
</div>
</div>
P a g e 17 | 37
minisoft
<textarea name="editor1" class="form-control">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Repellat culpa nam cumque voluptatum. Possimus recusandae porro architecto
offifiis illo dignissimos ratione aut offifia Possimus recusandae porro architecto
offifiis illo dignissimos ratione aut offifia Possimus recusandae porro architecto
offifiis illo dignissimos ratione aut offifia
</textarea>
<script>
</script>
</div>
</form>
</div> </div> </div> </div> </div>
</section>

<div class="row">
<div class="col">
<div class="card">
</div>
<tr>
<th>#</th>
<th>Title</th>
<th>Category</th>
<th>Date </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Post One</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Post Two</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>3</td>
P a g e 18 | 37
minisoft
<td>Post Three</td>
<td></td>
<td>May 13 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>4</td>
<td>Business</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>5</td>
<td>Post Five</td>
<td>May 17 2018</td>
<td>
</a>
</td>
</tr>
<tr>
<td>6</td>
<td>Post Six</td>
<td>May 10 2018</td>
<td>
</a>
</td>
</tr>
</tbody>
</table>

<nav class="ml-4">
</li>
</li>
</li>
</li>
</li>
</ul>
P a g e 19 | 37
minisoft
</nav>
</div>
</div> </div> </div> </div>
</section>

<div class="row">
<div class="col">
2018 Bloge
</p>
</div>
</div>
</div>
</footer>
Profile.html
Coding
<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>
</head>
<body>
<button class="navbar-toggler" data-toggle="collapse" data-
target="#navbarCollapse">
P a g e 20 | 37
minisoft
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse"></div>
<li class = "nav-item px-2"><a href="HomeWork1.html" class="nav-link"
>Dashboard</a></li>
<li class = "nav-item px-2"><a href="Post.html" class="nav-link"
>Post</a></li>
<li class = "nav-item px-2"><a href="Category.html" class="nav-link
">Category</a></li>
<li class = "nav-item px-2"><a href="Users.html" class="nav-link"
>Users</a></li>
</ul>
<li class = "nav-item dropdown mr-3">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i> Welcome Bard</a>
<a class="dropdown-item" href="#">
<i class="fa fa-user-circle"></i>Profile</a>
</div>
</li>
</li>
</ul>
</div>
</nav>

<div class="row">
<h1><i class="fa fa-user"></i>Profile</h1>
</div>
</div>
</div>
</header>

<div class="row">
<a href="HomeWork1.html" class="btn-light btn-block" >
<i class="fa fa-arrow-left "></i> Back to Dashboard
</a>
</div>
<a href="#" class="btn-success btn-block text-dark" >
<i class="fa fa-lock"></i> Change Password
</a>
</div>
<a href="#" class="btn-danger btn-block" >
<i class="fa fa-trash"></i> Delete Account
</a>
</div>
</div>
</div>
</section>

P a g e 21 | 37
minisoft
<section id="profile">
<div class="row">
<div class="card">
<h4>Edit Profile</h4>
</div>
<form action="">
<label for="name">Name</label>
<input type="text" class="form control" value="Bard
Traversy">
</div>
<input type="email" class="form control"
value="test@test.com">
</div>
<label for="bio">Bio</label>
<textarea type="text" class="form control"
name="editor1">Bootstrap is an open source toolkit for developing with HTML,
CSS, and JS. Quickly ... Take Bootstrap 4 to the
next level with official premium themes—toolkits built on Bootstrap
with new components and plugins, docs, and build
tools.</textarea>
</div>
</form>
</div>
</div>
</div>
<h3>Your Avatar</h3>
<img src="image/passport.png" alt="" class="d-block img-fluid mb-3">
<button class="btn btn-primary">Edit Image</button>
<button class="btn btn-danger">Delete Image</button>
</div>
</div>
</div>
</section>

<div class="row">
<div class="col">
2018 Bloge
</p>
</div>
</div>
</div>
</footer>

P a g e 22 | 37
minisoft

<span>×</span>
</button>
</div>
<form >
</div>
</select>
</div>
</div>
</div>
<textarea name="editor1" class="form-control"
id="body"></textarea>
<script>
</script>
</div>
</form>
<button class="btn btn-primary" data-dismiss="modal">Save
Change</button>
</div>
</div>
</div>
</div>
</div>
<span>×</span>
</button>
</div>
<form >
</div>
P a g e 23 | 37
minisoft
</form>
Change</button>
</div>
</div>
</div>
</div>
<span>×</span>
</button>
</div>
<form >
</div>
</div>
</div>
</div>
</form>
<button class="btn btn-warning" data-dismiss="modal">Save
Change</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/
popper.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" >
</script>
</body>
</html>
P a g e 24 | 37
minisoft
Login.html
Coding
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<script src="https://cdn.ckeditor.com/4.12.1/standard/ckeditor.js"></script>

</head>
<body>

</div>
</nav>

<div class="row">
<h1><i class="fa fa-user"></i> Blogen Admin</h1>
</div>
</div>
</div>
</header>
P a g e 25 | 37
minisoft

<div class="row">
<a href="#" class="btn-primary btn-block" data-toggle="modal" data-
target="#addPostModal">
<i class="fa fa-plus "></i> Add Post
</a>
</div>
<a href="#" class="btn-success btn-block text-dark" data-
toggle="modal" data-target="#addCategoryModal">
<i class="fa fa-plus"></i> Add Category
</a>
</div>
<a href="#" class="btn-warning btn-block" data-toggle="modal" data-
target="#addUserModal">
<i class="fa fa-plus"></i> Add User
</a>
</div>
</div>
</div>
</section>

<section id="login">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card">
<h4>Account Login</h4>
</div>
<form action="HomeWork1.html">
</div>
<label for="password">Password</label>
</div>
<input type="submit" value="Login" class="btn btn-primary
btn-block">
</form>
</div>
</div>
</div>
</div>
</div>
</section>

<div class="row">
<div class="col">
2018 Bloge
</p>
P a g e 26 | 37
minisoft
</div>
</div>
</div>
</footer>


<span>×</span>
</button>
</div>
<form >
</div>
</select>
</div>
<label for="image" class="custom-file-label">Choose
File</label>
</div>
<small class="form-text text-mute">Max S ize 3md</small>
</div>
<textarea name="editor1" class="form-control"
id="body"></textarea>
<script>
</script>
</div>
</form>
<button class="btn btn-primary" data-dismiss="modal">Save
Change</button>
</div> </div> </div> </div></div>
P a g e 27 | 37
minisoft

<span>×</span>
</button>
</div>
<form >
</div>
</form>
Change</button>
</div>
</div>
</div>
</div>
<span>×</span>
</button>
</div>
<form >
</div>
</div>
</div>
</div>
</form>
<button class="btn btn-warning" data-dismiss="modal">Save
Change</button>
</div>
</div> </div> </div></div></div>
</body>
</html>
P a g e 28 | 37
minisoft
Home Work-2
P a g e 29 | 37
minisoft
Home Work-3
Home Work -4
P a g e 30 | 37
minisoft
Home Work-5
Exercise 7
Home Work-6
Home Work-8
Home Work-9
P a g e 31 | 37
minisoft
Home Work-10
Home Work-1
Home Work-2
Home Work-3
Home Work-4
Home Work-5
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<style>
body{margin:40px;}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
.btn-circle.btn-md {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 1.33;
}
P a g e 32 | 37
minisoft
</style>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="row" >
<ul class="list-group">
<li class="list-group-item active">
<button type="button" class="btn btn-primary btn-circle btn-md"
style="background-color: #0b51c5"><i class="fa fa-facebook"></i> </button>Cras justo
odio
</li>
<li class="list-group-item ">
<button type="button" class="btn btn-primary btn-circle btn-md"
style="background-color: #3aa2ff"><i class="fa fa-twitter mr-5"></i></button> Dapibus
ac facilisis in
</li>
<li class="list-group-item">
<button type="button" class="btn btn-info btn-circle btn-md"><i class="fa
fa-linkedin mr-5"></i></button> Morbi leo risus
</li>
<button type="button" class="btn btn-success btn-circle btn-md"><i
class="fa fa-leaf mr-5"></i></button> Porta ac consectetur ac
</li>
<button type="button" class="btn btn-danger btn-circle btn-md"><i
class="fa fa-youtube-play mr-5"></i></button> Vestibulum at eros
</li>
</ul>
</div>
</div>
</body>
</html>
Home Work-6
<div class="row" >
<i class="fa fa-laptop mr-5"></i> Cras justo odio
</li>
<i class="fa fa-bomb mr-5"></i>Dapibus ac facilisis in
</li>
<i class="fa fa-code mr-5"></i>Morbi leo risus
</li>
<i class="fa fa-gem mr-5"></i>Porta ac consectetur ac
</li>
<i class="fa fa-cogs mr-5"></i>Vestibulum at eros
</li>
P a g e 33 | 37
minisoft
</ul>
</div>
<div class="row">
<div class="colmd-4">
<table class="table table-bordered table-striped table-condensed">
<tbody >
<tr >
<td style="width:50px;height:50px;">
<i class="fa fa-laptop "></i></td>
<td > Cras justo odio </td>
</tr>
<tr>
<td >
<i class="fa fa-bomb"></i></td>
<td>Dapibus ac facilisis in</td>
</tr>
<tr>
<td>
<i class="fa fa-code"></i></td>
<td>Paper pulp, palm oil and rubber</td>
</tr>
<tr>
<td class="list-group-item">
<i class="fa fa-gem"></i></td>
<td>Porta ac consectetur ac</td>
</tr>
<tr>
<td >
<i class="fa fa-cogs"></i></td>
<td>Vestibulum at eros</td>
</tr>
</tbody>
</table>
</div>
</div>
Home Work-7
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" data-auto-
replace-svg></script>
</head>
<body class="container">
<span style="font-size: 3em; color: Tomato;">
<i class="fab fa-twitter"></i>
</span>
<span style="font-size: 3em; color: Dodgerblue;">
<i class="fab fa-facebook"></i>
</span>
<div class="row" >
P a g e 34 | 37
minisoft
<button type="button" class="btn btn-info"><i class="fa fa-camera"></i>
</button> Cras justo odio
</li>
<button type="button" class="btn btn-danger"><i class="fa fa-hashtag
"></i></button> Dapibus ac facilisis in
</li>
<button type="button" class="btn btn-secondary"><i class="fa fa-bell "></i>
</button> Morbi leo risus
</li>
<button type="button" class="btn btn-info"><i class="fa fa-gem"></i></button>
ac consectetur ac
</li>
<button type="button" class="btn btn-info"><i class="fa fa-cogs"></i></button>
Vestibulum at eros
</li>
</ul>
</div>
</body>
</html>
Home Work-8
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
Dapibus ac facilisis in
</li>
Morbi leo risus
</li></ul>
Home Work-9
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.3/css/bootstrap.min.css" integrity="sha384-
Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
crossorigin="anonymous">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta.3/js/bootstrap.min.js"></script>
</head>
<div class="row">
P a g e 35 | 37
minisoft
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-
list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list"
data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list"
data-toggle="list" href="#list-messages" role="tab" aria-
controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list"
data-toggle="list" href="#list-settings" role="tab" aria-
controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel"
aria-labelledby="list-home-list">
Velit.. minim.
</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-
labelledby="list-profile-list">
Cupidatat quis ..culpa commodo veniam incididunt veniam ad.
</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-
labelledby="list-messages-list">
Ut ut .. adipisicing pariatur cillum.
</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-
labelledby="list-settings-list">
Irure enim .. mollit in irure.
</div> </div> </div></div>
</div>
</body>
</html>
Home Work-10
<!DOCTYPE html>
<html lang="en">
<head>
<title>Badged</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-
/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
</head>
<body >
<div class="row">
<li class="list-group-item d-flex justify-content-between align-items-center
active">
<span class="fa fa-home ">   Home</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center"
P a g e 36 | 37
minisoft
content="Picture">
<span class=" fa fa-camera">  Picture</span>
<span class="badge badge-primary badge-pill pull-right">145</span>
</li>
">
<span class="fa fa-music">  Music</span>
</li>
">
<span class="fa fa-film">   Videos</span>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
</body>
</html>
P a g e 37 | 37

Botstrap Exercise

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Botstrap Exercise

Загружено:

Авторское право:

Доступные форматы

minisoft

<nav class ="navbar navbar-expand-sm navbar-dark bg-dark p-0 ">

<li class = "nav-item px-2"><a href="Post.html" class="nav-link"

<div class="modal-header bg-success text-white">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

<i class="fa fa-user "></i> Welcome</a>

<li class="page-item disabled">

<li class = "nav-item px-2"><a class="nav-link "

<header class="py-2 bg-primary text-white" id="main-header">

<button class="close" data-dismiss="modal">

<nav class ="navbar navbar-expand-sm navbar-dark bg-dark p-0 ">

<a href="HomeWork1.html" class="navbar-brand">Blogen</a>

<button class="close" data-dismiss="modal">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-

Вам также может понравиться