User Tools

Site Tools


website:bootstrap

To make the homepage a little more interesting to look out, I thought' I'd have a look into bootstrap as a framework. The plan is to do more with it over time, but for now using it like this is a placeholder/reminder.

To get the latest version, just Download Bootstrap.

Also, quick shout out for vim settings for indenting (I never remember them): Tab key == 4 spaces and auto-indent after curly braces in Vim

Shell commands used

# Edit .vimrc, for indentation: https://stackoverflow.com/questions/234564/tab-key-4-spaces-and-auto-indent-after-curly-braces-in-vim
vi ~/.vimrc
 
#Install the unzip command
sudo apt-get install unzip
 
# Create a backup location and backup existing index page
mkdir -p backup/homepage
cp /var/www/html/index.html backup/homepage/.
 
# Get the latest code and extract the archive (note: file name will change over tiem)
cd /var/www/
wget https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta.3/bootstrap-4.0.0-beta.3-dist.zip
unzip bootstrap-4.0.0-beta.3-dist.zip
rm bootstrap-4.0.0-beta.3-dist.zip
 
#Edit the index.html file using the template in the getting started documentation: http://getbootstrap.com/docs/4.0/getting-started/introduction/
vi index.html

My homepage using the basic template

index.html
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- Bootstrap CSS -->
        <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">
 
        <title>Roman-Halliday.com</title>
    </head>
    <body>
        <div class="container-fluid">
        <h1>Personal Homepage</h1>
        <p>More stuff:
            <ul>
                <li><a href="http://datablog.roman-halliday.com">datablog.roman-halliday.com</a></li>
                <li><a href="http://wiki.roman-halliday.com">wiki.roman-halliday.com</a></li>
                <li><a href="http://romanian.roman-halliday.com">romanian.roman-halliday.com</a></li>
            </ul>
        </p>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
    </body>
</html>
website/bootstrap.txt · Last modified: 2018/01/13 15:40 by david