Python学习笔记第二十七周（Bootstrap）

　　全局样式

　　一、栅格系统

　　二、表单

　　三、按钮

　四、导航

　　五、按钮组

　　六、面板

　　七、表格

　　八、分页

　　九、排版

　　十、图片

　　十一、辅助类

　　十二、响应式工具

　　组件

内容：

　　前言：

　　首先通过https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css 链接下载bootstrap.min.css保存到本地，然后执行下面操作

　　全局样式：

　　一、栅格系统

　　　　栅格系统是页面布局使用，是区分列布局使用的，一般bootstrap将整个页面分为12份，可以任意组合自己想要的列分割方式，在div标签中使用col-XX的方式来实现，该方式有几种方法：

1. col-md-XX 其中md表示中等距离，XX表示一共分几分，例如，四个div标签，如果想并排且等分，可以使用class=‘col-md-3’来实现
2. col-sm-XX sm表示小，XX同上
3. col-xs-XX xs表示极小，XX同上

　　例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
     col代表列的意思，md表示样式，默认分成12分，4代表三个元素每个占3分之一
    <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-md-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
     <!--小使用sm-->
    <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-sm-3">Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>

    #布局实例，左面和右面是两份，中间是8份,一共12份
    <div class="col-sm-2">
        <h3>主侧栏</h3>
        Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-sm-8">
        <h3>内容</h3>
        Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>
    <div class="col-sm-2">
        <h3>右侧栏</h3>
        Bootstrap （当前版本 v3.3.7）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
        继续阅读下面的内容，看看哪种方式适合你的需求吧。</div>


</body>
</html>

栅格系统