Bootstrap笔记

2023-05-16

Bootstrap样式

CSS导入

<link rel="stylesheet" href="../../../assets/css/common/bootstrap.css"/>
<script src="../../../assets/components/jquery/dist/jquery.js"></script>
<script src="../../../assets/components/bootstrap/dist/js/bootstrap.js"></script>

V3移动设备优先

添加viewport元数据标签
user-scalable=no：禁用缩放功能。
maximum-scale=1：缩放倍数1倍

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

全局字体，链接样式

body{
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 50px;
      line-height: 20px;
      color: #333333;
      background-color: #FFFFFF;
 }
a:link {color: red} /* 未访问的链接 */
a:visited {color: green} /* 已访问的链接 */
a:hover {color: black} /* 鼠标移动到链接上 */
a:active {color: yellow} /* 选定的链接，即鼠标按下去的时候不松开显示的状态 */

布局容器

container 默认固定宽度
大于768px-> 750px
大于992px-> 970px
大于1200px-> 1170px

<div class="container">
  ...
</div>
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 768px) {
  .container {
    width: 744px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 964px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1164px;
  }
}

container-fluid：默认铺满

<div class="container-fluid">
  ...
</div>
.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 12px;
  padding-right: 12px;
}

栅格系统

栅格参数

col-md-xx

小于992px时：堆叠一起
在这里插入图片描述
等于于992px时：水平排列

col-xs col-md col-sm联合使用

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>
</div>

宽度大于等于992：采用col-md样式
宽度等于992——768 采用col-sm样式
宽度小于992 采用col-xs样式

多余列时

另起一行重新排列
在这里插入图片描述

文档样式

标题

<h1>admin</h1>
副标题
<small>sername</small>
<div class="small">sername</div>

在这里插入图片描述

页面主题

    <p>Nullam ... </p>
    //突出显示
    <p class="lead"> hello</p>

在这里插入图片描述

对齐方式

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

在这里插入图片描述

字符串大写转换

//全小写
<p class="text-lowercase">Lowercased text.</p>
//全大写
<p class="text-uppercase">Uppercased text.</p>
//首字母大写
<p class="text-capitalize">Capitalized text.</p>

缩略语，悬停显示内容

//鼠标悬停HTML，显示全部内容
<abbr title="HyperText Markup Language">HTML</abbr>
<br>
//鼠标悬停HTML，显示全部内容
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

.initialism首字母能让显示的字符相对小一些
在这里插入图片描述

列表一行显示

<ul class="list-inline">
    <li>111111</li>
    <li>.2222</li>
    <li>.3333333333</li>
</ul>

list-inline列表一行显示
在这里插入图片描述

重点词描述解释

<dl class="dl-horizontal">
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

在这里插入图片描述

内容超出显示…

text-overflow：超出容器范围字符串截断

<dl class="dl-horizontal">
            <dt class="text-overflow">HTMLaaaaaaaaaaaaaaaaaa</dt>
            <dd>HyperText Markup Language</dd>
        </dl>

在这里插入图片描述

插入代码块

<>：符号
><：符号

 <pre>
    Map&lt;String, List&lt;Map&lt;String, Object>>> allDataMap = callbackProp.getExcelProp().getAllDataMap();
    String desigerid = callbackProp.getVariables().get("desigerid").toString();
    List&lt;Map&lt;String, Object>> maps = allDataMap.get(desigerid);
    for (Map&lt;String, Object> map : maps) {
    map.put("PLANNER_CODE", LoginCache.getLoginUser(request).getUserId());
</pre>

在这里插入图片描述

表格样式

鼠标指向颜色加深

<table class="table table-hover">
   <thead>
       <td>#</td>
       <td>First Name</td>
       <td>Last Name</td>
       <td>User Name</td>
   </thead>
   <tbody>
   <tr>
       <td>1</td>
       <td>First Name</td>
       <td>Last Name</td>
       <td>User Name</td>
   </tr>
   <tr>
       <td>2</td>
       <td>First Name</td>
       <td>Last Name</td>
       <td>User Name</td>
   </tr>
   <tr>
       <td>3</td>
       <td>First Name</td>
       <td>Last Name</td>
       <td>User Name</td>
   </tr>
   </tbody>
</table>

条纹状表格

<table class="table table-striped">
	...
</table>

在这里插入图片描述

边框全边框

<table class="table table-bordered">
	...
</table>

在这里插入图片描述

表格内容紧凑显示

<table class="table table-condensed">
	...
</table>

在这里插入图片描述

表格状态颜色区别

在这里插入图片描述

Form表单

<form class="form-inline">
    <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input autofocus type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
</form>

表单类input一行排列

form class="form-inline"
结合
div class="form-group"
div中元素水平排列

表单各组水平排列

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-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-group form-group-sm">
    <label class="col-sm-2 control-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>

lable与input

lable标签的for值 === input标签的id值

<div class="form-group">
   <label for="exampleInputName2">Name</label>
   <input autofocus type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>

Button按钮

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

bootstrap