bootstrap

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量393 收藏 8
点赞数 4
文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_76122602/article/details/137406293
版权

1.导航条

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    {% load static %}
    <link
      rel="stylesheet"
      href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}"
    />
    <style>
      .navbar {
        border-radius: 0;
      }
    </style>
  </head>

  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <!-- 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="#">Link <span class="sr-only">(current)</span></a>
            </li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <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>

          <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>
    <div class="container"><p>新建</p></div>
    <script src="{% static 'js/jQuery-3.7/node_modules/jquery/dist/jquery.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
  </body>
</html>

2. 面板

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">Panel content</div>
</div>

3.表格

带边框条纹

<table class="table table-striped table-bordered">
  <tr>
    <td>hello</td>
    <td>hello</td>
    <td>hello</td>
    <td>hello</td>
  </tr>
</table>
Alexmaodali
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Bootstrap使用
m0_57774967的博客
04-24 5114
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
bootstrap-4.6.2
06-13
bootstrap4下载
Bootstrap入门
橘猫吃不胖的博客
01-14 2085
Bootstrap入门1 Bootstrap概述1.1 什么是Bootstrap1.2 Bootstrap的特点1.3 Bootstrap框架的组成2 Bootstrap环境配置2.1 Bootstrap下载2.2 使用时需要导入的文件2.3 文件的引用3 全局CSS样式3.1 布局容器3.2 标题3.3 页面主体3.4 内联文本元素3.5 文本对齐3.6 改变大小写3.7 列表3.8 表格 1 Bootstrap概述 1.1 什么是Bootstrap Bootstrap是一个基于HTML、CSS和Java
Bootstrap简介
归兮的博客
08-18 7192
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1724
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 5029
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap网页作业
m0_62221227的博客
04-19 4942
bootstrap网页作业
Bootstrap
CJW的博客
07-28 8146
Bootstrap Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript，它简洁灵活，使得 Web 开发更加快捷。 基本结构 Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 行内包含列，每行最多12列。 Bootstrap 网格的基本结构： <div clas
Bootstrap educoder
qq_46675545的博客
06-12 3589
Bootstrap Bootstrap入门
Bootstrap基础知识
li_peng_yuan的博客
11-14 4853
1 、什么是 Bootstrap? Bootstrap 的作用是什么? ​ Bootstrap 是基于 HTML、CSS、 Javascript 的前端框架. ​ 该框架已经预定义了一套 CSS 样式和与该样式对应的 JS 代码. (对应的样式有对应的特效) ​ 开发人员只需要编写 HTML 结构, 添加 Bootstrap 固定的 class 样式, 就可以轻松完成指定效果的实现. ​ 作用: Bootstrap 使得 Web 开发更加快捷、 高效. Bootstrap 支持响应式开发, 解决了移动
Bootstrap自适应
weixin_44112242的博客
04-04 8925
Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷 能制作响应式网页. bootstrap自适应: Bootstrap根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列 对应屏幕宽度为: 超小屏幕(手机):0-768px 对应设置 class=col-xs-number 小屏幕(平板):768-...
bootstrap.min.css
02-23
用于渲染前端静态页面
bootstrap旅游网站
02-09
bootstrap旅游网站
bootstrap 期末项目 设计报告 模板
07-18
Bootstrap 期末项目设计报告模板知识点总结 一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架，用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件，可以快速...
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 484
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1478
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1170
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 590
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alexmaodali

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值