• Bootstrap——Bootstrap学习笔记以及案例分享

    文章目录

    • 前言
    • 一、关于Bootstrap
    • 二、如何下载、使用
      • 1.下载（以版本 v3.4.1为例）
      • 2.使用以及基本模板
    • 三、案例分享
    • 总结

    一、关于Bootstrap

       Bootstrap   是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

    二、如何下载、使用

    1.下载（以版本 v3.4.1为例）

    官网——https://v3.bootcss.com/

    1.1  用于生产环境的 Bootstrap

    编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。

    1.2  Bootstrap 源码

    Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作

    2.使用以及基本模板

    拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。你可以对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

    ——不要忘记引入jQuery   bootstrap.js 以及 bootstrap.css   哦！！（bootstrap3依赖jQuery）

    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 101 Templatetitle>
    9.  
    10.     
    11.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    12.  
    13.     
    14.     
    15.     
    16.   head>
    17.   <body>
    18.     <h1>你好，世界！h1>
    19.  
    20.     
    21.     <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">script>
    22.     
    23.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">script>
    24.   body>
    25. html>

    三、案例分享

    1. 示例图

    已经初步了解Bootstrap，接下来就让我们通过下面这个案例进一步学习关于Bootstrap 的使用吧！——由于文章篇幅的关系，在这里就以一个页面的实现为例吧

    2.导航条的实现

    bootstrap组件的使用

    Bootstrap 自带了大量可复用的组件，如下图所示，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。以导航条的制作为例，bootstrap中的组件(在组件页面中)只需要直接复制保留需要的结构即可使用。    （下文较为复杂的页面结构在Bootstrap中都可找到并直接使用。）

    2.1 HTML结构

    1.  
    2.     <nav class="navbar navbar-default">
    3.         <div class="container">
    4.             
    5.             <div class="navbar-header">
    6.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
    7.                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    8.                     <span class="sr-only">Toggle navigationspan>
    9.                     <span class="icon-bar">span>
    10.                     <span class="icon-bar">span>
    11.                     <span class="icon-bar">span>
    12.                 button>
    13.                 <a class="navbar-brand" href="#">
    14.                     <img src="../img/logo.png" alt="logo">
    15.                 a>
    16.             div>
    17.  
    18.             
    19.             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    20.                 <ul class="nav navbar-nav navbar-right">
    21.                     <li>
    22.                         <a href="../html/index.html">
    23.                             <span class="glyphicon glyphicon-home" aria-hidden="true">span>
    24.                             首页
    25.                         a>
    26.                     li>
    27.                     <li class="active">
    28.                         <a href="#">
    29.                             <span class="glyphicon glyphicon-th-list" aria-hidden="true">span>
    30.                             资讯
    31.                         a>
    32.                     li>
    33.                     <li>
    34.                         <a href="案例.html">
    35.                             <span class="glyphicon glyphicon-picture" aria-hidden="true">span>
    36.                             案例
    37.                         a>
    38.                     li>
    39.                     <li>
    40.                         <a href="关于.html">
    41.                             <span class="glyphicon glyphicon-question-sign" aria-hidden="true">span>
    42.                             关于
    43.                         a>
    44.                     li>
    45.                 ul>
    46.             div>
    47.         div>
    48.     nav>

    2.2  CSS样式

    1. /* 导航栏区域样式设置 */
    2. .navbar {
    3.     margin-bottom: 0px;
    4. }
    5.  
    6. .navbar-brand {
    7.     padding: 0;
    8. }

    3. 新闻列表以及底部区域的实现

    3.1 HTML 结构

    1.  
    2.     <main>
    3.         <div class="container">
    4.             <div class="row">
    5.                 
    6.  
    7.                 <div class="col-md-8 col-xs-12">
    8.                     <div class="media">
    9.                         <div class="media-left ">
    10.                             <a href="#">
    11.                                 <img class="media-object" src="../img/info1.jpg" alt="...">
    12.                             a>
    13.                         div>
    14.                         <div class="media-body left">
    15.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    16.                             <p class="hidden-xs">
    17.                                 TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
    18.                             p>
    19.                             <span>admin 15 / 10 / 11span>
    20.                         div>
    21.                     div>
    22.                     <div class="media">
    23.                         <div class="media-left ">
    24.                             <a href="#">
    25.                                 <img class="media-object" src="../img/info1.jpg" alt="...">
    26.                             a>
    27.                         div>
    28.                         <div class="media-body left">
    29.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    30.                             <p class="hidden-xs">
    31.                                 TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
    32.                             p>
    33.                             <span>admin 15 / 10 / 11span>
    34.                         div>
    35.                     div>
    36.                     <div class="media">
    37.                         <div class="media-left ">
    38.                             <a href="#">
    39.                                 <img class="media-object" src="../img/info1.jpg" alt="...">
    40.                             a>
    41.                         div>
    42.                         <div class="media-body left">
    43.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    44.                             <p class="hidden-xs">
    45.                                 TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
    46.                             p>
    47.                             <span>admin 15 / 10 / 11span>
    48.                         div>
    49.                     div>
    50.                     <div class="media">
    51.                         <div class="media-left ">
    52.                             <a href="#">
    53.                                 <img class="media-object" src="../img/info1.jpg" alt="...">
    54.                             a>
    55.                         div>
    56.                         <div class="media-body left">
    57.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    58.                             <p class="hidden-xs">
    59.                                 TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
    60.                             p>
    61.                             <span>admin 15 / 10 / 11span>
    62.                         div>
    63.                     div>
    64.                     <div class="media">
    65.                         <div class="media-left ">
    66.                             <a href="#">
    67.                                 <img class="media-object" src="../img/info1.jpg" alt="...">
    68.                             a>
    69.                         div>
    70.                         <div class="media-body left">
    71.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    72.                             <p class="hidden-xs">
    73.                                 TVOS2.0是在TVOS1.0与华为MediaOS及阿里巴巴YunOS融合的基础上，打造的新一代智能电视操作系统。华为主要承担开发工作，内置的电视购物商城由阿里方面负责。
    74.                             p>
    75.                             <span>admin 15 / 10 / 11span>
    76.                         div>
    77.                     div>
    78.                 div>
    79.                 
    80.                 <div class="col-md-4 hidden-xs" style="background: #fff;">
    81.                     <div class="hot">热门资讯div>
    82.                     <div class="media">
    83.                         <div class="media-left">
    84.                             <a href="#">
    85.                                 <img class="media-object" src="../img/info1.jpg" id="special">
    86.                             a>
    87.                         div>
    88.                         <div class="media-body">
    89.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    90.                             <span>admin 15 / 10 / 11span>
    91.                         div>
    92.                     div>
    93.                     <div class="media">
    94.                         <div class="media-left">
    95.                             <a href="#">
    96.                                 <img class="media-object" src="../img/info1.jpg" id="special">
    97.                             a>
    98.                         div>
    99.                         <div class="media-body">
    100.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    101.                             <span>admin 15 / 10 / 11span>
    102.                         div>
    103.                     div>
    104.                     <div class="media">
    105.                         <div class="media-left">
    106.                             <a href="#">
    107.                                 <img class="media-object" src="../img/info1.jpg" id="special">
    108.                             a>
    109.                         div>
    110.                         <div class="media-body">
    111.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    112.                             <span>admin 15 / 10 / 11span>
    113.                         div>
    114.                     div>
    115.                     <div class="media">
    116.                         <div class="media-left">
    117.                             <a href="#">
    118.                                 <img class="media-object" src="../img/info1.jpg" id="special">
    119.                             a>
    120.                         div>
    121.                         <div class="media-body">
    122.                             <h4 class="media-heading">广电总局发布TVOS2.0 华为阿里参与研发h4>
    123.                             <span>admin 15 / 10 / 11span>
    124.                         div>
    125.                     div>
    126.                 div>
    127.             div>
    128.         div>
    129.     main>
    130.  
    131.  
    132.     <div class="footer">
    133.         <div class="footer-inner main">
    134.             <p class="text-center"><a href="#">企业培训a> | <a href="#">合作事宜a> | <a href="#">版权投诉a>p>
    135.             <p class="text-center">皖ICP 备12345678. © 2009-2016 艾特企训网. Powered by Bootstrap.p>
    136.         div>
    137.     div>

    3.2 CSS样式

    1. * 主体——新闻列表区域样式设置 */
    2. main {
    3.     background: rgb(238, 238, 238);
    4. }
    5.  
    6. .row {
    7.     margin: 40px 0px;
    8. }
    9.  
    10. .media {
    11.     padding: 15px;
    12.     background: #fff;
    13. }
    14.  
    15. .media img {
    16.     height: 70px;
    17. }
    18.  
    19. .media-body>h4 {
    20.     margin-bottom: 5px;
    21.     color: #333;
    22.     margin-top: 0;
    23.     margin-bottom: 5px;
    24.     font-size: 14px;
    25. }
    26.  
    27. .media-body>p {
    28.     line-height: 26px;
    29.     padding-top: 10px;
    30. }
    31.  
    32. .hot {
    33.     font-size: 18px;
    34.     padding-bottom: 0px;
    35.     border-left: 5px solid #000;
    36.     height: 30px;
    37.     line-height: 30px;
    38.     padding-left: 15px;
    39.     margin-left: 15px;
    40.     margin-top: 15px;
    41. }
    42.  
    43. .row .hidden-xs {
    44.     padding-left: 0;
    45. }
    46.  
    47. .row .hidden-xs .media-body {
    48.     padding-left: 0px;
    49. }
    50.  
    51. .row .hidden-xs h4 {
    52.     font-size: 16px;
    53.     line-height: 26px;
    54. }
    55.  
    56. #special {
    57.     height: 85px;
    58. }
    59.  
    60. /* 底部区域样式设置 */
    61. .footer {
    62.     background: #666666;
    63.     color: #eee;
    64.     padding: 25px 0 10px 0;
    65. }
    66.  
    67. .footer a {
    68.     color: #eee;
    69. }
    70.  
    71. .footer p {
    72.     margin-bottom: 10px;
    73. }
    74. @media (max-width: 1000px){
    75.     .hidden-xs{
    76.         display: none;
    77.     }
    78. }
    79. @media (min-width: 1200px) {
    80.     .container{
    81.         width: 1700px;
    82.     }
    83.  
    84.     .media img {
    85.         height: 170px;
    86.     }
    87.  
    88.     .col-md-4 {
    89.         width: 33.33333333%;
    90.     }
    91.  
    92.     .left {
    93.         padding-left: 15px;
    94.     }
    95.  
    96.     .media-body>h4 {
    97.         font-size: 20px;
    98.     }
    99.  
    100.     .container {
    101.         width: 1170px;
    102.     }
    103.  
    104.     .outer {
    105.         padding: 50px 0px;
    106.     }
    107.  
    108.     ;
    109.  
    110.     .container {
    111.         width: 1170px;
    112.     }
    113.  
    114.     .eight {
    115.         width: 66.66666667%;
    116.     }
    117.  
    118.     .four {
    119.         width: 33.33333333%;
    120.     }
    121.  
    122.     .news>.news-right {
    123.         width: 58%;
    124.  
    125.         padding-left: 15px;
    126.  
    127.     }
    128.  
    129.     .news-left img {
    130.         height: 170px;
    131.     }
    132.  
    133.     .news-right h4 {
    134.         font-size: 20px;
    135.     }
    136.  
    137.     .news-right p {
    138.         line-height: 26px;
    139.         padding-top: 10px;
    140.     }
    141.  
    142.     .news-right span {
    143.         font-size: 14px;
    144.     }
    145. }

  • 相关阅读:
    Linux命令基本用法
    计算机毕设 大数据工作岗位数据分析与可视化 - python flask
    Python 实现Web API
    MapReduce Crashed SQL
    话费充值接口文档
    视频批量AI智剪：提升剪辑效率的秘密方法
    基于imx6ul下调试tlv320aic3x声卡
    【vulhub】MySql身份认证绕过漏洞复现(CVE-2012-2122)
    零基础教程：Yolov5模型改进-添加13种注意力机制
    Crossplane-云基础架构管理平台
  • 原文地址：https://blog.csdn.net/Bonsoir777/article/details/126950434