如何使用elm bootstrap 4.1.0制作带条纹的桌子？

我一直在尝试几种方法，但无法确定如何使用

Bootstrap

设置此

Elm

表的样式，因此它是条带化的。我正在尝试使用并安装了

rundis/elm bootstrap 4.1.0

引导。表当前未使用：

module Players.List exposing (..)

import Html exposing (..)
import Html.Attributes exposing (class)
import Msgs exposing (Msg)
import Models exposing (Player)
import RemoteData exposing (WebData)
import Bootstrap.Table as Table

view : WebData (List Player) -> Html Msg
view response =
div []
    [ nav
    , maybeList response
    ]


nav : Html Msg
nav =
div [ class "clearfix mb2 white bg-black" ]
    [ div [ class "left p2" ] [ text "Players" ] ]


maybeList : WebData (List Player) -> Html Msg
 maybeList response =
case response of
    RemoteData.NotAsked ->
        text ""

    RemoteData.Loading ->
        text "Loading..."

    RemoteData.Success players ->
        list players

    RemoteData.Failure error ->
        text (toString error)


list : List Player -> Html Msg
list players =
div [ class "col-md-4" ]
    [ table [ class "table table-striped" ]
        [ thead []
            [ tr []
                [ th [] [ text "Id" ]
                , th [] [ text "Initials" ]
                , th [] [ text "Time" ]
                , th [] [ text "Score" ]
                ]
            ]
        , tbody [] (List.map playerRow players)
        ]
    ]


playerRow : Player -> Html Msg
playerRow player =
tr []
    [ td [] [ text player.id ]
    , td [] [ text player.initials ]
    , td [] [ text (toString player.time) ]
    , td [] [ text (toString player.score) ]
    ]

因为这应该是非常简单的，我很明显遗漏了一些东西。如何将此表条带化？
您的示例使用Elm的HTML库中的HTML函数，但使用适当的引导类型和函数可能会更好。例如，可以使用重写视图函数，如下所示：

list:list Player->Html msg
球员名单=
桌子
{options=[Table.striped]
，thead=Table.thead[]
[Table.tr[]
[Table.th[]文本“Id”]
，Table.th[]文本“缩写”]
，Table.th[]文本“时间”]
，Table.th[]文本“分数”]
]
]
，tbody=Table.tbody[]（List.map playerRow players）
}
playerRow:Player->Table.Row msg
游戏者=
Table.tr[]
[Table.td[][text player.id]
，Table.td[][text player.initials]
，Table.td[]文本（Debug.toString player.time）]
，Table.td[]文本（Debug.toString player.score）]
]

这将为您提供正确的HTML，但您可能仍然需要导入引导样式。文档给出了一个包含样式表的示例，您可以在一些包装函数中执行此操作，例如：

import Bootstrap.Grid为Grid
将Bootstrap.Table导入为表
将Bootstrap.CDN导入为CDN
查看：模型->Html消息
视图模型=
Grid.container[]
[CDN.stylesheet--使用引导CSS创建内联样式节点
，Grid.row[]
[Grid.col[]
[列表model.players]
]
]

这是一个。
我可以建议您创建一个供人们玩的ellie吗？我试过了，但有些进口商品你还没有shared@SimonH是的。我会尽力去做的