Twitter Bootstrap Telerik Software Academy .
-
date post
24-Dec-2015 -
Category
Documents
-
view
225 -
download
0
Transcript of Twitter Bootstrap Telerik Software Academy .
![Page 2: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/2.jpg)
Table of Contents
• Twitter Bootstrap• Grid System• Default CSS styles• Form• Buttons• Tables
![Page 3: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/3.jpg)
Twitter Bootstrap
![Page 4: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/4.jpg)
Bootstrap 3
• Twitter Bootstrap• Download at: http://getbootstrap.com/• Responsive down to mobile• Complete CSS framework• Feature-rich• A lot of themes (free and paid)• Easy to use• There is also a famous 2.3.2 version
![Page 5: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/5.jpg)
Bootstrap 3
• Twitter Bootstrap Installation• Download at: http://getbootstrap.com/• Add bootstrap.min.css to your HTML• Add jQuery to your HTML• Add bootstrap.min.js below jQuery• Done!
![Page 6: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/6.jpg)
Bootstrap 3
• Grid system• 12 column-based grid system• .container class for grid wrapper• .row class for rows• .col-md-# for columns
• Examples• http://getbootstrap.com/examples/grid/
![Page 7: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/7.jpg)
Bootstrap 3.0
• Grid system options
![Page 8: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/8.jpg)
Bootstrap Grid Example
• Example
<div class="container"> <div class="row"> <div class="col-md-4"> <div class="border">1/3</div> </div> <div class="col-md-8"> <div class="border">2/3</div> </div> </div></div>
![Page 9: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/9.jpg)
Bootstrap GridLive Demo
![Page 10: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/10.jpg)
Bootstrap 3
• Default Typography• Headings• Paragraphs (can add class .lead)• <small>, <em>, <strong>• Built-in alignment classes
• .text-left• .text-center• .text-right
![Page 11: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/11.jpg)
Bootstrap 3
• Default Typography – text colors• .text-muted – grey• .text-primary – light blue• .text-success – green• .text-info – dark blue• .text-warning – yellow• .text-danger – red
![Page 12: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/12.jpg)
Bootstrap TypographyLive Demo
![Page 13: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/13.jpg)
Bootstrap 3
• Tables - on <table> elements• .table – default table• .table-striped – every second row is colored• .table-bordered – adds border to a table• .table-hover – adds hover element to a table• .table-condensed – makes the table compact
• Tables – on <tr> and <td> elements• .active, .success, .warning, .danger
![Page 14: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/14.jpg)
Bootstrap TablesLive Demo
![Page 15: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/15.jpg)
Bootstrap 3
• Forms• Add .form to the <form> element• Add .form-control to all form elements• Group them with .form-group
• Buttons• .btn for buttons• .btn-primary, .btn-danger, … for colors• .btn-lg, btn-sm, btn-xs for sizes
![Page 16: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/16.jpg)
Bootstrap Forms and Buttons
Live Demo
![Page 17: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/17.jpg)
Bootstrap 3
• Images• .img-rounded – for image with round edges• .img-circle – for image as circle• .img-thumbnail – adds small border
• Helper classes• Close icon - .close on any button• Quick float - .pull-left, .pull-right
![Page 18: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/18.jpg)
Bootstrap ImagesLive Demo
![Page 19: Twitter Bootstrap Telerik Software Academy .](https://reader035.fdocuments.us/reader035/viewer/2022062216/56649dc65503460f94ab9aba/html5/thumbnails/19.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиране
Николай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
Twitter Bootstrap
http://academy.telerik.com