069yass
There are also some secondary classes we can include to add a bit of extra pizzazz to our table :
• table-bordered: includes a border around all sides of the table and all cells.
• table-striped: adds a grey background to alternating rows to make it easier to read.
• table-hover: changes the background of the row when hovered upon.
• table-condensed: removes some of the top and bottom padding, making it take up less vertical height.
Apart from these classes, there are also some classes that can be applied to rows or cells specifically, which color the background of the rows to give it some context:
• active: adds the hover state to the row
• success: colors the background green, indicating a successful action
• info: uses below to draw attention to the row or cell
• warning: indicates that an action may be required and colors the cell yellow
• danger: demonstrates an error or problem
For now, I’m just going to add the table-striped class, but it’s up to you if you want to experiment with some of the other included classes.
Our table is beginning to look great. You’ll notice, however, that on smaller screen sizes the table is cut off horizontally. To combat this, we need to wrap our table in another element that will allow it to scroll at smaller sizes:
<div class= »table-responsive »>
…
</div>
That’s much better, as our content is no longer getting cut off or breaking our responsive layout. The last thing I want to do to our table is turn that view link into a button. Bootstrap comes with a plethora of button styles that we can take advantage of.
All buttons are combinations of the following classes:
• Default button class
• Context class
• Size class
Together, these give us all the control we need to pick the right button for the right occasion. Let’s put these together to create a button that works within our table:
<a href= »# » class= »btn btn-default btn-xs »>View</a>
Our first class here provides some default button styles; the second gives it color (in this case, the default is white), and the final class defines the size of the button.
Alternatively, we could have used one of the following classes to change the color of our button:
Class Name Description
btn-default
White button with a grey border
btn-primary
Blue button
btn-success
Green button
btn-info
Light blue button
btn-warning
Orange button
btn-danger
Red button
btn-link
Styled to look like a link
Apart from providing the default size, there are also three classes we can utilize to change the size of our buttons. In the preceding code, we’ve already used btn-xs to make our button really small, but we could have also used btn-sm to make it a little smaller than the default or btn-lg to make it larger.
Our Index view is looking pretty complete to me now, and it’s ready to be populated when we’re ready. Let’s take a look at the finished product, as seen in the following image
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Learning web development with bootstrap and angularJS (3,28 MO) (Cours PDF)
