Bootstrap 面板.pdfVIP

Bootstrap ⾯板 ⾯板 （Panels）⽤于在带圆⻆的框中显示⽂本或图⽚。 ⾯板组件在内容周围应⽤⼀些边框 填充。 以下是如何创建⾯板的⽅法： !DOCTYPE html html lang=en head link rel=stylesheet href=https://ma /bootstrap/3.2.0/css/bootst /head body style=margin:30p div class=panel panel-default div class=panel-heading ATTENTION /div div class=panel-body Lorem br/ipsum br/dolor br/sit br/ametnim . /div div class=panel-footer a href=# class=btn btn-danger btn-smAgree/a a href=# class=btn btn-default btn-smDecline/a /div /div /body /html 注意 ⾯板分为三部分：panel-head，panel-body和panel-footer。 这些⾯板部件中的每⼀个都是可选的。 ⾯板有 种颜⾊选项。在前⾯的代码中，我们使⽤了panel-default类的默认颜⾊。 你也可以使⽤其他类⽤于不同的颜⾊： panel-primary默认为深蓝⾊ panel-success默认为绿⾊ panel-info默认为天蓝⾊ panel-warning默认为黄⾊ panel-danger默认为红⾊ ⾯板标题 我们还可以使⽤.panel-heading类为⾯板添加⼀个标题。 !DOCTYPE html html lang=en head link rel=stylesheet href=https://ma /boots link rel=stylesheet href=https://ma /boots script src=https://aja ./aja /libs/jquery/1.11.1/j script src=https://ma /bootstrap/3.3.1/js/bo style type=te t/css .bs-e ample{ margin: 20p ; } /style /head body div class=bs-e ample div class=panel panel-default div class=panel-headingThis Page is Disabled/div div class=panel-bodyThis page is temporarily disabled /div /div /body /html ⾯板的h1-h6标题 我们可以使⽤.panel-title类来包含从h1到h6的标题元素。 !DOCTYPE html html lang=en head meta charset=UTF-8 titleE ample of Twitter Bootstrap 3 Panels with Title/title link rel=stylesheet href=https://ma /boots link rel=stylesheet href=https://ma /boots script src=https://aja ./aja /libs/jquery/1.11.1/j script src=https://ma /bootstrap/3.3.1/js/bo style type=te t/css .bs-e ample{ margin: 20p ; } /style /head body div class=bs-e ample div class=panel panel-default div class=panel-heading h1 cla