Bootstrap风格的WPF样式-js教程-PHP中文网

简介

此样式基于bootstrap-3.3.0,样式文件里的源码行数都是指的这个版本.CSS源文件放到了Content文件夹下的bootstrap.css

WPF样式和CSS还是不太相同,所以有些内容实现上稍有出入,有些内容用法不太一样,有些内容并没有实现

但至少,一些概念,尺寸和取色,还是很好的借鉴

博客说明按Bootstrap官方文档的顺序来写

App.xaml里引用Bootstrap.xaml资源

排版

标题

样式 h1到h6

效果

Bootstrap风格的WPF样式

代码

副标题

样式 h1 small到h6 small.使用时和标题放到一个里方便对齐

效果

Bootstrap风格的WPF样式

代码

内联代码

样式 code.使用时和其他放到一个里

效果

Bootstrap风格的WPF样式

代码

用户输入

样式 kbd.使用时和其他放到一个里

效果

Bootstrap风格的WPF样式

代码

代码块

样式 pre

效果

Bootstrap风格的WPF样式

代码

代码块:
Foreground:#333
Background:#f5f5f5
BorderBrush:#ccc

辅助文本

样式 help-block.注:辅助文本在Bootstrap表单样式里,原本的解释:针对表单控件的“块（block）”级辅助文本.我并没有建一个表单窗体,所以就写在了这里

效果

Bootstrap风格的WPF样式

代码

表格

样式默认就这一组样式,不用引用

代码

表单

WPF没有表单的概念,所以说明就不按官方文档的顺序了

文本输入框

样式控件尺寸只支持默认样式

效果

Bootstrap风格的WPF样式

密码框

样式控件尺寸只支持默认样式

效果

Bootstrap风格的WPF样式

代码

样式 checkbox 和Bootstrap有些不同自己写的样式

效果

Bootstrap风格的WPF样式

代码

单选框

样式 radio 和Bootstrap有些不同自己写的样式

效果

Bootstrap风格的WPF样式

代码

下拉框

样式默认就这一组样式,不用引用 gif截图的原因,看不到下拉

效果

Bootstrap风格的WPF样式

代码


苹果
橡胶
桔子


苹果
橡胶
桔子


苹果
橡胶
桔子

按钮

Pika

Pika.art是一个AI驱动的多样化风格视频创作平台

下载

代码

切换按钮

样式 tbtn.Bootstrap中没有切换按钮,这里做成和按钮一样,按下去的效果就是按钮

效果

Bootstrap风格的WPF样式

代码

辅助类

Contextual colors

样式 text 语境

效果

Bootstrap风格的WPF样式

代码

Contextual backgrounds

样式 text bg 语境

效果

Bootstrap风格的WPF样式

代码

输入框组

插件

样式 input-group-addon 输入框里带个,其实并不是插件,addon这个单词,使用百度翻译,翻译成插件.里显示的内容绑定到Tag属性

效果

Bootstrap风格的WPF样式

代码

作为额外元素的按钮

样式 input-group-btn 输入框里带个

效果

Bootstrap风格的WPF样式

代码

xmal代码:

后台代码C#:

private void InputGroupButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show(((TextBox)sender).Text);
}

进度条

样式 progress-bar

效果

Bootstrap风格的WPF样式

代码

面板

样式 panel

基本实例

效果

Bootstrap风格的WPF样式

代码

带标题的面版

效果

Bootstrap风格的WPF样式

代码

带脚注的面版

效果

Bootstrap风格的WPF样式

代码

情境效果

效果

Bootstrap风格的WPF样式

代码

更多Bootstrap风格的WPF样式相关文章请关注PHP中文网！