Bootstarp框架用法

2022-02-16 22:32:25 阅读：159 来源： 互联网

标签：Bootstarp 框架 bootstrap 用法引入 table btn 类名

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框架用法一致

标签：Bootstarp,框架,bootstrap,用法,引入,table,btn,类名
来源： https://www.cnblogs.com/zonghan/p/15902581.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9