Razor学习：     http://www.w3school.com.cn/aspnet/razor_intro.asp

Slark.NET       https://www.cnblogs.com/slark/


https://www.cnblogs.com/slark/category/636030.html

class样式  


公共实用类：
    border 边框/border-0无边框/border-top-0上方无，其他有
        rounded 圆角/rounded-top顶部圆角/rounded-circle 圆/rounded-0无圆角
        clearfix 清除浮动/float-left左浮动/float-right浮动
        text-情景 文字颜色 text-white
        display 显示模式    d-显示模式  d-sm/md/lg/xl-显示模式
            .d-none     不可见
            .d-inline   行内
            .d-inline-block 行内块
            .d-block    块
            .d-flex 弹性盒模式


弹性盒子
            d-flex flex-row 横向  flex-sm/md/lg/xl-row
            d-flex flex-row-reverse 横向倒叙
            d-flex flex-column  竖向  flex-sm/md/lg/xl-column
            对齐内容    justify水平 align-items垂直
            d-flex justify-content-start/center/end/between/around 横向 左/中/右/两测顶齐均分/非两测顶齐均分
                   justify-content-xm/md/lg/xl-start
            对齐项目    垂直
            d-flex align-items-start/center/end/baseline/stretch    stretch拉伸
                   align-items-sm-start
            对齐自我
            d-flex align-self-start/center/end/baseline/stretch    stretch拉伸
                   align-self-sm-start
            d-flex flex-nowrap  不换行
            d-flex flex-wrap    换行
            d-flex flex-wrap-reverse    换行倒叙
            order-1到12  排序


位置
            fixed-top 固定顶   fixed-bottom 固定底部 sticky-top 吸顶


尺寸
            w-25    相对父级宽25%     h-25 高 25/50/75/100
            mw-50   最大宽     mh-50 最大高


间距
            m == margin     p==padding  用在调整栅格时用p，不然会换行
            t、b、l、r 上下左右    mt-0 清除上边距 数字0-5
            x、y 横向纵向    mx-auto 水平居中    px-3 横向内边距为3

 
布局工具：
        内外边距：    基于1rem值 五级刻度    mr-n    n=1-5 mr=margin-right

文本  text-sm-left 
            text-left/center/right/justify
            text-truncate 省略号 text-nowrap不换行
            text-lowercase/text-uppercase/text-capitalize   大小写
            font-weight-bold 加粗 font-italic斜体


内联元素垂直对齐
            .align-baseline基线 /align-top顶部/align-middle中间/align-bottom底部/align-text-bottom文本低部/align-text-top文本顶部


读文档 
    下载
    依赖（Dependencies）
        bootstrap的js需要jq支持
    布局
        响应式定宽 container 响应断点 576px/768px/992px/1200px
        流体宽度   container-fluid  跨越视口的整个宽度


栅格系统    row>col
        12列栅格
        内容应放置在列中，只有列可能是行的直接子网格层基于最小宽度，这意味着它们适用于该层和其上的所有层
        嵌套  col 里面套row>col
        row行>col列
        col-sm 适用sm md lg xl 

        无（自动/指定）        540px        720像素        960像素        1140px
        .col/.col-n         .col-sm-n    .col-md-n    .col-lg-n    .col-xl-n   n 代表数字1-12

        设置一列的宽度，并使兄弟列自动调整大小 col col-6 col  当前列6，其他均分
        col-{breakpoint}-auto类  根据其内容的自然宽度来对列进行大小调整
        跨多行等宽列   <div class="w-100"></div>  相对父宽的百分比
        垂直对齐（操作row or col)
            操作row   align-items-start/center/end 行 上start 中center 下end
            操作col   align-self-start/center/end 行 上start 中center 下end
        水平对齐（操作row)
            操作row   justify-content-start/center/end/around/between around均分 between两边
        列之间的沟槽可以被删除(操作row)
            no-gutters 只作用一级子列 相当于mx-0
        排序
            .order-n 控制您的内容的可视化顺序   n 1-12
        抵消列
            ml-auto、mr-auto 左、右边距自动，只要有空间就做成margin
        



标题，正文，列表：-----------------1~2
    标题： <h1>-<h6>   or  .h1-.h6
        副标:  <small>    or  .small
        列表： list-inline 剔除ul点和缩进,list-inline-item li转行内一行显示     text-truncate  截断显示省略号文本
    code 一定要避开HTML尖括号
        code：表示一段代码
        pre：表示一个代码块
        var：表示变量
        kbd：表示用户需要按下的键
        samp：表示代码输出


图片----------------3
        img-fluid   响应式
        img-thumbnail 缩略图，边缘有一圈边框线


表格----------------4
        将基类.table添加到任何类<table>
        table-inverse  反色
        thead-inverse、thead-default 表头效果
        .table-striped  条纹行
        table-bordered  单元格的所有方面添加边框
        table-hover 悬停状态
        table-sm    表更紧凑
        语境类 table-语境
            active活性、default默认、primary主、secondary次、success成功、danger危险、warning警告、info信息、light高亮
            注意反色表语境 bg-语境 实现
        .table-responsive 响应表 横向会出现滚动条


标题图像-------------5
       figure标签+figure类>img+figure-img 类 + img-fluid/figcaption标签+figcaption类
       <figure class="figure">
            <img class="figure-img img-fluid">
            <figcaption class="figure-caption">


按钮 button   a-------------6
            btn btn-情境  btn-link
            btn-outline-语境  边框按钮
            .btn-lg .btn-sm 尺寸  btn-block   块级
            active 激活   disabled禁用 按钮给属性，a给类
            复选框和单选按钮    需要jquery popper
            data-toggle="buttons" + .btn-group > .btn + checkbox/radio


卡片----------------7~10
            card    卡片容器
                card-header 页眉
                card-img-top 顶部图片
                card-body/card-img-overlay 卡主体/图片上的卡主体
                    card-title 标题
                    card-subtitle 副标
                    card-text 文本
                    card-link 链接
                list-group  列表组
                    list-group-item 列表项目
                card-img-bottom 底部图片
                card-footer 页脚
            卡组   card-group>card 无边距    一行card一组
                  card-deck>card 有边距     一行card一组
            瀑布流卡列     card-columns>card        所有card一组


轮播图-----------------11                swiper
            carousel
                carousel-indicators 指示器
                carousel-inner  轮播内容
                    carousel-item   active 轮播项 当前项（必填）
                    carousel-item
                        img img-fluid 图 响应式
                        carousel-caption    文本描述
                carousel-control-prev   上一页
                    carousel-control-prev-icon 上一页图标
                carousel-control-next
            特点：图片宽自适应，需要设置最大高度给carousel+carousel-item


下拉菜单--------------------12
            建立在第三方库Popper.js上
            dropdown/dropup 下拉/上拉
                dropdown-toggle/dropdown-toggle-split 按钮/分裂按钮   data-toggle="dropdown" 触发器（必须）
                dropdown-menu/dropdown-menu-right 菜单/右对齐
                    dropdown-header 标题
                    dropdown-item/disabled   菜单项/禁用
                    dropdown-divider    分割线


表单---------------------13
            form-inline    行内表单 操作form
                form-group/form-group row 表单组 / 水平形式
                    form-control/readonly   对表单元素外观，焦点状态，格式化 /只读属性
                    form-control-lg/sm    对表单元素尺寸格式化
                    form-text   描述
                    form-check/disabled/form-check-inline  复选框容器  / 禁用/行内复选
                        form-check-label/col-form-label 数据label/水平形式需要添加
                            form-check-input 复选框


列表组----------------------14
            list-group
                list-group-item/list-group-item-action  列表项/有按下动作
                d-flex/justify-content-between/align-items-center   flex定位/内部两端对齐/内部垂直居中
                    badge badge-primary badge-pill 徽章/主/药丸


模态框----------------15
            不支持嵌套模式，模态HTML放在顶级位置
            fade    淡入
            bd-example-modal-lg/sm>modal-lg/sm  尺寸


导航--------------------16
            nav/justify-content-center/justify-content-end/flex-column/nav-tabs/nav-pills/nav-fill
                导航/居中/靠右/垂直/选项卡/药丸/扩展填充
                nav-item/nav-link/active/disabled 导航项/链接/激活/禁用
            nav flex-column flex-sm-row  sm尺寸开始横向，再小纵向排列


导航栏------------------------17
            Navbars需要包装.navbar和.navbar-expand-sm 用于响应式折叠
            Navbars及其内容使用flexbox构建
            支持少量子组件
                navbar-brand 为您的公司，产品或项目名称，LOGO
                navbar-nav 用于轻便的导航
                navbar-toggler用于小屏幕导航
                    navbar-toggler-icon 小屏幕导航图标
                form-inline任何表单控件
                navbar-text 添加垂直居中的文本字符串
                .collapse   .navbar-collapse 小屏幕下要隐藏导航栏内容


分页------------------------18
          nav 标签
                pagination/pagination-lg/sm/justify-content-center 居中对齐
                    page-item/disabled/active   页码项
                        page-link   链接




bootstrap-demo.rar





基础class     https://www.jianshu.com/p/4736800a57be

.code来显示单行内联代码
.pre来显示多行块代码
.kbd来显示用户输入代码
.pre-scrollable高度超出340px，就会在Y轴出现滚动条

表格class

.table基础表格margin-bottom:20px，在thead底部2px的浅灰实线，每个单元格顶部1px的浅灰实线
.table-striped：斑马线表格，隔行有一个浅灰色的背景色
.table-bordered：带边框的表格,所有单元格有1px的边框
.table-hover：鼠标悬停在表格的行上,有高亮的背景色
.table-condensed：将单元格的内距由8px调至5px
.table-responsive：设置类名.table-responsive的容器,将<table class="table">置于这个容器中

表格行的类

.active表示当前活动信息
.success成功或正确的行为
.info表示中立信息或行为
.warning表示警告
.danger表示危险活着错误行为

除了.active，其他四个类名应与.table-hover配合

表单

.form-horizontal水平表单效果,配合Bootstrap框架的网格系统;设置表单控件padding和margin值;改变“form-group”的表现形式，类似于网格系统的“row”
在Bootstrap中使用input时也必须添加type类型
为了让控件在各种表单风格中样式不出错，需要添加.form-control
多行选择设置multiple属性的值为multiple
rows定义高度，cols设置宽度。.form-control，则无需cols
checkbox还是radio都使用label包
如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”

固定导航条

页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：

?
1
2
3
4
5
6
7
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>
其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面：

?
1
2
3
4
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>
在文件中添加下列样式代码：

?
1
2
3
4
5
6
.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

-------网格系统 ----------
栅格系统 
栅格系统使用大全
     https://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

<div class="row"> <div class="col-*-*"> </div> <div> 偏移列 .col-md-offset-* 列排序 .col-md-push-* .col-md-pull-* -----------排版---------------- .small 字号更小的颜色更浅的文本 .lead 更大更粗、行高更高的文本 .text-muted： 提示，使用浅灰色（#999） .text-primary： 主要，使用蓝色（#428bca） .text-success： 成功，使用浅绿色(#3c763d) .text-info： 通知信息，使用浅蓝色（#31708f） .text-warning： 警告，使用黄色（#8a6d3b） .text-danger： 危险，使用褐色（##a94442） .text-l