In previous post, we learnt why bootstrap? In this, let's learn how to install Bootstrap.
To download Bootstrap, go to Bootstrap's official website http://getbootstrap.com and click on Download. In current, website design you would be redirected to another webiste where there would be "Download Bootstrap" button, click on it and it will download a .zip file.
Unzip the downloaded .zip file and we would get following folders and files
Depending on a specific folder structure, we can cut-paste these files into our project.
For example, for ASP.NET MVC default project structure we can move all .css files to "~/Content" folder, .js files to "~/Scripts" folders and keep fonts folder in the root.
To use all functionality of the Bootstrap including its .js functionality that contains carousel, model, drodown and other functionality we need to use jQuery.
It is important to change the folder path (in bootstrap.css and bootstrap.min.css of css folder) of fonts files in case we are moving fonts folder to a different location inside the project.
Open above .css file and locate to below .css class and change the highlighted path accordingly.
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
Look at the highlighted path of the font files. If we are not keeping all files of three folders (css, js and fonts) into the root of the application, please change the folder path of above @font-face class for accordingly in order to work Glyphicons accordingly.Views: 1682 | Post Order: 6