bootsrtap (-)

Posted 2020-08-07 模糊的星空

1、text-muted：提示，使用浅灰色（#999）.text-primary：主要，使用蓝色（#428bca）.text-success：成功，使用浅绿色(#3c763d).text-info：通知信息，使用浅蓝色（#31708f）.text-warning：警告，使用黄色（#8a6d3b）.text-danger：危险，使用褐色（#a94442)

2、文本对齐风格：.text-left：左对齐 .text-center：居中对齐  .text-right：右对齐 .text-justify：两端对齐（用于段落）。

3、定义列表：      

<dl>
    <dt>…</dt>
    <dd>…</dd>
</dl>

4、

无序列表ul 加 .list-unstyled 去点。  内联样式：.list-inline {padding-left: 0;margin-left: -5px;list-style: none;}

.list-inline > li {display: inline-block;padding-right: 5px;padding-left: 5px;}　　　　

5、pre<pre>元素一般用于显示大块的代码，并保证原有格式不变。

.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}

6、表单控件(文本域textarea)  <textarea class="form-control" rows="3"> </textarea>   

7、在Bootstrap框架中同样提供这几种效果。1、.has-warning:警告状态（黄色）2、.has-error：错误状态（红色）3、.has-success：成功状态（绿色）使用的时候只需要在form-group容器上对应添加状态类名。

8、图像 1、img-responsive：响应式图片，主要针对于响应式设计2、img-rounded：圆角图片3、img-circle：圆形图片4、img-thumbnail：缩略图片

9、按钮下拉菜单基本用法：

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
   …
   <li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>
下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
10、导航:水平导航 .nav-tabs   胶囊导航.nav-pills 垂直导航：nav-stacked  自适应导航  nav nav-tabs nav-justified
11、导航条（navbar）第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”
12、分页导航

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>
翻页分页导航

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

12.进度条：

<h2>基本进度条</h2>
<div class="progress">
<div class="progress-bar" style="width:40%">
</div>
</div>

<h2>动态条纹进度条</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

<h5>层叠条纹进度条</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:20%"></div>
<div class="progress-bar progress-bar-info" style="width:20%"></div>
<div class="progress-bar progress-bar-warning" style="width:30%"></div>
<div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>

<h2>带Label的进度条</h2>
<h5>进度条1</h5>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

媒体对象

<ul class="media-list">
    <li class="media">
        <a class="pull-left" href="#">
            <img class="media-object" src=" " alt="...">
        </a>
        <div class="media-body">
            <h4 class="media-heading">Media Header</h4>
            <div>…</div>
        </div>
    </li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>