（10.7国庆补写）框架的官网地址:https://v3.bootcss.com/

主要学习Bootstrap框架提供的样式、组件、插件的使用。

首先下载到本地，在项目中导入使用：

　　下载的文件中包含：min.css的是压缩的版本，建议使用，容量小加载比较快，

可以把其他的删掉，或者在导入使用的时候注意路径别选错了。

有网路的情况下，也可以用在线导入使用,BootCDN

强调:

1.bootstrap动态效果是依赖于jQuery的 所以你应该先导入jQuery

2.使用前端框架  所有的样式 都仅仅只需要用户条件标签类属性即可操作

3.bootstrap会将一行均分成12份
   row表示一行
   col-xxx...  表示多份

4.使用栅格系统 你脑子里一定要做一个数学运算   12 +- X = X

5.一个row里面还可以无限的嵌套row

一般都是成对的固定的导入：

手动拷贝想要的样式的html部分代码

首先学习全局CSS样式

　　设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

布局容器：

　　简单的理解就是，把拷贝过来的HTML框架代码复制过来，用class属性设置包裹起来，调节class实现调节样式的展示。

　　Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">

  ...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">

  ...

</div>

简单的使用class来调节属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="sweetalert/dist/sweetalert.css">

    <script src="sweetalert/dist/sweetalert.min.js"></script>

    <style>

        .c1 {

            background-color: red;

            height: 100px;

            border: 3px solid green;

        }

        @media screen and (max-width: 600px) {

            .c1 {

            background-color: blue;

            height: 100px;

            border: 3px solid green;

        }

        }

        span {

            color: green;

        }

    </style>

</head>

<body>

<div class="container ">

    <div class="row">

        <span class="glyphicon glyphicon-comment"></span>

栅格系统

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

1、“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

2、类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

3、如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

bootstrap会将一行均分成12份

动态解析static文件路径

修改背景颜色

栅格参数

实例：流式布容器

　　将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

起手使用框架时应该书写的：

<div class="container-fluid">

  <div class="row">

    ...

  </div>

</div>

排版

标题：

　　HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

字体着重

　　通过增加font-weight值强调一段文本

<strong>rendered as bold text</strong>

表格（重点）

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。

<table class="table">

  ...

</table>

设置表格颜色

单行或单元格设置颜色：

<!-- 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>

在书写table表格的时候可以先把几个参数一起写了，一个列表基本的样式都应该含有这些属性。

table-bordered:带边框的表格样式

table-hover:鼠标悬停

table-striped：有条纹的

table-condensed 类可以让表格更加紧凑

表单（重点）

　　单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、

<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。

将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

想让input框有样式，加入class=‘from-control’即可。

按钮

　　提交的按钮，跳转页面的按钮等，设置一些样式和属性。

可以作为按钮使用的标签或元素：

　　为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。

例子：

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

链接（<a>）元素

　　可以为基于 <a> 元素创建的按钮添加 .active 类。连接跳转

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

图片样式调节

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状。

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

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

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

情境文本颜色

　　通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，

并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

<p class="text-muted">...</p>

<p class="text-primary">...</p>

<p class="text-success">...</p>

<p class="text-info">...</p>

<p class="text-warning">...</p>

<p class="text-danger">...</p>

关闭按钮

　　通过使用一个象征关闭的图标，可以让模态框和警告框消失。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

快速浮动

　　通过添加一个类，可以将任意元素向左或向右浮动。!important 被用来明确 CSS 样式的优先级。

这些类还可以作为 mixin（参见 less 文档） 使用。

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

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

清除浮动

　　通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。此类还可以作为 mixin 使用。

<!-- Usage as a class -->

<div class="clearfix">...</div>

让内容块居中

　　为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。下面列出的类还可以作为 mixin 使用。

<div class="center-block">...</div>
// Class

.center-block {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

// Usage as a mixin

.element {

  .center-block();

}

在全局CSS样式中重点掌握以下几部分的使用

组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

Glyphicons 字体图标

直接复制用<span>标签包裹起来

Font Awesome 专业提供图标样式的网站，样式比较全面多一点

和框架的使用时一样的，先下载本地或用CDN导入使用，复制代码写入，适当修改即可

导航条

<nav class="navbar navbar-default">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">Brand</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <form class="navbar-form navbar-left">

        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

      </form>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">Link</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

表单

　　将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。

使用对齐选项可以规定其在导航条上出现的位置。

<form class="navbar-form navbar-left" role="search">

  <div class="form-group">

    <input type="text" class="form-control" placeholder="Search">

  </div>

  <button type="submit" class="btn btn-default">Submit</button>

</form>

反色的导航条

　　通过添加 .navbar-inverse 类可以改变导航条的外观。

分页

<nav aria-label="Page navigation">

  <ul class="pagination">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">&laquo;</span>

      </a>

    </li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">&raquo;</span>

      </a>

    </li>

  </ul>

</nav>

巨幕

　　这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。

<div class="jumbotron">

  <h1>Hello, world!</h1>

  <p>...</p>

  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

后续一些样式的详细的使用参考官方文档即可

动态弹框的使用，官网Bootstrap SweetAlert

实例：

弹框演示的样式效果

Primary、info、Success、warning、Danger对应的颜色

作业练习：

　　综合以上所学以及所涉及到的插件框架的使用，编写一个简易版本的图书管理系统。

复制Bootstrarp框架提供的导航条、表单、按钮等组件模板，进行适当的修改，添加样式调节使其达到更好的效果。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="fontawesome/css/font-awesome.min.css">

</head>

<body>

<nav class="navbar navbar-inverse">

    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">图书管理系统</a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav">

                <li class="active"><a href="#">书籍 <span class="sr-only">(current)</span></a></li>

                <li><a href="#">作者</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                       aria-expanded="false">更多查询 <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Action</a></li>

                        <li><a href="#">Another action</a></li>

                        <li><a href="#">Something else here</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">Separated link</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">One more separated link</a></li>

                    </ul>

                </li>

            </ul>

            <form class="navbar-form navbar-left">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Search">

                </div>

                <button type="submit" class="btn btn-default">Submit</button>

            </form>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#">Jason</a></li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

                       aria-expanded="false">更多操作 <span class="caret"></span></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">修改密码</a></li>

                        <li><a href="#">修改头像</a></li>

                        <li><a href="#">后台管理</a></li>

                        <li role="separator" class="divider"></li>

                        <li><a href="#">注销</a></li>

                    </ul>

                </li>

            </ul>

        </div><!-- /.navbar-collapse -->

    </div><!-- /.container-fluid -->

</nav>

<div class="container">

    <div class="row">

        <div class="col-md-3">

            <div class="list-group">

                <a href="#" class="list-group-item active">

                    书籍管理

                </a>

                <a href="#" class="list-group-item">作者管理</a>

                <a href="#" class="list-group-item">出版社管理</a>

                <a href="#" class="list-group-item">其他</a>

            </div>

        </div>

        <div class="col-md-9">

            <div class="panel panel-primary">

                <div class="panel-heading">

                    <h3 class="panel-title">图书管理系统

                        <span class="glyphicon glyphicon-book pull-right"></span>

                    </h3>

                </div>

                <div class="panel-body">

                    <a href="" class="pull-right btn btn-success">新增</a>

                    <form class="form-inline">

                        <div class="form-group">

                            <div class="input-group">

                                <input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">

                            </div>

                        </div>

                        <button type="submit" class="btn btn-primary">搜索</button>

                    </form>

                    <br>

                    <table class="table table-striped table-hover table-bordered">

                        <thead>

                        <tr>

                            <th>编号</th>

                            <th>书名</th>

                            <th>价格</th>

                            <th>作者</th>

                            <th class="text-center">操作</th>

                        </tr>

                        </thead>

                        <tbody>

                        <tr>

                            <td>1</td>

                            <td>三国演义</td>

                            <td>199.99</td>

                            <td>罗贯中</td>

                            <td class="text-center">

                                <a href="" class="btn btn-primary btn-sm">编辑</a>

                                <a href="" class="btn btn-danger btn-sm">删除</a>

                            </td>

                        </tr>

                        <tr>

                            <td>1</td>

                            <td>三国演义</td>

                            <td>199.99</td>

                            <td>罗贯中</td>

                            <td class="text-center">

                                <a href="" class="btn btn-primary btn-sm">编辑</a>

                                <a href="" class="btn btn-danger btn-sm">删除</a>

                            </td>

                        </tr>

                        <tr>

                            <td>1</td>

                            <td>三国演义</td>

                            <td>199.99</td>

                            <td>罗贯中</td>

                            <td class="text-center">

                                <a href="" class="btn btn-primary btn-sm">编辑</a>

                                <a href="" class="btn btn-danger btn-sm">删除</a>

                            </td>

                        </tr>

                        <tr>

                            <td>1</td>

                            <td>三国演义</td>

                            <td>199.99</td>

                            <td>罗贯中</td>

                            <td class="text-center">

                                <a href="" class="btn btn-primary btn-sm">编辑</a>

                                <a href="" class="btn btn-danger btn-sm">删除</a>

                            </td>

                        </tr>

                        <tr>

                            <td>1</td>

                            <td>三国演义</td>

                            <td>199.99</td>

                            <td>罗贯中</td>

                            <td class="text-center">

                                <a href="" class="btn btn-primary btn-sm">编辑</a>

                                <a href="" class="btn btn-danger btn-sm">删除</a>

                            </td>

                        </tr>

                        </tbody>

                    </table>

                    <div class="text-center">

                        <nav aria-label="Page navigation">

                        <ul class="pagination">

                            <li>

                                <a href="#" aria-label="Previous">

                                    <span aria-hidden="true">&laquo;</span>

                                </a>

                            </li>

                            <li><a href="#">1</a></li>

                            <li><a href="#">2</a></li>

                            <li><a href="#">3</a></li>

                            <li><a href="#">4</a></li>

                            <li><a href="#">5</a></li>

                            <li>

                                <a href="#" aria-label="Next">

                                    <span aria-hidden="true">&raquo;</span>

                                </a>

                            </li>

                        </ul>

                    </nav>

                    </div>

                </div><!-- /input-group -->

            </div>

        </div>

    </div>

</div>

</div>

</body>

</html>

搭建效果：

　　

　　

前端框架Bootstrap（10.7国庆补写）的更多相关文章

  1. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  2. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  3. 简洁灵活的前端框架------BootStrap

      前  言 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.[1] ...

  4. 前端框架——Bootstrap

    一.Bootstrap介绍 凡是使用过bootstrap的开发者,不外乎做这么两件事情:复制and粘贴. Bootstrap官方网址:http://www.bootcss.com Bootstrap, ...

  5. jQuery后续和 前端框架Bootstrap

    目录 一.jQuery后续 1. 动画效果 (1)自定义点赞动画实例 2. jQuery的自带方法 (1)each (类似for循环) (2)data() (存放隐形的数据) 二.前端框架之Boots ...

  6. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  7. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  8. 最受欢迎的前端框架 —— Bootstrap学习

    Bootstrap是Twitter的Mark Otto和Jacob Thornton开发的,是目前最受欢迎的前端框架,它简单灵活,使得Web前端开发更加快捷方便. 首先,要基本掌握Bootstrap框 ...

  9. 关于前端框架BootStrap和JQueryUI（以及相应的优秀模板）

    近期两个月因为须要升级公司产品的界面.所以不得不去学习了下原本并不熟悉的前端框架. 这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始非常easy,首先.须要得到所须要 ...

随机推荐

  1. Python属性和内建属性

    属性property 1. 私有属性添加getter和setter方法 class Money(object): def __init__(self): self.__money = 0 def ge ...

  2. Maven - 工作原理

    章节 Maven – 简介 Maven – 工作原理 Maven – Repository(存储库) Maven – pom.xml 文件 Maven – 依赖管理 Maven – 构建生命周期.阶段 ...

  3. Vue动态添加v-model绑定及获取其返回数据

    从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { retu ...

  4. import torch 报错

    1.进入官网   https://pytorch.org/ 2.复制command到anaconda环境,即可

  5. 201712-1 最小差值 Java

    思路: 也可以不排序,最后用abs就行 import java.util.Arrays; import java.util.Scanner; public class Main { public st ...

  6. 康冕峰IT技术总结博客CSDN索引

    计算1-x内的质数, 结果保存在mysql中. Java 程序员面试笔试宝典 4.1基础知识https://blog.csdn.net/qq_40993412/article/details/1040 ...

  7. Git 报错：Updates were rejected because the tip of your current branch is behind

    刚开始学习 git 命令,发现会出现很多的错误,所以就总结下出现的错误,以此来加深理解和掌握吧! 环境:在本地库操作了一系列的 add 和 commit 操作后,想把本地仓库推送到远端,但是发生以下错 ...

  8. house_cat 's blog

    本人蒟蒻,ACM退役选手 可能会刷刷CF,写一下笔记,学一点JAVA 欢迎指正:QQ:1468580561 不要忘记努力,不要辜负自己

  9. drf三大认证：认证组件-权限组件-权限六表-自定义认证组件的使用

    三大认证工作原理简介 认证.权限.频率 源码分析: from rest_framework.views import APIView 源码分析入口: 内部的三大认证方法封装: 三大组件的原理分析: 权 ...

  10. c#学习笔记06——XML

    XML概述:eXtensible Markup Language,可扩展标记语言.网络应用开发的一项新技术.同HTML一样是一种标记语言,但是数据描述能力要强很多.XML具有描述所有已知未知数据的能力 ...