bootstrap学习记录

作者: Dl_毛良伟 | 来源:发表于2017-10-21 15:05 被阅读33次

bootstrap学习记录
BootStrap学习记录
学习网站资源
Bootstrap学习之二：栅格化布局
Bootstrap
Bootstrap初体验
2018-02-24
2018-10-08Bootstrap03
Bootstrap学习
SpringBoot+Vue开发在线学习系统

禁用 BootStrap Modal 点击空白时自动关闭

$('#myModal').modal({backdrop: 'static', keyboard: false});

backdrop 为 static 时，点击模态对话框的外部区域不会将其关闭。
keyboard 为 false 时，按下 Esc 键不会关闭 Modal。

使用Bootstrap做页面布局

Bootstrap使用响应式网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大部分类都可以应用于div 元素。
Bootstrap的12列网格布局如何工作的图：

bootstrap网格布局

在这里有两个相应的class，来设置相应的布局

col-md-* 这个class,这里的md 表示中等,* 是一个数字,指定了元素应该占多少列宽,从图中我们可以看出,设置的是一个中等尺寸宽度的诸如笔记本电脑屏幕上的布局。
col-xs-* 这个class属性对按钮进行重新布局,xs 跟md 不同,xs 是指一个屏幕宽度较小的设备,比如手机屏幕之类的。

为Bootstrap定义自定义CSS

使用Bootstrap span标签来创建行内元素

在bootstrap中我们可以使用.btn-block来创建填满整行的按钮，当然我们也可以用标签来达到同样的效果。
通过标签，我们可以将多个标签放在一起，甚至可以对同一个标签设置多个不同的样式，这时，我们只需要在每个标签中添加相应的class,就可以了。

按钮添加Font Awesome图标

Font Awesome是一个方便的图标库。这些图标都是矢量图形，以.svg文件格式存储。这些图标可以像字体一样被处理,你可以使用像素设置字体大小一样指定这些图标的大小，并且这些图标可以继承父类HTML标签的字体大小。
您可以添加Font Awesome到任何应用程序，只需将下面的链接添加到你的HTML顶部就可以了：
<link rel =“stylesheet”href =“// maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”/>
i标签最初用于制作其他元素斜体，但现在通常用于图标。您可以将Font Awesome类添加到i元素以将其转换为图标，例如：

示例代码：

<div class="row">
<div class="col-xs-4">
  <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
</div>
  <div class="col-xs-4">
    <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
  </div>
  <div class="col-xs-4">
    <button class="btn btn-block btn-danger"><i class="fa fa-trash">  </i>Delete</button>
</div>
</div>

bootstrap中一些按钮的样式

相关按钮样式

bootstrap表格

标签	描述
<table>	为表格添加基础样式
<thead>	表格标题行的容器元素（<tr>），用来标识表格列
<tbody>	表格主体中的表格行的容器元素（<tr>）
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）
<td>	默认的表格单元格
<th>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）
<tr>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用

可用于表格中的样式

类	描述
.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

实例（条纹表格）

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 条纹表格</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table table-striped">
   <caption>条纹表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
         <th>密码</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
         <td>560001</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
         <td>400003</td>
      </tr>
      <tr>
         <td>Uma</td>
         <td>Pune</td>
         <td>411027</td>
      </tr>
   </tbody></table></body></html>

<tr>, <th> 和 <td> 类

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

实例

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 上下文类</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script></head><body><table class="table">
   <caption>上下文表格布局</caption>
   <thead>
      <tr>
         <th>产品</th>
         <th>付款日期</th>
         <th>状态</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>产品1</td>
         <td>23/11/2013</td>
         <td>待发货</td>
      </tr>
      <tr class="success">
         <td>产品2</td>
         <td>10/11/2013</td>
         <td>发货中</td>
      </tr>
      <tr  class="warning">
         <td>产品3</td>
         <td>20/10/2013</td>
         <td>待确认</td>
      </tr>
      <tr  class="danger">
         <td>产品4</td>
         <td>20/10/2013</td>
         <td>已退货</td>
      </tr>
   </tbody></table></body></html>