四时宝库

程序员的知识宝库

Blazor小白笔记14-Select选择器的使用

想在bootStrapblazor中实现用户登录,发现这一块坑是真多,分享一下

遇到的问题

1、.net8.0和以前的验证方式在写法上有些不一样,网上的例子大都是.net8.0以前的,可以参考,但照搬是没效果的。

Vue实战案例(vue经典案例)

??本文我们通过一个小案例来巩固下前面讲的内容,具体案例效果如下:

Angular和BootStrap的一个简单demo

Angular和BootStrap的一个简单demo

根据Angular5高级编程这本书第二章搭建的demo

参考博客:https://blog.csdn.net/crper/article/details/64443239

代码地址:https://github.com/Harry-ZH-Wang/AngularDemo

blazor小白笔记02-第三方UI控架(仪表小白笔记)

使用blazor自带的项目模版总感觉差点什么,像这种一般都会有第三方的UI库,感觉Bootstrap Blazor就不错,那就使用它吧,Bootstrap很贴心的提供了项目模板,下载安装就可以直接使用了,打开https://www.blazor.zone/template,点击传送门进行下载

jquery.dataTables 的简单应用(jquery datatype)

jquery.dataTables 为大家提供了丰富的表格渲染方案和分页方案 特别的适合后台应用

Datatables 是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

分页,即时搜索和排序

几乎支持任何数据源:DOM,javascript,Ajax 和服务器处理

初识BootStrap(初识只作乍见之欢,日后惊于久处不厌)

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。

初识BootStrap

1.简介:BootStrap是一个自适应式的ui框架,平时开发,对于呈现给用户的界面我们既要考虑到电脑端也要考虑到移动端,这样开发的时候难免思维会混乱,而且一般这都是要求开发两套界面出来的,耗时又耗力,但是BootStrap帮我们很好的解决了这个问题,它是自适应式的,无需我们设置,它会根据用户用的是电脑还是手机自行帮我们调节界面,我们只需专心开发一套界面即可。说到底,学习BootStrap其实就是在学习使用它的CSS样式和少量的JS。

「推荐」Vue PC端UI组件库|框架盘点

在使用vue开发项目的时候,一款好的UI组件库/插件会让开发效率大幅提升,起到事半功倍的效果。今天,就来盘点下,常用的vue+pc端UI组件库。

根据GitHub上 star 数量、文档丰富度等因素,整理了如下一些优秀的vue pc端 UI框架/组件库。文章篇幅可能有点长,耐心看完会有点点帮助的。

Docker安装Jenkins系统常用插件用途解析


系统平台

Bootstrap第四天学习(bootstrap深度学习)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常用样式</title>
        <link rel="stylesheet" type="text/css" 
            href="bootstrap/css/bootstrap.min.css"/>
    </head>
    <body>
        <!--
            1.列表
              无序列表(<ul><li>......</li></ul>)
              有序列表(<ol><li>......</li></ol>)
              定义列表(<dl><dt>......</dt><dd>......</dd></dl>)
            2.代码
              2.1 使用<code></code>来显示单行内联代码
              2.2 使用<pre></pre>来显示多行代码
                  样式:pre-scrollable(height,max-height高度固定,为340px,超过存在滚动条)
              2.3 使用<kbd></kbd>来显示用户输入代码,如快捷键
            3.表格
              3.1 基础样式(.table)
              3.2 斑马线表格(.table-striped)
              3.3 带边框的表格(.table-bordered)
              3.4 鼠标悬停高亮表格(.table-hover)
              3.5 紧凑型表格(.table-condensed),单元格没内距或者内距较其它表格的内距小
        -->

        <!--无序 列表-->
        <ul>
            <li>无序列表一</li>
            <li>无序列表二</li>
        </ul>
        <!--有序 列表-->
        <ol>
            <li>有序列表一</li>
            <li>有序列表二</li>
        </ol>
        <!--定义列表-->
        <dl>
            <dt>HTML</dt>
            <dd>超文本标记语言</dd>
            <dt>CSS</dt>
            <dd>层叠样式表是一种样式表语言</dd>
        </dl>
        <hr/>
        <!--去点列表-->
        <ul class="list-unstyled">
            <li>无序列表一</li>
            <li>无序列表二</li>
        </ul>
        <hr/>
        <!--内联列表-->
        <ul class="list-inline">
            <li>后端</li>
            <li>前端</li>
            <li>移动开发</li>
        </ul>
        <hr/>
        <!--自定义列表 内联列表-->
        <dl class="dl-horizontal">
            <dt>ls 指令</dt>
            <dd>默认浏览当前目录下的文件信息</dd>
            <dt>pwd 指令</dt>
            <dd>查看当前所在路径 </dd>
        </dl>

        <hr/><br>
        <!--使用<code></code>来显示单行内联代码-->
        这是一行代码<br/>
        <code>这是一行代码</code>

        <hr/>
        <!--快捷键-->
        <p>使用ctrl + s 保存内容</p>
        <p>使用<kbd>ctrl</kbd> + <kbd>s</kbd> 保存内容</p>

        <hr/>
        <!--多行代码-->
        <!--代码会保留原本的格式,包括空格和回车-->
        <pre>
public class Helloword{
    public void main(String[] args){
        System.out.println("Hello World!!!");
    }
}
        </pre>

        <!--如果要显示Html代码,需要使用字符实体-->
        <pre>
            <h2>你好</h2>
        </pre>

        <!--当长度超过指定值,可以添加滚动条-->
        <pre class="pre-scrollable">
            <ol>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
                <li>滚动条出来......</li>
            </ol>
        </pre>

        <hr/>

        <!--表格-->
        <table class="table table-bordered table-striped table-hover table-condensed">
            <tr class="info">
                <th>JavaSE</th>
                <th>数据库</th>
                <th>JavaScript</th>
            </tr>
            <tr class="success">
                <td>面向对象</td>
                <td>Oracle</td>
                <td>特效</td>
            </tr>
            <tr class="warning">
                <td>继承</td>
                <td>MySQL</td>
                <td>Ajax</td>
            </tr>
            <tr class="active">
                <td>IO流</td>
                <td>DB2</td>
                <td>函数</td>
            </tr>
        </table>
    </body>
</html>

响应式网格布局:应用Bootstrap最新版Grid

Bootstrap采用响应式12列的网格进行布局,非常简单易用。可以零基础几分钟搭建响应式的网格布局。这种布局包括以下几个要点:

一.网格布局构成

1.容器说明

  • container
<< 1 2 3 4 5 > >>
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接