用bootstrap商品评价页面(bootstrap评论回复布局)

bootstrap网页实例常用样式

!DOCTYPEhtml

html

head

metacharset="utf-8"

titleBootstrap实例-一个简单的网页/title

linkrel="stylesheet"href=""

scriptsrc=""/script

scriptsrc=""/script

style

.fakeimg{

height:200px;

background:#aaa;

}

/style

/head

body

divclass="jumbotrontext-center"style="margin-bottom:0"

h1我的第一个Bootstrap页面/h1

p重置浏览器窗口大小查看效果！/p

/div

navclass="navbarnavbar-inverse"

divclass="container-fluid"

divclass="navbar-header"

buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#myNavbar"

spanclass="icon-bar"/span

spanclass="icon-bar"/span

spanclass="icon-bar"/span

/button

aclass="navbar-brand"href="#"网站名/a

/div

divclass="collapsenavbar-collapse"id="myNavbar"

ulclass="navnavbar-nav"

liclass="active"ahref="#"主页/a/li

liahref="#"页面2/a/li

liahref="#"页面3/a/li

/ul

/div

/div

/nav

divclass="container"

divclass="row"

divclass="col-sm-4"

h2关于我/h2

h5我的照片:/h5

divclass="fakeimg"这边插入图像/div

p关于我的介绍../p

h3链接/h3

p描述文本。/p

ulclass="navnav-pillsnav-stacked"

liclass="active"ahref="#"链接1/a/li

liahref="#"链接2/a/li

liahref="#"链接3/a/li

/ul

hrclass="hidden-smhidden-mdhidden-lg"

/div

divclass="col-sm-8"

h2标题/h2

h5副标题/h5

divclass="fakeimg"图像/div

p一些文本../p

p菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！/p

h2标题/h2

h5副标题/h5

divclass="fakeimg"图像/div

p一些文本../p

p菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！/p

/div

/div

/div

divclass="jumbotrontext-center"style="margin-bottom:0"

p底部内容/p

/div

/body

/html

采用Preacher和Hayes(2008)的Bootstrapping中介效应检验方法(设置5000次迭代)，该方法提供中介效应的95%置信区间估计，如果区间估计含有0就表示中介效应不显著，如果区间估计不含有0则表示中介效应显著。

此外对中介效果量的计算结果表明，4种效果量的置信区间都不包括0，因此心理弹性在自尊与应对方式间存在显著的中介作用。

扩展资料：

注意事项：

很多统计量是不能用bootstrap的，比如常见的非参数kernel回归，以及一些目标函数不是非常平滑的估计量，例如quantile回归、maximumscoreestimators等等。

bootstrap的抽样方法除了最简单的有放回抽样之外，还有各种其他的抽样方法，有参数的、非参数的，有bolck，有residual-based。这些方法如果扩展起来就有点复杂了，如果是要做test，那么不同的抽样方法会导致不同的size和power。

参考资料来源：百度百科-Bootstrap

参考资料来源：百度百科-中介效应

其实自己写demo更多的时候都是手写css的，因为可以自己定制，自由控制且可以随便折腾，但有时候很多流水工厂式的样式写起来就太无趣了，所以还是用Bootstrap吧……

首先新建一个Html页面，把Bootstrap的样式与脚本引用塞进去：

这里有个问题，Bootstrap4.0以上是彻底不支持IE8以下的浏览器的，最新版已经把IE9抛弃了；==

因为Bootstrap是JQuery依赖的，所以需要在脚本中引入JQuery，要注意的是，Bootstrap3.3.6版本以下是不支持JQuery3的，只能用JQuery2.

引入之后，在页面上插入container容器：

在这里是使用container还是container-fluid，主要看页面需求，两者区别在于：container-fluid是一个全宽的容器，使用整个宽度，而container则相当于一个margin：auto；的响应式的静态宽度div盒子；

两者的css设置：

标题与导航栏都可以写在header里：

在这里，导航使用nav标签创建的，Bootstrap里的导航条称为navbar，navbar默认样式为白色，.navbar-inverse为颜色反白，可以得到黑色的导航条，需要其他颜色可以自己手动设置；

在.navbar-collapse中写入导航栏，.nav表明该ul为一导航栏，各li为导航类目；.navbar-nav说明是用于navbar中的导航;

在li中设置.active,可以在JavaScript中控制鼠标click或者mouseover效果；

例如：

.navbar-collapse是说在视口的宽度小于768px的时候，将导航变成垂直方向。

对比：

如果想要获得移动端的三明治型显示，需要额外进行修改：

这里a标签是左侧的链接，button为右侧的三明治导航按钮，span为导航按钮的设计构成（三条白线和边框……）；

然后要完成点击三明治导航菜单的显示/隐藏，这时需要用到button里的data-target="#navbar-menu"，这个#navbar-menu就是我们为原来的导航所起的id标识。

其中showoff和mainnav分别是给button和div.navbar-collapse添加的id；

页面主体如果是传统样式，符合栅格化，则使用栅格化样式最快捷；

栅格样式具体可以参阅Bootstrap文档；

以两栏布局为例：

然后设置侧边栏，侧边栏也可以设置为导航nav；

使用nav-tabs和nav-stacked设置导航栏外观；

这样主题搭建就完成了。

ref:

20分钟打造你的Bootstrap站点;

Bootstrap中文文档;

方法/步骤

何为Bootstrap?简洁的、直观的、超牛的、以移动设备优先的前端开发框架，让web开发更迅速、简单。他是Twitter推出的html/css的前端框架,现在的网页设计越来越多的平面化,所以,也就出现了一些平台来做平面化的样式来供我们来使用.因为这款框架是一个开源的框架,所以现在很多人都在使用该框架.下载下来的框架目录结构如图:

怎

么去使用一个开源的框架或者一段现成的源码?首先你确定要保证你所需要的引用你都有,还有你要保证运行的最小点.就是需要3个外部文件,A,

B,C,你就要找到这3个文件,如果是你找到的一段代码,你要确保他能够运行,如果都没有办法运行,放弃吧.另找下一个.一般情况下,

一个框架都会给你一个最基本的例子,这个例子中使用了框架需要的外部文件和一些简单的说明,bootstrap也给出了一个简单的例子.

如图就是最基本的一个例子.该例子说了一个很重要的,也是很好的一个文件引用的方式,就是css.全部放在上面,然后把js.

都放在页面的最下面,这样能够更好的加载页面渲染.建议你使用最基本的页面去修改你需要的页面,而且要做到按照自己的需求来写代码.不要复制,

粘贴.

Bootstrap中内置了一套响应式的,移动优先的流式栅格系统,随着不同的设备,不同的平台.或者窗口大小(viewport),根据他们的不同系统会自动的分成12份.也就是说,栅格系统是通过一系列的行和列来组成我们需要的页面,然后把你需要的内容放在这些的布局中.在使用栅格系统的时候,需要注意的是:需要在使用.row(行的意思)的外层使用.container为的是,在赋值时给出合适的排列(aligment)和内补(padding).

举

个例子:一行其中包含3个内容分别占屏幕的25%,50%,25%.我们要在超小屏幕设备-手机上使用.那么就要写成12的3,6,

3.具体代码看图片,这里的效果图,为了效果加上了一个well的class.只是为了演示效果,能够看清除.

为了有一个很好

的学习东西,让你看一下表格的创建.就是这么的简单,只需要在table上,

填写一个class为.table的样式即可生成一个很好很实用的表格.其实,这些都是别人提前建立好的页面显示效果,

就是不用自己再去写一些简单的css效果.多练.多使用它就属于你.

在给出一个只有简单的带有导航栏的页面.该页面,理解透了,这个东西你就算学会了,剩下的就是用什么查一下文档就拿来用了,