Bootstrap风格的WPF样式

简介

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

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

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

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

App.xaml里引用Bootstrap.xaml资源

排版

标题

样式 h1到h6

效果

代码

副标题

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

效果

代码

代码

内联代码

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

效果

代码

用户输入

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

效果

代码

代码块

样式 pre

效果

代码

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

辅助文本

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

效果

代码

表格

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

效果

代码

表单

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

文本输入框

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

效果

代码

密码框

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

效果

代码

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

效果

代码

单选框

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

效果

代码

下拉框

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

效果

代码

苹果
橡胶
桔子


苹果
橡胶
桔子


苹果
橡胶
桔子

按钮

按钮

样式 btn

效果

代码

切换按钮

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

效果

代码

辅助类

Contextual colors

样式 text 语境

效果

代码

Contextual backgrounds

样式 text bg 语境

效果

代码

输入框组

插件

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

效果

代码

作为额外元素的按钮

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

,里显示的内容绑定到Tag属性

效果

代码

xmal代码:

后台代码C#:

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

进度条

样式 progress-bar

效果

代码

面板

样式 panel

基本实例

效果

代码

带标题的面版

效果

代码

带脚注的面版

效果

代码

情境效果

效果

代码

源码下载：http://xiazai.jb51.net/201612/yuanma/http://demo.jb51.net/js/2016/BootstrapWpfStyle