Bootstrap

Posted 2021-12-20 lakei

Bootsrap框架

 js
  只需要留一个bootstrap.min.js即可
 css
  只需要一个bootstrap.min.css即可
 fonts
  都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

bootstrap文件划分

注意　它是基于jQuery, 也就意味着你在用bootstrap要先导入jQuery文件 ！！！

实际网站示例

Normarlize.css（不同浏览器样式一致性）

布局容器

container（有留白）与container-fluid(全屏展示)

栅格系统

一个row就表示一行（这一行默认给你均分成了12份，每一份还可以均分成12份）
row(行)
col（列）

 

<style>
        .red 
            background-color: red;
            border: 3px solid green;
            height: 100px;
        
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>　　　//控制你占当前行的多少列
        <div class="col-md-6 red"></div>
    </div>
</div>
<!--
        6，6
        2，10
        1～12
        再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

 

 

 

媒体查询

<style>
                .c1 
            background-color: red;
        
        @media screen and (max-width: 600px)
            .c1 
                background-color: green;
            
        
</style>                
<div class="col-md-6 red c1"></div>

 

 

 

响应式列重置

<style>
                .c2 
            background-color: red;
        
        .c3 
            height: 60px;
        
</style>
<div class="container">
    <div class="row">
  <div class="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
</div>
</div>

 

 

 

 列偏移

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

col-md-offset-3

 

 

 

 排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="lead">...</p>
<mark>highlight</mark>
<!--两者效果一样，但是语义不一样-->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>


<!--列表组-->
<ul class="list-unstyled">
  <li>...</li>
</ul>

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

 

 

 

表格标签

<table class="table table-bordered table-hover table-striped"></table>
<tr class="active">...</tr>

 

 

表单

　　登录示例

　　input框提示信息显影

 

按钮

<button class=‘btn-success/btn-info/btn-primary/btn-danger/btn-warning‘>
  按钮
</button>

btn-block 占父标签100%

 

 

 快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

 

 

 组件

<!--字体图标 意味着操作它跟操作普通文本一样   爱心图标举例-->
<!--图标大小可以通过调span标签所在的父标签调节-->

 

 

Font-Awesome简介 

1. .css
2. fonts

标签页

• 实际应用场景  >>> 购物网站物品各类信息（JS插件标签页）

JS插件

模态框

• data参数绑定

 

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

•  自定义代码

$(‘#myModal‘).modal(‘show/hide‘)

 

 

sweetalert插件

https://lipis.github.io/bootstrap-sweetalert/

下载只需要用dist文件夹

swal(‘标题‘)
swal(‘标题‘,‘文本‘)
swal(‘标题‘,‘文本‘，‘success‘)
swal(‘标题‘,‘文本‘,‘warning‘)
swal(‘标题‘,‘文本‘,‘info‘)
swal(‘标题‘,‘文本‘,‘error‘)