.net bootstrap 下拉树状选择框_第二课使用Bootstrap美化页面

最新推荐文章于 2024-05-01 07:54:26 发布
最新推荐文章于 2024-05-01 07:54:26 发布
阅读量192 收藏
点赞数
文章标签： .net bootstrap 下拉树状选择框 bootstrap 可视化布局工具 bootstrap左右布局模板

第二课美化页面

我们开发网站项目的时候，都会遇到这样的问题：就是页面怎么统一风格，有一致的外观，在之前http://ASP.NET的时代，我们有两种选择，一个是使用母版页（MasterPage页），一个是手动设置，自己在每个页面写CSS样式，但这样代码量太大，不是程序员的做法，那么到了http://ASP.NET MVC时代，有什么技术可以统一页面风格呢？有，那就是Layout布局视图。本节课将以著名的bootstrap为例开始学习。

  1. 建立MVC5空模板项目GrandCanal
  2. Vs->工具->nuGet包管理器->程序包管理控制台，输入如下命令安装bootstrap程序包。

Install-Package bootstrap -Version 4.4.1

  1. 安装完成如下所示。

9b6990d1e397375e6bc089ece7c96033.png
  1. 点击解决方案资源管理器的Content、Scripts发现有了内容。

89b3c5834e83a5f41895a377c49c5475.png
  1. 在【Views】文件夹下，新建一个【Shared】文件夹，在Shared文件夹下，新建一个MVC5布局页（Razor）。

19bf4309ee34a491919bc422784b2015.png
  1. 引用bootstrap的css和js

依据https://v4.bootcss.com/docs/getting-started/introduction/的说法:

将 Bootstrap 的 CSS 文件以 <link> 标签的形式添加到 <head> 标签中，并放置在所有其它样式表之前就行了。Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到页面尾部且在 </body> 标签之前即可起作用。他们之间的顺序是： jQuery 必须排在第一位，然后是 Popper.js，最后是我们的 JavaScript 插件。

  1. 新建一个控制器Home，创建对应的Index视图，指定我们刚才创建的布局页.

a874cb25ebdbd079c351a190343bae66.png
  1. 运行程序

ac6d337315970238150ccbcee63d93e1.png
weixin_39622587
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap treeview 树形菜单带复选框及级联选择功能
12-29
具体代码如下所示： <div id=searchTree></div> [removed] var treeData = [{ text: Parent 1, nodes: [{ text: Child 1, nodes: [{ text: Grandchild 1 }, { text: Grandchild 2, nodes: [{ text: Grandchild 2-1, nodes: [{ text: Grandchild 2-1-1 }
bootstrap .net mvc5 ef 高端后台快速开发框架源码分享
01-31
mvc5 ef高端后台快速开发框架源码分享，数据在DB（文件夹中），使用框架，需修改Configs文件夹里面的database.config连接自己的数据库（极限sql server数据库）
使用插件bootstrap-treeview构建树形结构，使用JAVA递归构建树形结构的数据
玩火的稻草人的博客
03-25 1886
最近把项目中的树形插件换成了bootstrap-treeview，把使用过程中的事情和大家分享一下。 1、下载bootstrap-treeview插件，把css和js引入到项目中 <!-- bootstrap-treeview --> <link rel="stylesheet" href="${path}/js/bootstrap-treeview/css/bootstra......
ASP.NET Core Web + Bootstrap企业级快速后台开发框架：内置模块、数据库支持，员工管理、部门管理、定时任务配置、系统日志等
最新发布
QDAtpoyX的博客
05-01 1355
总结来说，ASP.NET Core Web + Bootstrap的企业级快速后台开发框架提供了丰富的内置模块和功能，包括用户管理、部门管理、菜单管理、角色权限设置、日志管理、新闻管理等。本文将介绍一个基于ASP.NET Core Web和Bootstrap的企业级快速后台开发框架，该框架具有内置的模块如用户管理、部门管理、菜单管理、角色权限设置、日志管理、新闻管理等。内置模块如：用户管理、部门管理、菜单管理、角色权限设置、日志管理、新闻管理等。角色管理：角色菜单权限分配，角色对应权限，员工属于某个角色。
.net bootstrap 下拉树状选择框_基于element封装tree树状下拉框
weixin_39917211的博客
11-25 494
在日常项目开发中，树状下拉框的需求还是比较常见的，但是element并没有这种组件以供使用。在这里，小编就基于element如何封装一个树状下拉框做个详细的介绍。通过这篇文章，你可以了解学习到一个树状下拉框组件是如何一步一步封装成功的。话不多说，先看效果图：封装组件该组件主要基于element的select组件、tree组件及input组件进行二次封装的。组件布局首先我们需要基于这几个组...
JS组件系列——Bootstrap 树控件使用经验分享
weixin_33755847的博客
01-12 831
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。 一、JQuery树形控件 Jquery树形控件是一款基...
WebUI.zip_bootstrap easyui_easyui框架_miniui_前端框架
09-20
接下来是EasyUI，这是一个基于jQuery的UI框架，提供了大量的可重用的UI组件，如数据表格、下拉菜单、树形结构、对话框等。EasyUI的目标是帮助开发者快速构建用户界面，减少手动编写CSS和JavaScript的工作量。其组件...
bootstrap框架下带搜索功能的下拉树插件
04-23
4. **构建`bootstrap-treeview`**：在同一页面中，创建一个用于显示树形结构的容器，例如一个`<div>`元素。然后，使用`bootstrap-treeview`的API来填充树的数据，如`$('#treeview').treeview({data: treeData})`，...
bootstrap-下拉选择树.zip
09-13
总之，Bootstrap下拉选择树是一种将树形结构与下拉菜单相结合的组件，它为用户提供了更直观、高效的多级选项选择方式。理解和掌握其原理与实现，对于提升网页的用户体验和交互性大有裨益。在实际项目中，可以根据...
jsp+bootstrap-treeview树形下拉菜单
weixin_45304613的博客
12-08 1185
目录前端Controller层service层Treeselect树结构实体类model类 前端 移动至输入框内自动显示，移出输入框自动隐藏 <link href="/webjars/bootstrap/3.3.6/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/bootstrap-treeview.min.css" rel="stylesheet" /> #tv { margin-top: 0; width
bootstrap-select 使用详解
liwan09的博客
01-09 4万+
下载地址：https://developer.snapappointments.com/bootstrap-select/ 示例地址：https://developer.snapappointments.com/bootstrap-select/examples/ 参数详解地址：https://developer.snapappointments.com/bootstrap-select/op...
ASP.NET mvc tree 树 类似 TreeView 控件
08-31
mvc tree 树 支持mvc2 mvc3 具体请查看调用列子，很简单的。使用请详细看TreeData每个字段的意义。和asp.net 种TreeView 控件一样。
ASP.NET MVC4+EF6+Bootstrap3 通用后台管理系统(含权限)
06-27
框架使用场景：OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统
Bootstrap整理的各种后台管理模块和树状结构导航
08-15
Bootstrap整理的各种后台管理模块和树状结构导航
bootstrap树形下拉框 下拉框树形菜单
07-26
bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示，带树形的下拉框
ASP.NET C#生成下拉列表树
weixin_30852451的博客
02-06 201
效果图: 代码: using System.Data; using System.Web.UI.WebControls; /// <summary> /// 根据DataTable生成下拉列表树 /// </summary> public class DropDownListHelp { private string gridlin...
ASP.NET MVC+Bootstrap 实现短信验证
陌上花开，可缓缓归矣
08-11 1万+
短信验证大家都已经很熟悉了，基本上每天都在接触手机短信的验证码，比如某宝，某东购物，网站注册，网上银行等等，都要验证我们的手机号码真实性。这样做有什么好处呢。 以前咱们在做网站的时候，为了提高用户注册的质量，防止用户恶意注册，都会设置一些小阻碍，如网页验证码、邮件认证等等。但是道高一尺魔高一丈，很快网站的这些设置都被一些网络黑客利用注册机逐一攻破，这些功能也就随之变成了摆设。 但是魔高一丈道高两丈，
bootstrap风格的树形插件bootstrap treeview的使用记录
热门推荐
security_2015的博客
03-12 5万+
bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件，该jQuery插件基于Twitter Bootstrap。写这篇文章的目的在于记录下使用方法，以期后用。 一、插件官网：https://jquery-plugins.net/bootstrap-tree-view 二、demo示例：http://jonmiles.github.io/boo...
bootstrap下拉选择框传值
12-01
在使用Bootstrap下拉多选框进行多选时，需要在HTML代码中设置name属性为相同的值，这样在提交表单时，后台就可以获取到多选的值。以下是一个例子： ```html <form action="submit.php" method="post"> <div class="form-group"> <label for="exampleFormControlSelect2">Example multiple select</label> <select multiple class="form-control" id="exampleFormControlSelect2" name="example"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> ``` 在上面的例子中，我们设置了name属性为example，这样在提交表单时，后台就可以通过$_POST['example']获取到多选的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值