Bootstrap前端框架

时间 2019-11-11

标签 bootstrap 前端框架栏目 Bootstarp 繁體版

原文原文链接

Bootstrap下载

官方地址：https://getbootstrap.comcss

中文地址：http://www.bootcss.com/html

咱们使用V3版本的Bootstrap，咱们下载的是用于生产环境的Bootstrabootstrap

Bootstrap环境搭建

处理依赖

因为Bootstrap的某些组件依赖于jQuery，因此请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。api

Bootstrap全局样式

排版、按钮、表格、表单、图片等咱们经常使用的HTML元素，Bootstrap中都提供了全局样式。
咱们只要在基本的HTML元素上经过设置class就可以应用上Bootstrap的样式，从而使咱们的页面更美观和谐。

标题相关

 1 <h1>一级标题36px</h1>
 2 <h2>二级标题30px</h2>
 3 <h3>三级标题24px</h3>
 4 <h4>四级标题18px</h4>
 5 <h5>五级标题14px</h5>
 6 <h6>六级标题12px</h6>
 7 
 8 <!--除了使用h标签，Bootstrap内置了相应的全局样式-->
 9 <!--内联标签应用标题样式-->
10 <span class="h1">一级标题36px</span>
11 <span class="h2">二级标题30px</span>
12 <span class="h3">三级标题24px</span>
13 <span class="h4">四级标题18px</span>
14 <span class="h5">五级标题14px</span>
15 <span class="h6">六级标题12px</span>

副标题

文本类

 1 经常使用对齐  2 
 3 <!--对齐-->
 4 <p class="text-left">文本左对齐</p>
 5 <p class="text-center">文本居中</p>
 6 <p class="text-right">文本右对齐</p>
 7 
 8 大小写  9 <!--大小写-->
10 <p class="text-lowercase">Lowercased text.</p>
11 <p class="text-uppercase">Uppercased text.</p>
12 <p class="text-capitalize">Capitalized text.</p>

文本颜色

<p class="text-muted">...</p> 灰 <p class="text-primary">...</p> 蓝 <p class="text-success">...</p> 绿 <p class="text-info">...</p> 深蓝 <p class="text-warning">...</p> 橘黄 <p class="text-danger">...</p> 红

背景色

1 <p class="bg-primary">...</p>
2 <p class="bg-success">...</p>
3 <p class="bg-info">...</p>
4 <p class="bg-warning">...</p>
5 <p class="bg-danger">...</p>

栅格系统

 1 row必须放到container和container-fluid里面  2 内容应当放置于“列（column）”内，而且，只有“列（column）  3 ”能够做为行（row）”的直接子元素。  4 
 5  列的样式 .col-xx（lg md sm xs）-数字（1~12）  6  响应式应用：  7  - col-md-6  8  - col-xs-8  9         
10  container有一个padding是15px 11  row有一个margin是-15px 12         
13  列是支持嵌套的 14         
15  列偏移： col-xx-offset-数字（1~12） 16         
17  列排序： .col-md-pull-数字 .col-md-push-数字 18

表格

1  条纹状表格 .table-striped --> 斑马线 2  带边框的表格 .table-bordered  --> 加上外边框 3  鼠标悬停变色的表格 .table-hover --> 鼠标悬浮变色 4  紧缩型表格 .table-condensed --> padding减半 5     响应式表格. .table-responsive  --> 自适应
6     响应式表格：
      <div class="table-responsive">  // table外面包裹一层div
      <table class="table">
      ...
      </table>
      </div>
      当屏幕宽度太小的时候，表格自己会出来滚动

表单

全部设置了 .form-control 类的 <input>、<textarea> 和 <select> 
的元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中能够得到最好的排列。 默认的 - label标签放在input框上面 .form-inline - 横着放一排 .form-horizontal - label标签和input框左右分开放的 都会用到：.form-group --> label + input + span

表单状态类

 1 <!-- On rows -->
 2 <tr class="active">...</tr>
 3 <tr class="success">...</tr>
 4 <tr class="warning">...</tr>
 5 <tr class="danger">...</tr>
 6 <tr class="info">...</tr>
 7 
 8 <!-- On cells (`td` or `th`) -->
 9 <tr>
10   <td class="active">...</td>
11   <td class="success">...</td>
12   <td class="warning">...</td>
13   <td class="danger">...</td>
14   <td class="info">...</td>
15 </tr>

按钮类

 1 为 <a>、<button> 或 <input> 元素添加按钮类（button class） 便可使用 Bootstrap 提供的样式。

.btn
        
        颜色：
        .btn-default
        .btn-success
        .btn-warning
        .btn-danger
        
        尺寸：
        .btn-lg
        .btn-sm
        .btn-xs

<p> <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button> </p>



        块级btn:
        .btn-block







 4 <!-- Standard button -->
 5 <button type="button" class="btn btn-default">（默认样式）Default</button>
 6 
 7 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
 8 <button type="button" class="btn btn-primary">（首选项）Primary</button>
 9 
10 <!-- Indicates a successful or positive action -->
11 <button type="button" class="btn btn-success">（成功）Success</button>
12 
13 <!-- Contextual button for informational alert messages -->
14 <button type="button" class="btn btn-info">（通常信息）Info</button>
15 
16 <!-- Indicates caution should be taken with this action -->
17 <button type="button" class="btn btn-warning">（警告）Warning</button>
18 
19 <!-- Indicates a dangerous or potentially negative action -->
20 <button type="button" class="btn btn-danger">（危险）Danger</button>
21 
22 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
23 <button type="button" class="btn btn-link">（连接）Link</button>

图片类

 1 响应式图片  2 
 3 在 Bootstrap 版本 3 中，经过为图片添加 .img-responsive 类可让图片支持响应式布局。
 其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 
 属性，从而让图片在其父元素中更好的缩放。  4 
 5 <img src="..." class="img-responsive" alt="Responsive image">
 6 
 7 图片形状  8 经过为 <img> 元素添加如下相应的类，可让图片呈现不一样的形状。  9 
10 <img src="..." alt="..." class="img-rounded"> 圆角方 11 <img src="..." alt="..." class="img-circle"> 圆图片 12 <img src="..." alt="..." class="img-thumbnail">方图片

实用杂类

 1 关闭按钮:  2 <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 3 
 4 下拉三角:<span class="caret"></span>
 5 
 6 快速浮动:  7 <div class="pull-left">...</div>
 8 <div class="pull-right">...</div>
 9 
10 内容块居中:<div class="center-block">...</div>
11 快速浮动:
　　　　　 - .pull-left
        　- .pull-right
12 清除浮动: 13 <!-- Usage as a class -->
14 <div class="clearfix">...</div>
15 
16 显示或隐藏: 17 <div class="show">...</div>
18 <div class="hidden">...</div>

水平居中

文本类或行内标签居中ide

<div class="text-center">
  <p>这里是一段文本。</p>
</div>

水平居中一个col-*的div

1.使用col-*-offset-*布局

<div class="container">
    <div class="row">
    <div class="col-md-4 col-md-offset-4" style="border: 1px solid red">这是一个column div。</div>
  </div>
</div>

2.使用自定义样式flex

.col-centered {
  float: none;
  margin: 0 auto;
}



<div class="container">
  <div class="row">
    <div class="col-centered col-md-4" style="border: 1px solid red">这是一个column div。</div>
  </div>
</div>

注意点:补充ui

Bootstrap3里面有个.center-block样式类，能够用于不涉及float标签的水平居中this

<div class="container">
  <div class="center-block" style="border: 1px solid red">通常水平居中</div>
</div> ootstrap3.0.1版本新添加的.center-block样式类其实就是咱们以前常常用到的margin: 0 auto。 Bootstrap4中： text-center仍是用来水平居中display:inline的元素 mx-auto取代center-block用来水平居中display:block的元素 offset-*或mx-auto用来水平居中栅格系统的列元素

垂直居中

1 .vertical-align { 2  display: flex; 3  align-items: center; 4 } 5 
7 <div style="height: 200px;border: 1px solid black" class="vertical-align">
8   <div style="width: 100px;height: 100px;background-color: red"></div>
9 </div>