Bootstrap学习笔记02
第二部分：全局CSS样式
排版样式
1.标题
<body style="padding: 20px">
<h1>h1.Bootstrap 标题</h1>
<h2>h2.Bootstrap 标题</h2>
<h3>h3.Bootstrap 标题</h3>
<h4>h4.Bootstrap 标题</h4>
<h5>h5.Bootstrap 标题</h5>
<h6>h6. Bootstrap 标题</h6>
2.页面主体
通过添加 .lead 类可以让段落突出显示。
<body style="padding: 20px">
<p class=".lead">抽象类：规定一个或多个抽象方法的类别本身必须定义为abstract，抽象类只是用来派生子类，而不能用它来创建对象。</p>
<p>final类：又称“最终类”，它只能用来创建对象，而不能被继承，与抽象类刚好相反，而且抽象类与最终类不能同时修饰同一个类。</p>
<p>接口：Java中的接口是一系列方法的声明，是一些方法特征的集合，一个接口只有方法的特征没有方法的实现，因此这些方法可以在不同的地方被不同的类实现，而这些实现可以具有不同的行为。</p>
</body>
3.内联文本元素
<body style="padding: 20px">
我是<mark>中国人</mark>，我为此骄傲。<br/>
原价：<del>999元</del>现价：199元.<br/>
<s>这个是无用文本。</s><br/>
<ins>这个是插入文本</ins><br/>
<u>这个是带下划线的文本</u><br/>
<small>这个是小号文本</small><br/>
这个是<strong>着重文本</strong><br/>
<em>这个是斜体</em><br/>
4.对齐
text-justify：会换行
text-nowrap不换行
<body style="padding: 20px">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center alignedtext.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justifiedtext.Justified text.Justified text.Justified text.Justified text.Justified text.Justifiedtext.Justified text.Justified text.Justified text.Justified text.Justifiedtext.Justified text.Justified text.Justified text.Justified text.Justifiedtext.Justified text.Justified text.</p>
<p class="text-nowrap">No wrap text.No wraptext.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wraptext.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wraptext.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wraptext.No wrap text.</p>
</div>
</body>
5.改变大小写
<p class="text-lowercase">Lowercased text.</p>全小写
<p class="text-uppercase">Uppercased text.</p>全大写
<p class="text-capitalize">Capitalizedtext.</p>首字母大写
6.缩略语
我是<abbr title="中国人">人</abbr>。<br/>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.
7.地址
<body style="padding: 20px">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
</body>
8.引用
<body style="padding: 20px">
<blockquote>
<p>Lorem ipsum dolorsit amet, consectetur adipiscing elit. Integer posuereerat a ante.</p>
</blockquote>
<blockquote>
<p>Lorem ipsum dolorsit amet, consectetur adipiscing elit. Integer posuereerat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<blockquote class="blockquote-reverse">
<p>Lorem ipsum dolorsit amet, consectetur adipiscing elit. Integer posuereerat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</body>
9.列表
<body style="padding: 20px">
<p>无序列表</p>
<ul>
<li>Lorem ipsum dolorsit amet</li>
<li>Consectetur adipiscingelit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretiumnisl aliquet</li>
<li>Nulla volutpat aliquamvelit
<ul>
<li>Phasellus iaculisneque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreetporttitor sem</li>
<li>Ac tristique liberovolutpat at</li>
</ul>
</li>
<li>Faucibus portalacus fringilla vel</li>
<li>Aenean sit amet eratnunc</li>
<li>Eget porttitor lorem</li>
</ul>
<hr/>
<p>有序列表</p>
<ol>
<li>Lorem ipsum dolorsit amet</li>
<li>Consectetur adipiscingelit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretiumnisl aliquet</li>
<li>Nulla volutpat aliquamvelit</li>
<li>Faucibus portalacus fringilla vel</li>
<li>Aenean sit amet eratnunc</li>
<li>Eget porttitor lorem</li>
</ol>
<hr/>
<p>无样式列表</p>
<ul class="list-unstyled">
<li>Lorem ipsum dolorsit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
<hr/>
<p>内联列表</p>
<ul class="list-inline">
<li>Lorem ipsum</li>
<li>Phasellus iaculis</li>
<li>Nulla volutpat</li>
</ul>
<hr/>
<p>描述</p>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper egetlacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
<hr/>
<p>水平排列的描述</p>
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper egetlacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
<dt>Felis euismod semper eget lacinia</dt>
<dd>Fusce dapibus, tellus ac cursus commodo, tortor mauriscondimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
</div>
</body>
代码样式
1.内联代码
<body style="padding: 20px">
For example, <code><section></code> should be wrappedas inline.
</body>
2.用户输入
<body style="padding: 20px">
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</body>
3.代码块
<body style="padding: 20px">
<pre><p>Sample text here...</p></pre>
</body>
4.变量
<body style="padding: 20px">
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
</body>
5.程序输出
<body style="padding: 20px">
<samp>This text is meant to be treated as sample output from acomputer program.</samp>
</body>
表格样式
1. 基本实例
<body style="padding: 20px">
<table class="table">
<caption>Optionaltable caption.</caption>
<thead>
<tr>
<th>#</th>
<th>FirstName</th>
<th>LastName</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>theBird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
2. 条纹状表格
<body style="padding: 20px">
<table class="tabletable-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
3. 带边框的表格
<body style="padding: 20px">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
4. 鼠标悬停
<body style="padding: 20px">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
5. 紧缩表格
<body style="padding: 20px">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
6. 状态类
<body style="padding: 20px">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</body>
表单样式
1. 基本实例
<body style="padding: 20px">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control"id="exampleInputEmail1" placeholder="Enteremail">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file"id="exampleInputFile">
<p class="help-block">Example block-levelhelp text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btnbtn-default">Submit</button>
</form>
</body>
2. 内联表单
<body style="padding: 20px">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only"for="exampleInputEmail2">Email address</label>
<input type="email"class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input class="form-control"type="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only"for="exampleInputPassword2">Password</label>
<input type="password"class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit"class="btn btn-default">Sign in</button>
</form>
</body>
3. 水平排列的表单
<body style="padding: 20px">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3"class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email"class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3"class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password"class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2col-sm-10">
<button type="submit"class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</body>
4. 被支持的控件
<body style="padding: 20px">
<div>
<h3>输入框</h3>
<input type="text" class="form-control" placeholder="Text input">
</div>
<hr/>
<div>
<h3>文本域</h3>
<textarea class="form-control"rows="3"></textarea>
</div>
<hr/>
<div>
<h3>多选和单选框</h3>
<div class="checkbox">
<label>
<input type="checkbox"value="">
Option one is this and that—be sure to includewhy it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox"value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio"name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to includewhy it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio"name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else andselecting it will deselect option one
</label>
</div>
<div class="radiodisabled">
<label>
<input type="radio"name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<hr/>
<label class="checkbox-inline">
<input type="checkbox"id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox"id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox"id="inlineCheckbox3" value="option3"> 3
</label>
<br/>
<label class="radio-inline">
<input type="radio"name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio"name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio"name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
<hr/>
<div class="checkbox">
<label>
<input type="checkbox"id="blankCheckbox" value="option1">
</label>
</div>
<div class="radio">
<label>
<input type="radio"name="blankRadio" id="blankRadio1"value="option1">
</label>
</div>
</div>
<hr/>
<div>
<h3>下拉列表（select）</h3>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br/>
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<hr/>
</body>
5. 输入框焦点
<style type="text/css">
#focusedInput {
border-color: #ccc;
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: 0 0 8px rgba(82,168,236,.6);
box-shadow: 0 0 8px rgba(82,168,236,.6);
}
</style>
</head>
<body style="padding: 20px">
<input class="form-control" id="focusedInput"type="text" value="Demonstrative focus state">
<hr/>
<input class="form-control"id="focusedInput2" type="text" value="Demonstrativefocus state2">
</body>
6. 被禁用的输入框
<body style="padding: 20px">
<input class="form-control"id="disabledInput" type="text" placeholder="Disabled inputhere..." disabled>
<hr/>
<form role="form">
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text"id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect"class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit"class="btn btn-primary">Submit</button>
</fieldset>
</form>
</body>
7. 只读输入框
<body style="padding: 20px">
<input class="form-control"type="text" placeholder="Readonly inputhere…" readonly>
</body>
8. 校验状态
<body style="padding: 20px">
<div class="form-group has-success">
<label class="control-label"for="inputSuccess1">Input with success</label>
<input type="text"class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
<label class="control-label"for="inputWarning1">Input with warning</label>
<input type="text"class="form-control" id="inputWarning1">
</div>
<div class="form-grouphas-error">
<label class="control-label"for="inputError1">Input with error</label>
<input type="text"class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox"id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox"id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox"id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>
<hr/>
<div class="form-grouphas-success has-feedback">
<label class="control-label"for="inputSuccess2">Input with success</label>
<input type="text"class="form-control" id="inputSuccess2">
<span class="glyphicon glyphicon-okform-control-feedback"></span>
</div>
<div class="form-grouphas-warning has-feedback">
<label class="control-label"for="inputWarning2">Input with warning</label>
<input type="text"class="form-control" id="inputWarning2">
<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-grouphas-error has-feedback">
<label class="control-label"for="inputError2">Input with error</label>
<input type="text"class="form-control" id="inputError2">
<span class="glyphiconglyphicon-remove form-control-feedback"></span>
</div>
<hr/>
<form class="form-horizontal"role="form">
<div class="form-grouphas-success has-feedback">
<label class="control-labelcol-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text"class="form-control" id="inputSuccess3">
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
</div>
</form>
<hr/>
<form class="form-inline"role="form">
<div class="form-grouphas-success has-feedback">
<label class="control-label"for="inputSuccess4">Input with success</label>
<input type="text"class="form-control" id="inputSuccess4">
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
</form>
<hr/>
<div class="form-grouphas-success has-feedback">
<label class="control-labelsr-only" for="inputSuccess5">Hidden label</label>
<input type="text"class="form-control" id="inputSuccess5">
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
</body>
9. 控件尺寸
<body style="padding: 20px">
<input class="form-control input-lg"type="text" placeholder=".input-lg"><br/>
<input class="form-control"type="text" placeholder="Defaultinput"><br/>
<input class="form-controlinput-sm" type="text"placeholder=".input-sm"><br/>
<select class="form-controlinput-lg">...</select><br/>
<select class="form-control">...</select><br/>
<select class="form-control input-sm">...</select><br/>
<hr/>
<form class="form-horizontal"role="form">
<div class="form-groupform-group-lg">
<label class="col-sm-2control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control"type="text" id="formGroupInputLarge"placeholder="Large input">
</div>
</div>
<div class="form-groupform-group-sm">
<label class="col-sm-2control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control"type="text" id="formGroupInputSmall"placeholder="Small input">
</div>
</div>
</form>
<hr/>
//调整列尺寸
<div class="row">
<div class="col-xs-2">
<input type="text"class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text"class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text"class="form-control" placeholder=".col-xs-4">
</div>
</div>
</body>
10. 辅助文本
<body style="padding: 20px">
<form role="form">
<input type="text"class="form-control">
<span class="help-block">A block of help textthat breaks onto a new line and may extend beyond one line.</span>
</form>
</body>
按钮样式
1. 预定义样式
</head>
<body style="padding: 20px">
<!-- Standard button-->
<button type="button"class="btnbtn-default">Default</button>
<!-- Provides extra visualweight and identifies the primary action in a set of buttons -->
<button type="button"class="btnbtn-primary">Primary</button>
<!-- Indicates asuccessful or positive action -->
<button type="button"class="btnbtn-success">Success</button>
<!-- Contextual button forinformational alert messages -->
<button type="button"class="btnbtn-info">Info</button>
<!-- Indicates cautionshould be taken with this action -->
<button type="button"class="btnbtn-warning">Warning</button>
<!-- Indicates a dangerousor potentially negative action -->
<button type="button"class="btnbtn-danger">Danger</button>
<!-- Deemphasize a buttonby making it look like a link while maintaining button behavior -->
<button type="button"class="btnbtn-link">Link</button>
</body>
2. 尺寸
<body style="padding: 20px">
<p>
<button type="button"class="btnbtn-primary btn-lg">Large button</button>
<button type="button"class="btnbtn-default btn-lg">Large button</button>
</p>
<p>
<button type="button"class="btnbtn-primary">Default button</button>
<button type="button"class="btnbtn-default">Default button</button>
</p>
<p>
<button type="button"class="btnbtn-primary btn-sm">Small button</button>
<button type="button"class="btnbtn-default btn-sm">Small button</button>
</p>
<p>
<button type="button"class="btnbtn-primary btn-xs">Extra small button</button>
<button type="button"class="btnbtn-default btn-xs">Extra small button</button>
</p>
<hr/>
<button type="button"class="btnbtn-primary btn-lg btn-block">Blocklevel button</button>
<button type="button"class="btnbtn-default btn-lg btn-block">Block level button</button>
</body>
3. 激活状态
<body style="padding: 20px">
<button type="button"class="btnbtn-primary btn-lg active">Primary button</button>
<button type="button"class="btnbtn-default btn-lg active">Button</button>
</body>
4. 超链接按钮
<body style="padding: 20px">
<a href="#"class="btnbtn-primary btn-lg active" role="button">Primary link</a>
<a href="#"class="btnbtn-default btn-lg active" role="button">Link</a>
</body>
5. 禁用状态
<body style="padding: 20px">
<button type="button"class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button"class="btn btn-default btn-lg" disabled="disabled">Button</button>
<hr/>
<a href="#"class="btnbtn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#"class="btnbtn-default btn-lg disabled" role="button">Link</a>
</body>
6. 按钮类
可以使用<a><button><input>。
<body style="padding: 20px">
<a class="btn btn-default" href="#"role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default"type="button" value="Input">
<input class="btnbtn-default" type="submit"value="Submit">
</body>
图片样式
1. 响应式图片
支持缩放
<body style="padding: 20px">
<img src="haima.jpg"class="img-responsive" alt="Responsive image">
</body>
2. 图片形状
<body style="padding: 20px">
<img src="qq.jpg"alt="qq头像" class="img-rounded">
<img src="qq.jpg"alt="qq头像" class="img-circle">
<img src="qq.jpg"alt="qq头像" class="img-thumbnail">
<hr/>
<img src="qq.jpg"alt="qq头像" class="img-rounded"width="90" height="90">
<img src="qq.jpg"alt="qq头像" class="img-circle"width="90" height="90">
<img src="qq.jpg"alt="qq头像" class="img-thumbnail"width="90" height="90">
</body>
辅助类
1. Color
情境文本颜色
通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。
<body style="padding: 20px">
<p class="text-muted">Fusce dapibus, tellusac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehiculaut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus,nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus variusblandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna molliseuismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctorfringilla.</p>
</body>
2. background
情境背景色
和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。
<body style="padding: 20px">
<p class="bg-primary">Nullam id dolor id nibh ultricies vehiculaut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus,nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus variusblandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna molliseuismod.</p>
<p class="bg-danger">Donec ullamcorpernulla non metus auctor fringilla.</p>
</body>
3. 关闭按钮×
<body style="padding: 20px">
<button type="button"class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</body>
4. 三角按钮
<body style="padding: 20px">
<span class="caret"></span>
</body>
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的。
5. 快速浮动
<divclass="pull-left">...</div>
<divclass="pull-right">...</div>
6. 让内容块居中
<divclass="center-block">...</div>
7. 清除浮动
<!-- Usage as a class -->
<divclass="clearfix">...</div>
8. 显示或隐藏内容
<divclass="show">...</div>
<divclass="hidden">...</div>
9. 屏幕阅读器和键盘导航
.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。.sr-only 和.sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户
<aclass="sr-only sr-only-focusable"href="#content">Skip to main content</a>
10. 图片替换
使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。
<h1 class="text-hide">Customheading</h1>
Bootstrap学习笔记02相关推荐
- Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...
- JavaWeb黑马旅游网-学习笔记02【注册功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- Servlet和HTTP请求协议-学习笔记02【Servlet_体系结构与urlpartten配置、HTTP请求协议】
Java后端 学习路线 笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
- Tomcat学习笔记02【Tomcat部署项目】
Java后端 学习路线 笔记汇总表[黑马程序员] Tomcat学习笔记01[Web相关概念.Tomcat基本操作][day01] Tomcat学习笔记02[Tomcat部署项目][day01] 目录 ...
- XML学习笔记02【xml_解析】
Java后端 学习路线 笔记汇总表[黑马程序员] XML学习笔记01[xml_基础.xml_约束][day01] XML学习笔记02[xml_解析][day01] 目录 03 xml_解析 xml_解 ...
- JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
最新文章
- [USACO08NOV]lites
- 设计模式：观察者模式（有利于代码解耦）
- 计算机cpu 和 主板型号,CPU和主板怎么搭配？intel七代/八代/九代处理器和主板搭配对照表...
- 一步步编写操作系统 08 bios跳转到神奇的内存地址0x7c00
- 矿井通风计算c语言_矿井主通风机的技术发展现状与未来发展趋势
- 刷新认知！基因表达，男女有别｜Science、Cell等发布15篇人类遗传调控新成果
- 解救小哈（dfs或bfs）
- 【Luogu1580】yyy loves Easter_Egg I（纯字符串模拟）
- System Toolkit for Mac(Mac系统维护工具)
- 这个录屏神器好用哭了！
- Vc++安装包_Visual C++ 6.0中文版安装包下载及win11安装教程
- svn 命令行使用总结
- linux安装英伟达显卡驱动
- 别人有公众号你也可以有，5分钟申请公众号详细步骤
- 开放式蓝牙耳机排行，列举几款值得推荐的开放式蓝牙耳机
- 我的世界java1.13下_Minecraft我的世界Java版1.13-pre3更新内容
- python匠心之作——集合
- 7000字详解数据指标体系建设实践
- 电脑端上有哪些免费好用的思维导图软件？
- 从底层了解ASP.NET体系结构