Scribd Logo
Upload

Welcome to Scribd!

  • Operation Sheet 2.1

    Uploaded by

    Markos Mathewos
    3 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    3 views2 pages

    Operation Sheet 2.1

    Uploaded by

    Markos Mathewos

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 2

    Learning Guide 2 – Using Advanced Bootstrap Technology

    Operation Sheet 2 Advanced Bootstrap Technology

    Creating and Designing a Login Form using Customized Bootstrap

    1. Create your own folder under C:\xampp\htdocs\


    2. Copy the following folders (bootstrap CSS and JavaScript) under the folder you created.
    - data
    - dist
    - js
    - less
    - vendor
    3. Create a new php file using your Dreamweaver and save it as index.php inside the folder you created.
    4. Insert the line of code below the <meta charset="utf-8"> tag.

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

    5. After your </title> tag, link the following CSS.

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

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

    <link href="vendor/bootstrap-social/bootstrap-social.css" rel="stylesheet">

    <link href="dist/css/customized.css" rel="stylesheet">

    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    6. After the </body> tag, add the following scripts.

    <script src="vendor/jquery/jquery.min.js"></script>

    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <script src="vendor/metisMenu/metisMenu.min.js"></script>

    <script src="dist/js/customized.js"></script>

    Course Title: Author: Tesfaye Yirga Page 1


    Advanced Web Technology October 2024
    Learning Guide 2 – Using Advanced Bootstrap Technology
    Operation Sheet 2 Advanced Bootstrap Technology

    7. Insert the following html tags inside the <body> ….</body> tags.

    <div class="container">
    <div class="row">
    <div class="col-md-4">

    <!-- Here you will put the Panel -->

    </div>
    </div>
    </div>

    8. Designing the Panel. Insert the following tags inside the <div class="col-md-4">

    <div class="panel panel-default">


    <div class="panel-heading">Please Sign-In</div>
    <div class="panel-body">
    <form>

    </form>
    </div>
    <div class="panel-footer">Please type your Username and Password</div>
    </div>

    9. Inserting the Username label and textbox. Insert the following tags inside the <form> tag.

    <div class="form-group">
    <label for="Username"> Username:</label>
    <input type="text" class="form-control" name="txtUsername" placeholder="Enter Username">
    </div>

    10. Inserting the Password label and textbox. Insert the following tags after the username group.

    <div class="form-group">
    <label for=" Password "> Password:</label>
    <input type="password" class="form-control" name="txtPassword" placeholder="Enter Password">
    </div>

    11. Inserting the Submit and Reset Button. Insert the following tags after the password group.

    <div class="form-group">
    <button type="submit" class="btn btn-default" name="submit">Submit</button>
    <button type="reset" class="btn btn-default" name="reset">Reset</button>
    </div>

    Course Title: Author: Tesfaye Yirga Page 2


    Advanced Web Technology October 2024

    You might also like