Goal: Add Bootstrap to the cell line catalog page.
Here's what I have learned so far:
Use Bootstrap default settings and do any additional formatting using your own CSS files:<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
This is super simple, straight from http://getbootstrap.com/getting-started/ . Just add these links and script file to your index.html the same way any other style sheet and you have access to all of the bootstrap default settings. Similarly you can download the compiled Bootstrap files and include them that way.
Use Bootstrap to create a theme:
I hadn't used Less before, but I was able to start playing around with the setup. Bootstrap uses Less variables to set up a theme. In order to edit them you need to be able to compile the new .css code.
I mostly followed the steps on this website, although I had to make a few changes since this is 2 years old.
1 Comment
|
Categories
All
|