zoukankan html css js c++ java

Bootstrap/Font-Awesome/sweetalert插件

Bootstrap框架

生产环境下载

https://v3.bootcss.com/getting-started/#download

CDN简介(内容分发网络)

https://www.bootcdn.cn/

bootstrap文件划分

js

只需要留一个bootstrap.min.js即可
css

只需要一个bootstrap.min.css即可
fonts

都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

注意

bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

实际网站示例

https://www.youzhan.org/

Normalize.css(不同浏览器样式一致性)

布局容器

container与container-fluid

栅格系统

row(行)
col(列)

<style>
        .red {
            background-color: red;
            border: 3px solid green;
            height: 100px;
        }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>
<!--
        6，6
        2，10
        1～12
        再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

媒体查询

<style>
                .c1 {
            background-color: red;
        }
        @media screen and (max- 600px){
            .c1 {
                background-color: green;
            }
        }
</style>                
<div class="col-md-6 red c1"></div>

响应式列重置

<style>
                .c2 {
            background-color: red;
        }
        .c3 {
            height: 60px;
        }
</style>
<div class="container">
    <div class="row">
  <div class="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
</div>
</div>

列偏移

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="lead">...</p>
<mark>highlight</mark>
<!--两者效果一样，但是语义不一样-->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>


<!--列表组-->
<ul class="list-unstyled">
  <li>...</li>
</ul>

<ul class="list-inline">
  <li>...</li>
</ul>

表格标签

<table class="table table-bordered table-hover table-striped"></table>
<tr class="active">...</tr>

表单

登陆示例
input框提示信息显影

按钮

<button class='btn-success/btn-info/btn-primary/btn-danger/btn-warning'>
  // 按钮
</button>

快速浮动

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

组件

<!--字体图标 意味着操作它跟操作普通文本一样   爱心图标举例-->
<!--图标大小可以通过调span标签所在的父标签调节-->

Font-Awesome简介

css
fonts

标签页

实际应用场景 >>> 购物网站物品各类信息(JS插件标签页)

JS插件

模态框

data参数绑定

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

自定义代码

$('#myModal').modal('show/hide')

sweetalert插件

https://lipis.github.io/bootstrap-sweetalert/

下载只需要用dist文件夹

swal('标题')
swal('标题','文本')
swal('标题','文本'，'success')
swal('标题','文本','warning')
swal('标题','文本','info')
swal('标题','文本','error')

练习

<!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 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>
    <link href="D:Bootstrapootstrap-3.3.7-distfonts" rel="stylesheet">
    <link href="D:Pycharmday50sweetalertdistsweetalert.css" rel="stylesheet">
    <link href="D:Pycharmday50sweetalertdistsweetalert.min.js" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse">
    <!-- 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="#">苟</a></li>
            <li><a href="#">利</a></li>
            <li><a href="#">国</a></li>
            <li><a href="#">家</a></li>
            <li><a href="#">生</a></li>
            <li><a href="#">死</a></li>
            <li><a href="#">已</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="搜索">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <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="#">岂</a></li>
            <li><a href="#">因</a></li>
            <li><a href="#">祸</a></li>
            <li><a href="#">福</a></li>
            <li><a href="#">避</a></li>
            <li><a href="#">趋</a></li>
            <li><a href="#">之</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
        <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>
            <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">
                      <form class="form-inline">
                          <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">搜索</label>
                            <div class="input-group">
                              <input type="text" class="form-control" id="exampleInputAmount" placeholder="搜索">
                            </div>
                          </div>
                          <button type="submit" class="btn btn-primary" >搜索</button>
                          <button type="button" class="btn btn-success pull-right">新增</button>
                        </form>
                      <br>
                    <table class="text-center table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">id</th>
                                <th class="text-center">书名</th>
                                <th class="text-center">价格</th>
                                <th class="text-center">作者</th>
                                <th class="text-center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>某哦某</td>
                                <td>999</td>
                                <td>某某</td>
                                <td>
                                    <a href="" class="btn btn-primary">编辑</a>
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                  </div>

                </div>
            </div>

    </div>
</div>
</body>
</html>

查看全文

相关阅读:
ASP.NET 2.0 中动态添加 GridView 模板列的例子
 ASP操作Excel技术总结
 JS实现下拉列表效果
 发布无限制版CodePlusV2.0(转载)
SQL行列转换(转载)
[转]详解C中volatile关键字
 [转]68013开发笔记之一
 清除计算机占用串口
 modelsim保存仿真波形
 SQL存储过程分页算法研究(支持千万级) 转

原文地址：https://www.cnblogs.com/zhukaijian/p/11508019.html