• JavaWeb---BootStrap

    目录

    1.Bootstrap：

    1.1概念：

    1.2快速入门

    1.2响应式布局

    1.2.1实现：

    1.2.2步骤：

    1.3CSS样式和JS插件

    1.3.1全局CSS样式：

    1.3.2组件：

    1.3.3插件：

    1.Bootstrap：

    1.1概念：

    一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
    框架的定义:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

    好处：
    1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
    2. 响应式布局：同一套页面可以兼容不同分辨率的设备。

    1.2快速入门

    1. 下载Bootstrap：bootstrap-3.3.7-dist
    2. 在项目中将这三个文件夹复制：


    3. 创建html页面，引入必要的资源文件：

     

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18. head>
    19. <body>
    20. <h1>你好，世界！h1>
    21.  
    22. body>
    23. html>

    1.2响应式布局

    同一套页面可以兼容不同分辨率的设备。

    1.2.1实现：

    依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

    1.2.2步骤：

    1. 定义容器：相当于之前的table。
    容器分类：
    container：两边留白。
    container-fluid：每一种设备都是100%宽度。
    2. 定义行：相当于之前的tr，样式：row。
    3. 定义元素：指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
    设备代号：
    xs：超小屏幕 手机 (<768px)：col-xs-12
    sm：小屏幕 平板 (≥768px)
    md：中等屏幕 桌面显示器 (≥992px)
    lg：大屏幕 大桌面显示器 (≥1200px)

    注意：
    1. 一行中如果格子数目超过12，则超出部分自动换行。
    2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
    3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行（不向下兼容）。

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18.     <style>
    19.         .inner{
    20.             border:1px solid red;
    21.         }
    22.  
    23.     style>
    24. head>
    25. <body>
    26.     
    27.     <div class="container">
    28.         
    29.         <div class="row">
    30.             
    31.             
    32.             <div class="col-md-4 inner">栅格div>
    33.             <div class="col-md-4 inner">栅格div>
    34.             <div class="col-md-4 inner">栅格div>
    35.  
    36.         div>
    37.  
    38.     div>
    39.  
    40. body>
    41. html>

    1.3CSS样式和JS插件

    1.3.1全局CSS样式：

    1.按钮：class="btn btn-default"
    2.图片：class="img-responsive"：图片在任意尺寸都占100%
    图片形状：
    ...：方形
    ... ： 圆形
    ... ：相框

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18.     <style>
    19.  
    20.     style>
    21. head>
    22. <body>
    23.  
    24. <a class="btn btn-default" href="#" >Linka>
    25. <button class="btn btn-default" type="submit">Buttonbutton>
    26. <input class="btn btn-default"  type="button" value="Input">
    27. <input class="btn btn-default" type="submit" value="Submit">
    28.  
    29. <br>
    30.  
    32. <button type="button" class="btn btn-primary">（首选项）Primarybutton>
    33.  
    35. <button type="button" class="btn btn-success">（成功）Successbutton>
    36.  
    38. <button type="button" class="btn btn-info">（一般信息）Infobutton>
    39.  
    41. <button type="button" class="btn btn-warning">（警告）Warningbutton>
    42.  
    44. <button type="button" class="btn btn-danger">（危险）Dangerbutton>
    45.  
    47. <button type="button" class="btn btn-link">（链接）Linkbutton>
    48.  
    49.  
    50. <hr>
    52. <img src="img/banner_1.jpg" class="img-responsive"/>
    54. <img src="img/banner_1.jpg" class="img-responsive img-rounded" />
    55. <img src="img/banner_1.jpg" class="img-responsive img-circle"/>
    56. <img src="img/banner_1.jpg" class="img-responsive img-thumbnail"/>
    57.  
    58.  
    59. body>
    60. html>

    3.表格
    table
    table-bordered
    table-hover

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18.     <style>
    19.  
    20.     style>
    21. head>
    22. <body>
    23.  
    24.     <table class="table table-bordered table-hover">
    25.  
    26.         <tr>
    27.             <th>编号th>
    28.             <th>姓名th>
    29.             <th>年龄th>
    30.  
    31.         tr>
    32.         <tr>
    33.             <td>001td>
    34.             <td>张三td>
    35.             <td>23td>
    36.         tr>
    37.         <tr>
    38.             <td>002td>
    39.             <td>张三td>
    40.             <td>23td>
    41.         tr>
    42.         <tr>
    43.             <td>003td>
    44.             <td>张三td>
    45.             <td>23td>
    46.         tr>
    47.  
    48.     table>
    49.  
    50. <hr><hr><hr>
    51.  
    52.  
    53.     <form class="form-horizontal">
    54.         <div class="form-group">
    55.             <label for="exampleInputEmail1" class="col-sm-2 control-label">Email addresslabel>
    56.  
    57.            <div class="col-sm-10">
    58.             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    59.            div>
    60.         div>
    61.         <div class="form-group">
    62.             <label for="inputPassword3" class="col-sm-2 control-label">Passwordlabel>
    63.             <div class="col-sm-10">
    64.                 <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    65.             div>
    66.         div>
    67.         <div class="form-group">
    68.             <div class="col-sm-offset-2 col-sm-10">
    69.                 <div class="checkbox">
    70.                     <label>
    71.                         <input type="checkbox"> Remember me
    72.                     label>
    73.                 div>
    74.             div>
    75.         div>
    76.         <div class="form-group">
    77.             <div class="col-sm-offset-2 col-sm-10">
    78.                 <button type="submit" class="btn btn-default">Sign inbutton>
    79.             div>
    80.         div>
    81.     form>
    82. body>
    83. html>

    4.表单

    给表单项添加：class="form-control"

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18. head>
    19. <body>
    20. <nav class="navbar navbar-inverse">
    21.     <div class="container-fluid">
    22.         
    23.         <div class="navbar-header">
    24.             
    25.             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    26.                 <span class="sr-only">Toggle navigationspan>
    27.                 <span class="icon-bar">span>
    28.                 <span class="icon-bar">span>
    29.                 <span class="icon-bar">span>
    30.             button>
    31.             <a class="navbar-brand" href="#">首页a>
    32.         div>
    33.  
    34.         
    35.         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    36.             <ul class="nav navbar-nav">
    37.                 <li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li>
    38.                 <li><a href="#">Linka>li>
    39.                 <li class="dropdown">
    40.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
    41.                     <ul class="dropdown-menu">
    42.                         <li><a href="#">Actiona>li>
    43.                         <li><a href="#">Another actiona>li>
    44.                         <li><a href="#">Something else herea>li>
    45.                         <li role="separator" class="divider">li>
    46.                         <li><a href="#">Separated linka>li>
    47.                         <li role="separator" class="divider">li>
    48.                         <li><a href="#">One more separated linka>li>
    49.                     ul>
    50.                 li>
    51.             ul>
    52.             <ul class="nav navbar-nav navbar-right">
    53.                 <li><a href="#">Linka>li>
    54.                 <li class="dropdown">
    55.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a>
    56.                     <ul class="dropdown-menu">
    57.                         <li><a href="#">Actiona>li>
    58.                         <li><a href="#">Another actiona>li>
    59.                         <li><a href="#">Something else herea>li>
    60.                         <li role="separator" class="divider">li>
    61.                         <li><a href="#">Separated linka>li>
    62.                     ul>
    63.                 li>
    64.             ul>
    65.         div>
    66.     div>
    67. nav>
    68.  
    69. body>
    70. html>

    1.3.2组件：

    导航条
    分页条

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18. head>
    19. <body>
    20. <nav aria-label="Page navigation">
    21.     <ul class="pagination">
    22.         <li class="disabled">
    23.             <a href="#" aria-label="Previous">
    24.                 <span aria-hidden="true">«span>
    25.             a>
    26.         li>
    27.         <li><a href="#">1a>li>
    28.         <li class="active"><a href="#">2a>li>
    29.         <li><a href="#">3a>li>
    30.         <li><a href="#">4a>li>
    31.         <li><a href="#">5a>li>
    32.         <li>
    33.             <a href="#" aria-label="Next">
    34.                 <span aria-hidden="true">»span>
    35.             a>
    36.         li>
    37.     ul>
    38. nav>
    39. body>
    40. html>

    1.3.3插件：

    轮播图

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    7.     
    8.     <title>Bootstrap HelloWorldtitle>
    9.  
    10.     
    11.     <link href="css/bootstrap.min.css" rel="stylesheet">
    12.  
    13.  
    14.     
    15.     <script src="js/jquery-3.2.1.min.js">script>
    16.     
    17.     <script src="js/bootstrap.min.js">script>
    18. head>
    19. <body>
    20. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    21.     
    22.     <ol class="carousel-indicators">
    23.         <li data-target="#carousel-example-generic" data-slide-to="0" class="active">li>
    24.         <li data-target="#carousel-example-generic" data-slide-to="1">li>
    25.         <li data-target="#carousel-example-generic" data-slide-to="2">li>
    26.     ol>
    27.  
    28.     
    29.     <div class="carousel-inner" role="listbox">
    30.         <div class="item active">
    31.             <img src="img/banner_1.jpg" alt="...">
    32.         div>
    33.         <div class="item">
    34.             <img src="img/banner_2.jpg" alt="...">
    35.         div>
    36.         <div class="item">
    37.             <img src="img/banner_3.jpg" alt="...">
    38.         div>
    39.  
    40.     div>
    41.  
    42.     
    43.     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    44.         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    45.         <span class="sr-only">Previousspan>
    46.     a>
    47.     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    48.         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    49.         <span class="sr-only">Nextspan>
    50.     a>
    51. div>
    52.  
    53.  
    54.  
    55. body>
    56. html>

  • 相关阅读:
    Java 遍历字符串 和 截取码点
    通用Excel表格导出（Map类型数据导出为表格）
    windows系统pycharm程序通过urllib下载权重https报错解决
    dockerfile里的copy只能使用相对路径吗？
    C++学习 --文件
    Django 联表查询操作
    【Android】Binder的Oneway拦截
    移动安全规范 — 1 -WIFI连接安全规范
    java计算机毕业设计高校开放式实验室管理系统源码+mysql数据库+系统+lw文档+部署
    Django搭建一个简易GPT网站
  • 原文地址：https://blog.csdn.net/weixin_65440201/article/details/126091844