当前位置:首页>开发>正文

使用bootstrap实现一个简单页面效果 bootstrap模态框中怎么加入一个页面

2023-04-30 11:08:20 互联网 未知 开发

 使用bootstrap实现一个简单页面效果 bootstrap模态框中怎么加入一个页面

使用bootstrap实现一个简单页面效果

前端用到的编辑器有很多,本例通过选择Sublime Text3编辑器来实现Bootstrap简单布局的制作。第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个html文件,通过Tab快捷键迅速创建一个html模板,并命名标题。如图所示:
Bootstrap实现简单布局实例

第二步,在顶部head标签里e5a48de588b6e79fa5e9819331333431373231引入外部JQuery和Bootstrap库文件。下载好相关的库文件后,放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库,因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面,不然不会有效果。如图所示:
Bootstrap实现简单布局实例

第三步,在Body中写简单的html代码。在一个容器div中,加一个标题和一段说明文字,随便输入一些文字。然后加一个子div,里面又并列三个子div,div里面也同样加一个标题和一段说明文字。在浏览器中查看初始化效果,如图,代码如图所示:
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例

第四步,添加相应的class类。我们知道,Bootstrap作为一个封装的前端框架,已经为我们做好了相关的样式,我们只需要在标签里加上相关的class类即可实现样式了。我们为父div添加名为“container”的类,为标题添加名为“page-header”的类,在浏览器中查看效果,我们发现容器居中了。效果如图所示:
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例
Bootstrap实现简单布局实例

第五步,在包围三个字div的的div中添加一个名为“row”的类,该类可以将三个div放在同一行并排显示,而不是像之前那样,三个div各占一行。如图所示:

Bootstrap实现简单布局实例

第六步,在三个子div中,添加名为“col-xs-4 col-sm-4 col-md-4 col-lg-4”的类,这四个类分别适用于手机、平板电脑、中型电脑、大型电脑的,即可实现自适应布局。如图所示:
Bootstrap实现简单布局实例

最后,在浏览器中查看效果,可以看到,三个区块由原来的各自独占一行到现在的三个并排一行,缩小浏览器分辨率大小,也可以实现自适应布局了。是不是很强大呢?读者可以自行实践。效果如图所示:

附:本经验关键词:bootstrap如何实现布局、bootstrap怎么布局、bootstrap怎么使用布局、bootstrap学习布局、bootstrap布局教程、bootstrap使用布局、bootstrap网格布局、bootstrap的布局方法、bootstrap布局

更多相关“bootstrap”经验请点击下面的“经验引用”。

15Bootstrap实现流动布局实例

16Bootstrap实现嵌套布局

35如何用Bootstrap制作轮播图
Bootstrap实现简单布局实例

bootstrap模态框中怎么加入一个页面

很少使用Bootstrap提供的标签。 直接写在js里。 你可以这么做: 1、做好你写死的那个模态框 2、在按钮上注册click事件 3、click事件触发的同时调用load方法往.modal-content里塞你的数据 4、最后在load方法的回调里把模态框显示出来。

怎么使用bootstrap实现分页

1.分页: 带有页面的效果, 这里你里面可以随你的网站怎么定义都可以, 比方说. 里面不是文字, 而是一些图标,一样可以. 只不过数字能够更好的看效果. 使用样式: .pagination
  2.带有上一项和下一项的翻页效果, 最简单的方式. 样式.pager
  两种方法的实现, 都是需要使用ul标签, 链接是使用a。

怎么用bootstrap设计一个登陆页面

看一下具体的代码. 这里需要注意的是, 那个模版, 是在系列教程一中.
  class="container" 让页面能够做到居中.注意该标签不能嵌套使用.
  role属性是html5中新增的一个属性,可以让你更好的自定义一些属性供你使用.
  class="form-control" 该标签是把一些表达标签的width都设置为100%.
  其中btn是bootstrap中默认定义的一个button也就是按钮的样式.
  其中btn-lg是指最大的样式.还有btn-xs, btn-sm, btn-md. 分别对应不同的设备. 手机, 平板, pc等.

  这里又重新写了2个样式, 一个是表单的最大width. 设置成了330px.是因为登录不需要太过宽, 要不然不太好看. 第二个样式, 是因为在默认的btn-lg是占一行, 所以, 就会把两个表单文本框放在各自的行上. 但是紧挨着太狠. 所以, 做了一个3px的下间距.

  不同的btn大小展示, 从图就可以看出来这几个的区别. 怎么试用? 你动手做一下就明白了.

bootstrap这种框架应该怎么使用

下面我在这里简单的介绍下Bootstrap框架。
  Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果。此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀。
  一个完整的Bootstrap框架包含如下四个部分:
脚手架(不知道官网为啥这么翻译):用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。Bootstrap的样式使用了lesscss技术,比如重置背景这样的操作,这些比较简单我就不展开叙述了,脚手架里最出彩的是栅格系统和布局。栅格系统是将页面宽度分成12列,栅格系统分为两种类型,一种是默认栅格系统,这时候栅格系统是按940px像素进行等分,我们可以使用span1,span4这样的class属性操作默认栅格布局,另一种是流式栅格系统,这个时候分列的宽度就不是固定,而是根据你可视页面进行12等分,同样可以使用span1,span4操作流式栅格。这个系统非常之好,做css最难的就是div布局,使用栅格系统可以大大简化div的布局操作。另外一个就是做布局操作了,布局也分为固定和流式,让不太精通css布局也能轻松操作布局。
基本的css样式。Bootstrap给出了一样常用的HTML元素的样式,例如:按钮、表单和文字等等。大部分做网站的人都不是美工出身,做出赏心悦目的网页是件很困难的事情,css提供的样式很专业很精美,能让我们轻松开发出一套精美的网站
Css组件:Bootstrap还提供一些常用的css组件,同样很优秀很棒。
Javascript插件:Bootstrap是个开放的系统,我们可以随意扩展Bootstrap,特别是javascript的框架,这样Bootstrap就会更加专业。
  Bootstrap是个操作性质的框架,没必要做深入分析,最关键是有没有好的使用实例,我下载Bootstrap发现,下载包里的example不是太强大,例子都在它的官网上,很多对css和javascript不是特别熟悉的人使用起来都不太习惯,因此我将这些例子进行了整合,作为单独的例子工程,这个工程非常全面,我在网上找过,目前还没有比我整理的更详尽的例子,大伙下载下来按照我的工程目录结构就可以进行开发了。