adminlte中文文档.pdf-资料库

布局 Layout 1. 包装，.wrapper .一个 div 包裹整个网站 2. 主标题 , .main-header .控制标志和导航栏 3. 侧边栏， .sidebar-wrapper .控制用户面板和侧边栏菜单 4. 内容， .content-wrapper 。控制网页标题和内容提示！启动页面是一个你想从头开始建立你的应用程序很好的地方。布局选项 Layout Options adminlte 2 提供了一组选项适用于您的主要布局。这些类中的每一个都可以添加到身体标签上，以获得所需的目标。固定：使用类.fixed 固定头和侧边栏。侧边栏：使用类.sidebar-collapse 加载侧边栏。盒布局：使用类.layout-boxed 得到盒装布局延伸，只有 1250px。顶部导航：使用类.layout-top-nav 去除边栏顶部导航栏并设置你的链接。注意：您不能同时使用.layout-boxed 和.fixed。其他任何东西都可以混合在一起。页面皮肤 Skin 皮肤可以被发现在 dist/css/skins 文件夹。选择要添加的皮肤文件，然后向 body 标签添加适当的类，以改变模板的外观。 AdminLTE Javascript 选项修改 adminlte app.js 选项可以使用下列方式之一。 1. 编辑 app.js 在主要的 JavaScript 文件中，修改$.AdminLTE.options 对象来适应你的使用情况。 2.定义 adminlteoptions 或者，你可以定义一个全局变量名 AdminLTEOptions 在加载前 app.js 初始化选项。例子可用的 AdminLTE 选项 { /添加到导航栏菜单 slimscroll //需要你在 app.js 中加载每个页面的 slimscroll 插件 navbarMenuSlimscroll: true, navbarMenuSlimscrollWidth: "3px", // scroll 条的宽度 navbarMenuHeight: "200px", // inner menu 的高度 / / JS 动画元素的一般的动画速度，如箱折叠/展开和边栏 TreeView 的向上/向下滑动。这个选项接受一个整数单位为毫秒，或者'fast '，'正常'，或'慢' animationSpeed: 500, //侧边栏菜单切换按钮选择 sidebarToggleSelector: "[data-toggle='offcanvas']", //激活菜单栏 sidebarPushMenu: true,

//激活侧边栏 slimscroll 的固定布局设置（需要 slimscroll 插件） sidebarSlimScroll: true, / /启用边栏扩大，侧边栏迷你效果 / /当固定布局和侧边栏迷你一起使用时这个选项为 true sidebarExpandOnHover: false, //BoxRefresh 插件 enableBoxRefresh: true, //Bootstrap.js 提示框 enableBSToppltip: true, BSTooltipSelector: "[data-toggle='tooltip']", // 启用快速点击。fastclick.js 创建一个触摸设备使用更多的本地触摸体验。如果您选择启用插件，确保你加载脚本之前的 adminlte app.js enableFastclick: true, //Control Sidebar Options enableControlSidebar: true, controlSidebarOptions: { //哪个按钮应该触发打开/关闭事件 toggleBtnSelector: "[data-toggle='control-sidebar']", //侧边栏选择 selector: ".control-sidebar", //启用幻灯片内容 slide: true }, //盒子部件插件。启用这个插件，允许框折叠和/或删除 enableBoxWidget: true, //盒子部件插件选项 s boxWidgetOptions: { boxWidgetIcons: { //Collapse icon collapse: 'fa-minus', //Open icon open: 'fa-plus', //Remove icon remove: 'fa-times' }, boxWidgetSelectors: { //删除按钮选择 remove: '[data-widget="remove"]', //折叠按钮的选择 collapse: '[data-widget="collapse"]' } }, //直接聊天插件选项 directChat: { //默认情况下启用直接聊天 enable: true, //打开和关闭聊天联系人窗格的按钮 contactToggleSelector: '[data-widget="chat-pane-toggle"]' }, //设置全部网站定义颜色使用 colors: { lightBlue: "#3c8dbc", red: "#f56954", green: "#00a65a", aqua: "#00c0ef", yellow: "#f39c12", blue: "#0073b7", navy: "#001F3F", teal: "#39CCCC", olive: "#3D9970", lime: "#01FF70", orange: "#FF851B", fuchsia: "#F012BE", purple: "#8E24AA", maroon: "#D81B60",

black: "#222222", gray: "#d2d6de" }, //引导使用的标准屏幕大小。 //如果你想在 variables.less 文件改变这些，在这里改变他们。 screenSizes: { xs: 480, sm: 768, md: 992, lg: 1200 } } 组件 Components 提醒! adminlte 使用 Bootstrap 3 组件。这是一个回顾 Bootstrap 文件很好的开始，以获得一个想法的各种组件，本文档没有被覆盖。提示！如果你想通过示例页去复制一个组件，到 HTML 右键单击该组件并选择“inspect element” 比扫描 HTML 页面更快。主标题主标题包含标志和导航栏。在 Bootstrap 导航栏结构略有不同，因为 Bootstrap 不提供它的组件。导航栏中可以有两种方式构造。这是一个正常导航栏的例子，下一步我们将以导航栏的顶部导航布局为例。主标题例子：顶部导航布局。主标题实例提醒! 使用这个主标题和一般的不一样，你必须添加布局顶部导航类的标签。顶部导航的例子

侧边栏提供了一个例子，在本页面左侧使用侧边栏，你的侧边栏应该像这样。创建一个侧边栏：

控制栏控制工具条右侧栏。它可以用于许多用途，是非常容易创建。侧边栏有两个不同的显示/隐藏方式。第一个允许侧边栏滑动的内容。第二推动内容的侧边栏的空间。这些方法可以通过 JavaScript 选项来设置。下面的代码应该放在.wrapper div，我更喜欢把它防在右后的页脚。暗侧边栏标记亮侧边栏标记一旦你创建工具，你将需要一个切换按钮打开 / 关闭它。通过添加 data-toggle= "control-sidebar"按钮，它会自动作为切换按钮。切换按钮例子：侧边栏切换标记信息盒用于显示统计片段信息框，有两种类型的信息框第一种类型信息框实现

Likes 93,139

第二种类型信息框

实现

Likes 41,410

70% Increase in 30 Days

你需要改变这些风格的交替的唯一一件事就是改变 bg-* class 位置。对于第一种样式适用于任何 BG *类图标本身。对于其他的风格要将 bg-* class 放在 info-box div 箱 BOX 框组件是最广泛使用的组件，通过这个模板。你可以用它来做所有东西，从显示图表到只是块的文本。它有许多不同的风格，我们将继续探讨。默认框实现

Default Box Example

Label

The body of the box

The footer of the box

箱的各种形状变换您可以添加任何前后关联的类来更改框的样式。

资料库

adminlte中文文档.pdf

Default Box Example

相关推荐

开发技术

热门标签

最新资料

Sender Name 5 mins

Default Box Example

相关推荐

开发技术

热门标签

最新资料