Bootstarp框架用法

目录

• Bootstrap框架
  • 布局容器
  • 栅格系统
  • 表格与表单
  • 按钮组
  • 图片
  • 图标
  • 导航条
  • 其他
  • elementui

Bootstrap框架

Bootstrap框架
    2.X 3.X 4.X  # 推荐使用3.X版本

使用框架调整页面样式一般都是操作标签的class属性即可

bootstrap需要依赖于jQuery才能正常执行(动态效果)

引入方式
    本地引入(最完整的)
        1.引入jQuery
        2.引入bootstrap的css文件
        3.引入bootstrap的js文件
    CDN引入
        1.引入jQuery CDN
        2.引入bootstrap css的 CDN   3.4.1
        3.引入bootstrap js的 CDN    3.4.1

在Bootstrap上复制别的网站的HTML代码

布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式
让pycharm记住bootstrap的关键字
"""
container       左右留白
container-fluid  左右不留白

栅格系统

row          行  # 一个row就是一行 一行是固定的12份
col-md-1    中等屏幕 桌面显示器 (≥992px)
col-sm-1    小屏幕 平板 (≥768px)
col-xs-1    超小屏幕 手机 (<768px)  手机端如果发生变形就用这个类
col-lg-1    大屏幕 大桌面显示器 (≥1200px)

.col-md-offset-*  列偏移

######可以在小份中再次分12份####

<div class="container">左右留白
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="col-lg-6 c1"></div>
                <div class="col-lg-4 c1"></div>
                <div class="col-lg-2 c1"></div>
            </div>
        </div>
        <div class="col-md-6 c1"></div>

        <div class="col-lg-4 c1"></div>
        <div class="col-lg-8 c1"></div>

        <div class="col-lg-2 c1"></div>
        <div class="col-lg-8 c1"></div>
        <div class="col-lg-2 c1"></div>

        <div class="col-lg-8 c1">
            <div class="row">
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
                <div class="col-lg-1 c1"></div>
            </div>
        </div>
        <div class="col-lg-4 c1"></div>
    </div>
</div>

表格与表单

表格

关键类名:
text-center 文字居中
table table-striped table-bordered table-hover  给table用的
success  danger warning  改变框颜色
<div class="container">左右留白
    <div class="row">
        <div class="col-md-8 col-lg-offset-2">
            <h2 class="text-center">用户数据</h2>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr class="success">
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>爱好</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="danger">
                        <td>jason</td>
                        <td>18</td>
                        <td>读书</td>
                    </tr>
                    <tr class="warning">
                        <td>tony</td>
                        <td>20</td>
                        <td>电影</td>
                    </tr>
                    <tr>
                        <td>kevin</td>
                        <td>25</td>
                        <td>美女</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

表单

关键类名:
form-control  #input框变长
btn btn-danger btn-block  修改submit提交按钮的样式
注意:
    radio和checkbox不要加form-control  !!!
<h2 class="text-center">用户注册</h2>
            <form action="">
                <p>username:
                    <input type="text" class="form-control"></p>
                <p>password:
                    <input type="password" class="form-control"></p>
                <p>
                    <select name="" id="" class="form-control">
                        <option value="">111</option>
                        <option value="">222</option>
                        <option value="">333</option>
                </select></p>
                <input type="submit" class="btn btn-danger btn-block">
            </form>

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

按钮组

a标签变成按钮
类名:btn btn-primary
其他按钮
类名:btn btn-info btn-block  样式    (修改其css调整颜色)
btn-lg btn-sm  大小
<a href="" class="btn btn-primary">点我</a>
<input type="reset" class="btn btn-info">
<input type="reset" class="btn btn-info btn-sm">
<input type="reset" class="btn btn-info btn-lg">
<input type="reset" class="btn btn-info btn-block">

图片

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

图标

bootstrap自带的
    加个span标签
    通过span标签修改class属性值(下图选中的就是class)

fontawesome网站
    专门提供图标库  # 完美兼容bootstrap框架

先下载

然后解压后cv进pycharm

用link引入后就可以随意使用了

复制图标的源码然后添加

例如:
<i class="fa fa-bath" aria-hidden="true">
颜色可以用style直接修改颜色

导航条

直接在bootstrap里复制源码

颜色可改

其他

直接取拷

elementui

类似bootstrap框架 用法一致