前端基础 - Bootstrap - 《python3学习笔记》

本文只摘取部分内容，全部内容请查看官网

在使用Bootstrap的时候所有的样式都只需要通过class来调解。
Bootstrap网址：https://www.bootcss.com/
咱们遵循不使用最新版本，因此选择V3版本：https://v3.bootcss.com/
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
注意点：
Bootstrap的js代码是依赖于jQuery的，所以在使用Bootstrap的动态效果的时候，必须先导入jQuery。
布局容器：

<body>
        <div class="container ">左右两边有留白</div>
        <div class="container-fluid ">左右两边没有留白</div>
    </body>

后续在用bootstrap写页面的时候就可以上来就写一个div class=”container”,之后在div内部书写代码。

栅格系统：

<body>
    <div class="container ">左右两边有留白
    <div class="row" >row为行，分为12份，并且row可以进行嵌套操作
        <div class="col-md-6 "></div>
        <div class="col-md-6  "></div>
    </div>
    </div>
    <div class="container-fluid ">左右两边没有留白</div>

在使用bootstrap框架的时候记住12的加减法
栅格参数：
.col-xs- 手机
.col-sm- 平板
.col-md- 桌面
.col-lg- 大桌面

针对不同的显示器，bootstrap会自动选择参数
列偏移：
.col-md-offset-4 从左往右移动4列

版：
bootstrap内将很多样式已经提前封装好了人肉眼能接受的样式，具体查看官方文档。
表格

    .table                  为表格赋予基本的表格样式
    .table-striped            给 <tbody> 之内的每一行增加斑马条纹样式。
    .table-bordered            为表格和其中的每个单元格增加边框。
    .table-hover            让 <tbody> 中的每一行对鼠标悬停状态作出响应。
    .table-condensed        让表格更加紧凑，单元格中的内补（padding）均会减半。
     <table class="table table-hover table-bordered table-striped table-condensed"></table>
    .active        鼠标悬停在行或单元格上时所设置的颜色
    .success    标识成功或积极的动作
    .info        标识普通的提示信息或动作
    .warning    标识警告或需要用户注意
    .danger        标识危险或潜在的带来负面影响的动作
    <!-- On rows -->
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    <tr class="info">...</tr>
    <!-- On cells (`td` or `th`) -->
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>

响应式表格：
会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

<div class="table-responsive">
            <table class="table"></table>
        </div>

表单
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的、和 <select> 元素都将被默认设置宽度属性为 width: 100%;<br /> </p> <pre><code><input type="checkbox"> <input type="radio"> checkbox和radio一般不会为其加form-control,直接使用原生的 </code></pre><p>按钮</p> <pre><code> <button type="button" class="btn btn-default">（默认样式）Default</button>  <button type="button" class="btn btn-primary">（首选项）Primary</button>  <button type="button" class="btn btn-success">（成功）Success</button>  <button type="button" class="btn btn-info">（一般信息）Info</button>  <button type="button" class="btn btn-warning">（警告）Warning</button>  <button type="button" class="btn btn-danger">（危险）Danger</button>  <button type="button" class="btn btn-link">（链接）Link</button> </code></pre><p>按钮尺寸</p> <pre><code><button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button> <button type="button" class="btn btn-primary">（默认尺寸）Default button</button> <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button> <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button> </code></pre><p>块级按钮</p> <pre><code><button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button> </code></pre><p>图片<br />在 Bootstrap 版本 3 中，通过为图片添加 <code>.img-responsive</code> 类可以让图片支持响应式布局。其实质是为图片设置了 <code>max-width: 100%;</code>、 <code>height: auto;</code> 和 <code>display: block;</code> 属性，从而让图片在其父元素中更好的缩放。</p> <pre><code><img src="..." alt="..." class="img-rounded"> 方形圆角 <img src="..." alt="..." class="img-circle"> 圆形 <img src="..." alt="..." class="img-thumbnail"> 方形白色边框 </code></pre><p>图标<br />图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <code><span></code> 标签，并将图标类应用到这个 <code><span></code> 标签上。</p> <pre><code><span class="glyphicon glyphicon-search" aria-hidden="true"></span> </code></pre><p>其他网站图标：<br /><a rel="nofollow" href="https://fontawesome.dashgame.com/">https://fontawesome.dashgame.com/</a><br /><a rel="nofollow" href="http://www.fontawesome.com.cn/">http://www.fontawesome.com.cn/</a> 该网站完全兼容Bootstrap组件</p> <p>弹框<br /><a rel="nofollow" href="http://lipis.github.io/bootstrap-sweetalert/">http://lipis.github.io/bootstrap-sweetalert/</a></p>