Hinweis: Die linke und rechte Seiten sind jeweils der Code in HTML und das Layout im Browser.
1. Code für Normal Buttons
<button type='button' class='btn btn-default'>Default</button>
<button type='button' class='btn btn-primary'>Primary</button>
<button type='button' class='btn btn-success'>Success</button>
<button type='button' class='btn btn-info'>Info</button>
<button type='button' class='btn btn-warning'>Warning</button>
<button type='button' class='btn btn-danger'>Danger</button>
<button type='button' class='btn btn-link'>Link</button>
1. Ausgabe für Normal Buttons
2. Code für Disabled Buttons
<button type='button' class='btn btn-default disabled'>Default</button>
<button type='button' class='btn btn-primary disabled'>Primary</button>
<button type='button' class='btn btn-success disabled'>Success</button>
<button type='button' class='btn btn-info disabled'>Info</button>
<button type='button' class='btn btn-warning disabled'>Warning</button>
<button type='button' class='btn btn-danger disabled'>Danger</button>
<button type='button' class='btn btn-link disabled'>Link</button>
2. Ausgabe für Disabled Buttons
3. Code für Button Sizes
<button type='button' class='btn btn-primary btn-lg'>Large button</button>
<button type='button' class='btn btn-primary'>Default button</button>
<button type='button' class='btn btn-primary btn-sm'>Small button</button>
<button type='button' class='btn btn-primary btn-xs'>Mini button</button>
<br>
<br>
<button type='button' class='btn btn-primary btn-lg btn-block'>Block level button</button>
3. Ausgabe für Button Sizes
4. Code für Normal Circle Buttons
<button type='button' class='btn btn-default btn-circle'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-primary btn-circle'><i class='fa fa-list'></i></button>
<button type='button' class='btn btn-success btn-circle'><i class='fa fa-link'></i></button>
<button type='button' class='btn btn-info btn-circle'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-warning btn-circle'><i class='fa fa-times'></i></button>
<button type='button' class='btn btn-danger btn-circle'><i class='fa fa-heart'></i></button>
>4. Ausgabe für Normal Circle Buttons
5. Code für Large Circle Buttons
<button type='button' class='btn btn-default btn-circle btn-lg'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-primary btn-circle btn-lg'><i class='fa fa-list'></i></button>
<button type='button' class='btn btn-success btn-circle btn-lg'><i class='fa fa-link'></i></button>
<button type='button' class='btn btn-info btn-circle btn-lg'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-warning btn-circle btn-lg'><i class='fa fa-times'></i></button>
<button type='button' class='btn btn-danger btn-circle btn-lg'><i class='fa fa-heart'></i></button>
5. Ausgabe für Large Circle Buttons
6. Code für Extra Large Circle Buttons
<button type='button' class='btn btn-default btn-circle btn-xl'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-primary btn-circle btn-xl'><i class='fa fa-list'></i></button>
<button type='button' class='btn btn-success btn-circle btn-xl'><i class='fa fa-link'></i></button>
<button type='button' class='btn btn-info btn-circle btn-xl'><i class='fa fa-check'></i></button>
<button type='button' class='btn btn-warning btn-circle btn-xl'><i class='fa fa-times'></i></button>
<button type='button' class='btn btn-danger btn-circle btn-xl'><i class='fa fa-heart'></i></button>
6. Ausgabe für Extra Large Circle Buttons
7. Code für Outline Buttons
<button type='button' class='btn btn-outline btn-default'>Default</button>
<button type='button' class='btn btn-outline btn-primary'>Primary</button>
<button type='button' class='btn btn-outline btn-success'>Success</button>
<button type='button' class='btn btn-outline btn-info'>Info</button>
<button type='button' class='btn btn-outline btn-warning'>Warning</button>
<button type='button' class='btn btn-outline btn-danger'>Danger</button>
<button type='button' class='btn btn-outline btn-link'>Link</button>
7. Ausgabe für Outline Buttons
8. Code für Outline Button Sizes
<button type='button' class='btn btn-outline btn-primary btn-lg'>Large button</button>
<button type='button' class='btn btn-outline btn-primary'>Default button</button>
<button type='button' class='btn btn-outline btn-primary btn-sm'>Small button</button>
<button type='button' class='btn btn-outline btn-primary btn-xs'>Mini button</button>
<br>
<br>
<button type='button' class='btn btn-outline btn-primary btn-lg btn-block'>Block level button</button>
8. Outline Button Sizes
9. Code für Social Buttons with Font Awesome Icons
<a class='btn btn-block btn-social btn-bitbucket'>
<i class='fa fa-bitbucket'></i> Sign in with Bitbucket
</a>
<a class='btn btn-block btn-social btn-dropbox'>
<i class='fa fa-dropbox'></i> Sign in with Dropbox
</a>
<a class='btn btn-block btn-social btn-facebook'>
<i class='fa fa-facebook'></i> Sign in with Facebook
</a>
<a class='btn btn-block btn-social btn-flickr'>
<i class='fa fa-flickr'></i> Sign in with Flickr
</a>
<a class='btn btn-block btn-social btn-github'>
<i class='fa fa-github'></i> Sign in with GitHub
</a>
<a class='btn btn-block btn-social btn-google-plus'>
<i class='fa fa-google-plus'></i> Sign in with Google
</a>
<a class='btn btn-block btn-social btn-instagram'>
<i class='fa fa-instagram'></i> Sign in with Instagram
</a>
<a class='btn btn-block btn-social btn-linkedin'>
<i class='fa fa-linkedin'></i> Sign in with LinkedIn
</a>
<a class='btn btn-block btn-social btn-pinterest'>
<i class='fa fa-pinterest'></i> Sign in with Pinterest
</a>
<a class='btn btn-block btn-social btn-tumblr'>
<i class='fa fa-tumblr'></i> Sign in with Tumblr
</a>
<a class='btn btn-block btn-social btn-twitter'>
<i class='fa fa-twitter'></i> Sign in with Twitter
</a>
<a class='btn btn-block btn-social btn-vk'>
<i class='fa fa-vk'></i> Sign in with VK
</a>
Hinweis:
Für den Einsatz von Social Buttons müssen Sie die Datei bootstrap-social.css
(download)
herunterladen und dann in Ihrer HTML-Datei im HEAD-Bereich einbinden bzw. integrieren.
<link href='css/bootstrap-social.css' rel='stylesheet'>
<link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'>
9. Social Buttons with Font Awesome Icons
10. Code für Social Buttons
<a class='btn btn-social-icon btn-bitbucket'><i class='fa fa-bitbucket'></i></a>
<a class='btn btn-social-icon btn-dropbox'><i class='fa fa-dropbox'></i></a>
<a class='btn btn-social-icon btn-facebook'><i class='fa fa-facebook'></i></a>
<a class='btn btn-social-icon btn-flickr'><i class='fa fa-flickr'></i></a>
<a class='btn btn-social-icon btn-github'><i class='fa fa-github'></i></a>
<a class='btn btn-social-icon btn-google-plus'><i class='fa fa-google-plus'></i></a>
<a class='btn btn-social-icon btn-instagram'><i class='fa fa-instagram'></i></a>
<a class='btn btn-social-icon btn-linkedin'><i class='fa fa-linkedin'></i></a>
<a class='btn btn-social-icon btn-pinterest'><i class='fa fa-pinterest'></i></a>
<a class='btn btn-social-icon btn-tumblr'><i class='fa fa-tumblr'></i></a>
<a class='btn btn-social-icon btn-twitter'><i class='fa fa-twitter'></i></a>
<a class='btn btn-social-icon btn-vk'><i class='fa fa-vk'></i></a>