这个博客展示了Bootstrap 4的基本组件和样式，包括响应式网格系统、文本样式、代码高亮、描述列表、按钮、表单、图片、提示和加载指示器等。通过实例演示了如何使用Bootstrap创建网页布局，如卡片、模态框、折叠内容、进度条和轮播等。此外，还涵盖了不同类型的字体样式和文本修饰，以及如何添加和调整图片样式。
查看主题 https://bootstrap-themes.github.io/dashboard/bootstrap/index.html
<!DOCTYPE html>
<!--
https://bootstrap-themes.github.io/dashboard/bootstrap/index.html
-->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
</script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-md-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-xs-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
<div class="container">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
</div>
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
<div class="container">
<h1>Code Snippets</h1>
<p>Inline snippets of code should be embedded in the code element:</p>
<p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<div class="container">
<h1>Blockquotes</h1>
<p>To show the quote on the right use the class .blockquote-reverse:</p>
<blockquote class="blockquote-reverse">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer>From WWF's website</footer>
</blockquote>
</div>
<div class="container">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors":</p>
<p class="bg-primary">This text is important.</p>
<p class="bg-success">This text indicates success.</p>
<p class="bg-info">This text represents some information.</p>
<p class="bg-warning">This text represents a warning.</p>
<p class="bg-danger">This text represents danger.</p>
</div>
<div class="container">
<h2>Typography</h2>
<p>Use the .lead class to make a paragraph "stand out":</p>
<p class="lead">This paragraph stands out.</p>
<p>This is a regular paragraph.</p>
</div>
<div class="container">
<h2>Typography</h2>
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
<p class="text-left">Lowercased text.</p>
<p class="text-center">Uppercased text.</p>
<p class="text-right">Capitalized text.</p>
<p class="text-justify">Lowercased text.</p>
<p class="text-nowrap">Uppercased text.</p>
<p class="text-initialism">Capitalized text.</p>
</div>
<div class="container">
<h2>Typography</h2>
<p>The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):</p>
<ul class="list-unstyled">
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</div>
<div class="container">
<h2>Code</h2>
<p>For multiple lines of code, use the pre element:</p>
<pre>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.</pre>
<p>If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:</p>
<pre class="pre-scrollable" style="height:40px" >Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.</pre>
</div>
<div class="container">
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h2>Example</h2>
<p>The .text-only class replaces an element's text content with a background image:</p>
<div class="text-hide">Some text inside a div element.</div>
<p>The .close class indicates a close icon.</p>
<div style="padding:50px;width:400px;background-color:#f1f1f1;">
<span>The close icon floats to the right:</span>
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
</div>
<div class="container">
<h2>Example</h2>
<p>The .sr-only class hides an element to all devices except screen readers:</p>
<a class="sr-only" href="#">Skip to main content</a>
<p>Combine .sr-only with .sr-only-focusable to show the element again when it is focused (e.g. by a keyboard-only user):</p>
<a class="sr-only sr-only-focusable" href="#">Skip to main content</a>
</div>
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:lavender;">
Column 1<br>
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
</div>
<div class="col-xs-6 col-sm-3" style="background-color:lavenderblush;">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs">qqqqqqq</div>
<div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">Column 3</div>
<div class="col-xs-6 col-sm-3" style="background-color:lightgray;">Column 4</div>
</div>
</div>
<div class="container">
<h2>Example</h2>
<p>The .show class forces an element to be shown:</p>
<p class="show">This paragraph is forced to be shown.</p>
<p>The .hidden class forces an element to be hidden:</p>
<p class="hidden">This paragraph is forced to be hidden.</p>
</div>
<div class="container">
<h2>Example</h2>
<div class="pull-left">left </div>
<div class="pull-right"> right</div>
</div
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<!--
<table class="table table-striped table-bordered table-hover table-condensed table-responsive table-responsive">
-->
<table class="table table-condensed ">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="info">
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="danger">
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="col-xs-4"> <img class="img-rounded" src="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img class="img-circle" src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img src="C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img src="C:\Users\Public\Pictures\Sample Pictures\Jellyfish.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
<div class="col-xs-4"> <img class="img-responsive" src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" style="width:420px;height:400px;padding-bottom:10px;"><div>
</div>
<div class="container">
<h2>Responsive Embed</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="#"></iframe>
</div>
</div>
<div class="container">
<div class="jumbotron jumbotron-fluid">
<h1>Bootstrap Tutorial jumbotron</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<div class="container">
<h2>Well Size</h2>
<div class="well well-sm">Small Well</div>
<div class="well">Normal Well</div>
<div class="well well-lg" style="background-color:gray;">Large Well</div>
</div>
<div class="container">
<h2>Alerts</h2>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
<div class="container">
<h2>Alerts</h2>
<p>The a element with class="close" and data-dismiss="alert" is used to close the alert box.</p>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">× close</a>
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
<div class="container">
<h2>Button Styles</h2>
<div class="btn-group-vertical btn-group-xs ">
<button type="button" class="btn btn-default btn-lg">Default</button>
<button type="button" class="btn btn-primary btn-md">Primary</button>
<button type="button" class="btn btn-success btn-sm">Success</button>
<button type="button" class="btn btn-info btn-xs">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>
</div>
</div>
<div class="container">
<h2>Button Tags</h2>
<div class="btn-group btn-group-lg">
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
</div>
<div class="container">
<h2>Justified Button Groups</h2>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
</div>
<div class="container">
<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-block active">Button 1</button>
<button type="button" class="btn btn-default btn-block active">Button 2</button>
<h2>Large Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-lg btn-block disabled">Button 1</button>
<button type="button" class="btn btn-default btn-lg btn-block disabled" >Button 2</button>
<h2>Small Block Level Buttons</h2>
<button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
<button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>
<div class="container">
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create drop down menus:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<button type="button" class="btn btn-info">Tablet</button>
<button type="button" class="btn btn-info">Smartphone</button>
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Example single danger button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-danger dropdown-toggle btn-sm btn-secondary dropup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABCD
</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split btn-lg btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="container">
<h2>Split Buttons</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon -print"></span> Print
</a>
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-triangle-right"></span>
</a>
</p>
</div>
<div class="container">
<h2>Badges</h2>
<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
<h1>Example <span class="label label-success">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
</div>
<div class="container">
<h2>Contextual Label Classes</h2>
<p>Contextual classes can be used to color the label.</p>
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
</div>
<div class="container">
<h2>Basic Progress Bar</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70%
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-striped active progress-bar-striped progress-bar-animated" role="progressbar"
aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40%
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" role="progressbar" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" role="progressbar" style="width:20%">
Danger
</div>
</div>
</div>
==================================
<div class="container">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-
最低0.47元/天 解锁文章
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
