+ All Categories
Home > Internet > Bootstrap and the future of styling

Bootstrap and the future of styling

Date post: 23-Aug-2014
Category:
Upload: joao-ferreira
View: 186 times
Download: 3 times
Share this document with a friend
Description:
@Ana Sampaio and @João Ferreira talked about "Bootstrap and the future of styling" at Microsoft WebCamp: Lisbon 2014
Popular Tags:
115
Transcript
Page 1: Bootstrap and the future of styling
Page 2: Bootstrap and the future of styling
Page 3: Bootstrap and the future of styling

Page 4: Bootstrap and the future of styling
Page 5: Bootstrap and the future of styling
Page 6: Bootstrap and the future of styling
Page 7: Bootstrap and the future of styling
Page 8: Bootstrap and the future of styling
Page 9: Bootstrap and the future of styling
Page 10: Bootstrap and the future of styling
Page 11: Bootstrap and the future of styling
Page 12: Bootstrap and the future of styling
Page 13: Bootstrap and the future of styling

Page 14: Bootstrap and the future of styling

Page 15: Bootstrap and the future of styling
Page 16: Bootstrap and the future of styling
Page 17: Bootstrap and the future of styling
Page 18: Bootstrap and the future of styling
Page 19: Bootstrap and the future of styling
Page 20: Bootstrap and the future of styling
Page 21: Bootstrap and the future of styling
Page 22: Bootstrap and the future of styling
Page 23: Bootstrap and the future of styling
Page 24: Bootstrap and the future of styling
Page 25: Bootstrap and the future of styling
Page 26: Bootstrap and the future of styling
Page 27: Bootstrap and the future of styling
Page 28: Bootstrap and the future of styling
Page 29: Bootstrap and the future of styling
Page 30: Bootstrap and the future of styling
Page 31: Bootstrap and the future of styling
Page 32: Bootstrap and the future of styling
Page 33: Bootstrap and the future of styling
Page 34: Bootstrap and the future of styling
Page 35: Bootstrap and the future of styling
Page 36: Bootstrap and the future of styling
Page 37: Bootstrap and the future of styling
Page 38: Bootstrap and the future of styling
Page 39: Bootstrap and the future of styling
Page 40: Bootstrap and the future of styling
Page 41: Bootstrap and the future of styling
Page 42: Bootstrap and the future of styling
Page 43: Bootstrap and the future of styling
Page 44: Bootstrap and the future of styling
Page 45: Bootstrap and the future of styling
Page 46: Bootstrap and the future of styling
Page 47: Bootstrap and the future of styling
Page 48: Bootstrap and the future of styling

<div class="row">

<div class="col-md-8"><!--Info--></div>

<div class="col-md-4"><!--Register--></div>

</div>

<div class="row">

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

<!--Map-->

</div>

<div class="col-md-8">

<!--Details and Schedule-->

</div>

</div>

Page 49: Bootstrap and the future of styling

<div class="row">

<div class="col-md-8"><!--Info--></div>

<div class="col-md-4"><!--Register--></div>

</div>

<div class="row">

<div class="col-md-4 col-md-push-8">

<!--Map-->

</div>

<div class="col-md-8 col-md-pull-4">

<!--Details and Schedule-->

</div>

</div>

Page 51: Bootstrap and the future of styling
Page 52: Bootstrap and the future of styling
Page 53: Bootstrap and the future of styling
Page 55: Bootstrap and the future of styling
Page 56: Bootstrap and the future of styling
Page 57: Bootstrap and the future of styling
Page 59: Bootstrap and the future of styling
Page 60: Bootstrap and the future of styling
Page 62: Bootstrap and the future of styling
Page 63: Bootstrap and the future of styling
Page 64: Bootstrap and the future of styling
Page 65: Bootstrap and the future of styling
Page 67: Bootstrap and the future of styling
Page 68: Bootstrap and the future of styling
Page 69: Bootstrap and the future of styling
Page 70: Bootstrap and the future of styling
Page 72: Bootstrap and the future of styling
Page 73: Bootstrap and the future of styling
Page 74: Bootstrap and the future of styling
Page 75: Bootstrap and the future of styling
Page 76: Bootstrap and the future of styling
Page 77: Bootstrap and the future of styling
Page 78: Bootstrap and the future of styling
Page 79: Bootstrap and the future of styling
Page 81: Bootstrap and the future of styling
Page 82: Bootstrap and the future of styling
Page 84: Bootstrap and the future of styling
Page 85: Bootstrap and the future of styling

.img-responsive {

max-width: "100%";

height: "auto";

}

Page 87: Bootstrap and the future of styling
Page 88: Bootstrap and the future of styling
Page 89: Bootstrap and the future of styling
Page 90: Bootstrap and the future of styling
Page 91: Bootstrap and the future of styling
Page 92: Bootstrap and the future of styling
Page 94: Bootstrap and the future of styling
Page 95: Bootstrap and the future of styling
Page 96: Bootstrap and the future of styling
Page 97: Bootstrap and the future of styling

Page 98: Bootstrap and the future of styling

Page 99: Bootstrap and the future of styling
Page 100: Bootstrap and the future of styling

//Close button in alerts

<button type="button" class="close" data-dismiss="alert">

&times;

</button>

//Close button in modals<button type="button" class="close" data-dismiss="modal">

&times;

</button>

Page 101: Bootstrap and the future of styling
Page 102: Bootstrap and the future of styling
Page 103: Bootstrap and the future of styling

//Media queries for an individual componente

//envisioned by @jon_neal

.widget:media(max-width: 300px) {

font-size: 14px;

}

.widget:media(max-width: 900px) {

font-size: 18px;

}

Page 104: Bootstrap and the future of styling
Page 105: Bootstrap and the future of styling
Page 106: Bootstrap and the future of styling
Page 107: Bootstrap and the future of styling
Page 110: Bootstrap and the future of styling
Page 111: Bootstrap and the future of styling
Page 112: Bootstrap and the future of styling

Page 114: Bootstrap and the future of styling
Page 115: Bootstrap and the future of styling

Recommended