简介

GitHub地址:

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

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

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

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

App.xaml里引用Bootstrap.xaml资源

1 
     
      2     
      
       3         
       
        4             
        5         
       6     
      7 
     

 

排版

标题

<Label>样式 h1到h6

效果

代码

1 2 3 4 5 6 

 

副标题

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

效果

代码

1 
     
       2     
       3     
       4 
      5 
     
       6     
       7     
       8 
      9 
     
      10     
      11     
      12 
     13 
     
      14     
      15     
      16 
     17 
     
      18     
      19     
      20 
     21 
     
      22     
      23     
      24 
     

代码

内联代码

<Label>样式 code.使用时 和其他<Label>放到一个<StackPanel>里

效果

代码

1 
     
      2     
      3     
      4     
      5 
     

用户输入

<Label>样式 kbd.使用时 和其他<Label>放到一个<StackPanel>里

效果

代码

1 
     
      2     
      3     
      4 
     

代码块

<Label>样式 pre

效果

代码

1 代码块:2 Foreground:#3333 Background:#f5f5f54 BorderBrush:#ccc

辅助文本

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

效果

代码

1 

表格

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

效果

代码

1 
     
      2     
      
       3         
       4         
       5         
       6     
      7 
     

表单

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

文本输入框

<TextBox>样式 控件尺寸只支持默认样式

效果

代码

1 
     2 
     3 
     4 
     5 
     6 
     7 
     8 
     

密码框

<PasswordBox>样式 控件尺寸只支持默认样式

效果

代码

1 
     2 
     3 
     4 
     5 
     6 
     7 
     

复选框

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

效果

代码

1 
     2 
     3 
     4 
     

单选框

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

效果

代码

1 
     2 
     3 
     4 
     

下拉框

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

效果

代码

1 
     
       2     
      
       苹果
       3     
      
       橡胶
       4     
      
       桔子
       5 
      6 
     
       7     
      
       苹果
       8     
      
       橡胶
       9     
      
       桔子
      10 
     11 
     
      12     
      
       苹果
      13     
      
       橡胶
      14     
      
       桔子
      15 
     

按钮

按钮

<Button>样式 btn

效果

代码

1 2 3 4 5 6 

切换按钮

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

效果

代码

1 
     2 
     3 
     4 
     5 
     6 
     

辅助类

Contextual colors

<Label>样式 text 语境

效果

代码

1 2 3 4 5 6 

Contextual backgrounds

<Label>样式 text bg 语境

效果

代码

1 2 3 4 5 

输入框组

插件

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

效果

代码

1 
     2 
     

作为额外元素的按钮

<TextBox>样式 input-group-btn 输入框里带个<Button>,<Button>里显示的内容绑定到Tag属性

效果

代码

1 xmal代码: 2 
      3 
     
       4     
      
        5         
        6     
       7 
      8  9 后台代码C#:10 private void InputGroupButton_Click(object sender, RoutedEventArgs e)11 {12     MessageBox.Show(((TextBox)sender).Text);13 }

进度条

<ProgressBar>样式 progress-bar

效果

代码

1 
     2 
     3 
     4 
     5 
     

面板

<ContentControl>样式 panel

基本实例

效果

代码

1 
     
      2     
      3 
     

带标题的面版

效果

代码

1 
     
      2     
      
       3         
       4         
       5     
      6 
     

带脚注的面版

效果

代码

1 
     
      2     
      
       3         
       4         
       5     
      6 
     

情境效果

效果

 

代码

 

1 
     
       2     
      
        3         
        4         
       
         5             
        
          6                 
         
           7                     
          
            8 
            9 
           10 
          11                     
          
           12 
           13 
           14 
          15                     
          16                     
          17                     
          18                     
          19                 
         20             
        21         
       22     
      23 
     24 
     
      25     
      
       26         
       27         
       28     
      29 
     30 
     
      31     
      
       32         
       33         
       34     
      35 
     36 
     
      37     
      
       38         
       39         
       40     
      41 
     42 
     
      43     
      
       44         
       45         
       46     
      47 
     

Glyphicons 字体图标

path资源,详情见

效果

代码

1