48 bootstrap使用以及前端示例

1.介绍  我们使用v3版本
1.bootstrap 的部分组件  是基于jqery的  所以要引入jqery模块
  bootstrap 官网  https://v3.bootcss.com/

前端框架样式
    提前将很多样式都已经写好了 封装成了一个个的类
        .xxx {
        }
    只需要我们添加对应的样式类即可
        <input class='form-control'></input>

2.下载

我们只使用

bootstrap.min.css

bootstrap.min.js
fonts


3.两种引入方式：  可以本地引入  也可以cdn引入  bootcdn官网   https://www.bootcdn.cn/

<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>-->
<!--    cdn应用-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

2.使用

1.全局css

1.布局容器

    布局容器
        <div class="container">
            左右两边有留白
        </div>
        <div class="container-fluid">
            占满全屏
        </div>

栅格系统

栅格系统
        用row来划定行 默认一行是有12份的
        在使用bootstarp的时候 你需要做12以内的加减法
        
        用col-md-数字来划定份数 一行就12份
        
        控制左右移动
            col-md-offset-数字  从左往右移动几份

      <div class="container-fluid">
           <div class="row">
               <div class="col-md-3">

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

响应式布局栅格参数（了解）手机

2.排版

字体

text-center 居中相当于text-align

列表

表格（table）标签 class = "table table-hover table-striped table-bodered " 用的时候就一直table就好

table：表格样式，table-hover 悬浮样式 table-striped 层次分明 table-bodered 边框

颜色样式：class="waring danger suuccess primary info "

warning:黄色 danger ：红色 success：绿色 primary：蓝色

表单（form）样式：class = "form-control" 表单里面的标签都加form-control就好了

input框未输入红色提示 class=''has-error''

按钮样式 class = "btn btn-primary btn-sm btn-lg btn-xs" 可以给a标签和按钮设置样式

图片样式方形圆形方形圆角

字体颜色 class='text-primary '

背景颜色 class='bg-primary'

div 默认清除浮动

2.组件

1.图标span标签的class属性中

fontAwesome 专为做图标的网站支持cdn 和下载

我们只使用font-awesome-min.css

复制粘贴到页面即可

其它组件可以直接copy 详见bms使用

3. js插件

模态框下拉菜单标签页弹出框警告框

sweetalert 详见55.1




















1.博客园首页搭建(css 样式基础)