精华内容
下载资源
问答
  • 关于Bootstrap布局

    2019-10-03 02:12:10
    正在着手准备一个关于在线项目管理系统,现在在做布局,用的Bootstrap,我也是刚刚接触这个在线的布局工具,于是在网上看了一些资深大虾们的介绍,感觉理解起来还是颇有难度,就本着抛砖引玉的态度写了一些关于Boot...

    正在着手准备一个关于在线项目管理系统,现在在做布局,用的Bootstrap,我也是刚刚接触这个在线的布局工具,于是在网上看了一些资深大虾们的介绍,感觉理解起来还是颇有难度,就本着抛砖引玉的态度写了一些关于Boot使用的基础知识,废话不说,进入正题-------

    Bootstrap:一种由动态css语言less写成的css/html框架,也是为前台的页面布局自定义的一套规范,所以使用起来很是方便

    以为那个我是使用Myeclipse对前台进行布局的,所以,在使用bootstrap之前需要导入bootstrap的几个包,bootstrap.min.js/bootstrap-responsive.min.css/bootstrap.min.css/jquery-1.7.2.js(jquery的版本就我所知,1.7.2以上的都可以)最后还需要两个图片的包、、、除了jquery,其他的包和图片都可以在Bootstrap官网进行下载

    包可以直接复制到你在myeclipse中的文件夹下,下面的图片是包存放的位置(文件夹需要自己创建,且文件夹名不能错误,否则bootstrap会找不到它们):

    在jsp页面的时候,我们需要更改index.jsp的一个地方:

    更改后:

    这样,我们的准备工作就做好了,明天继续为讲一下bootstrap对页面的一个简单布局

     

     

    转载于:https://www.cnblogs.com/chenpf/p/3311374.html

    展开全文
  • bootstrap布局

    2014-05-03 19:50:53
     关于作者: 郑云飞(天放), 程序员Java weibo:@tianFang blog: zhengyunfei.iteye.com email: zhengyunfei8@gmail.com 学习路线图  跟我一步一步学习bootstrap ... bootstrap布局   bootstr...

        关于作者:

           bootstrap在网页中使用

           bootstrap布局    

           bootstrap响应式布局

      bootstrap内置了一套网格布局系统,而且可以是响应时的网格布局系统,简单的来解释一下,网格布局就是将网页分割成一定数量的栏数或者叫做网格,bootstarp架构的网格系统就是把网页分成12栏,如果你想让一个元素占用一定栏数的宽度,你可以在这个元素上面应用一个特定的类,那么bootstarp架构使用的就是span加栏数这种形式的类,下面我们来看一下,我们新建一个layout.html文件,写入如下内容

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"/>
        <![endif]-->
        <title></title>
        <link href="../css/bootstrap.css" rel="stylesheet"/>
    </head>
    <body>
    <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
    <p>使用bootstrap的布局</p>
    <h2 class="page-header">区块一</h2>
    <p>区块1</p>
    <h2 class="page-header">区块二</h2>
    <p>区块2</p>
    <h2 class="page-header">区块三</h2>
    <p>区块3</p>
    </body>
    </html>
    <script src="../js/vendor/jquery-1.10.2.min.js"/>
    <script src="../js/bootstrap.js"/>

     在浏览器中打开效果如下图所示:



     这里你可以看到页面中的文字已经有了一些样式,比如说大标题的字号,在h1下面会显示一条灰色的线,还有small标签里面文字的颜色,这些样式都是在bootstrap架构里面定义好的,下面我们来学习几个布局的方法,首页我们将这个页面的内容显示在页面的中间,我们还是回到代码中,我们现在内容的周围去添加一个大的容器,我们这里使用div标签,开始输入<div>,在结束的地方输入</div>,在开始的地方添加一个属性<div class="container">,如下面代码

    <div class="container">
        <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
        <p>使用bootstrap的布局</p>
        <h2 class="page-header">区块一</h2>
        <p>区块1</p>
        <h2 class="page-header">区块二</h2>
        <p>区块2</p>
        <h2 class="page-header">区块三</h2>
        <p>区块3</p>
    </div>

     我们再在浏览器中看一下效果:



     container这个类设定了宽度,并且可以让内容显示在中间,我们再将下面的内容显示在同一排并且平均分成3栏,下面我们就使用bootstrap布局的网格系统来让这3块内容平均分成3栏显示在同一排,首先我们需要添加一个容器包围住想要显示在同一排的内容。在这里我们输入一个<div class="row">包围住这3块,下面我们在分别在这3块内容的周围添加一个div标签,并且在上面使用网格布局的span的类,因为我们想让这3块内容平均分成3栏,所以呢每一栏会占用4个网格布局的宽度,也就是4栏的宽度,那么整个页面的宽度是12网格,所以呢12平均分成3份,每一个份正好是4个网格的宽度,那么我们就需要在每个块中添加<div class="span4">与</div>标签,如下内容:

    <div class="container">
        <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
        <p>使用bootstrap的布局</p>
        <div class="row">
            <div class="span4">
                <h2 class="page-header">区块一</h2>
                <p>区块1</p>
            </div>
            <div class="span4">
                <h2 class="page-header">区块二</h2>
                <p>区块2</p>
            </div>
            <div class="span4">
                <h2 class="page-header">区块三</h2>
                <p>区块3</p>
             </div>
        </div>
    </div>

     然后我们在浏览器中预览一下效果:



     在这里你可以看到,这3块内容会平均分成3栏,显示在同一排,使用同样的方法,你可以创建出复杂的布局,你只需要在布局使用的容器上面添加网格相应的类,比如说内容占用8个网格,你只需要添加一个span8的类,内容占用4个网格,你中需要添加一个span4的类,然后在同一块内容的周围使用一个row类的容器,想让内容相对于浏览器的窗口居中的话,那么设置一个宽度,并且在周围添加一个带有container的容器。

     下面我们来看一下嵌套布局和流动布局,使用bootstrap架构实现这些布局方式都非常的简单,嵌套布局就是在一个应用了网格类的容器里面在嵌套其他使用网格类的容器,比如上面图片上的区块三,那么这块内容占用了4个网格的宽度,如果你想再把这个区块三平均分成2栏,那么4除以2正好是2,也就是说每一栏占用2个网格的宽度,注意在固定宽度的布局下面,那么被嵌套的元素占用的网格数量应该小于或者等于包围他们元素所占用的网格的数量,下面我进入代码,找到区块3这段内容的代码,然后在这个span4类的容器里面再添加一个具有row类元素的div标签,<div class="row"></div>,然后我们在这这个div里面添加2组div标签,并在上面添加span2的类,<div class="span2"></div><div class="span2"></div>然后我们再在每个容器里面随便添加一点内容,如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"/>
        <![endif]-->
        <title></title>
        <link href="../css/bootstrap.css" rel="stylesheet"/>
    </head>
    <body>
    <div class="container">
        <h1 class="page-header">布局<small>使用bootstrap网格布局网页</small></h1>
        <p>使用bootstrap的布局</p>
        <div class="row">
            <div class="span4">
                <h2 class="page-header">区块一</h2>
                <p>区块1</p>
            </div>
            <div class="span4">
                <h2 class="page-header">区块二</h2>
                <p>区块2</p>
            </div>
            <div class="span4">
                <h2 class="page-header">区块三</h2>
                <p>区块3</p>
                <div class="row">
                    <div class="span2">区块3-1</div>
                    <div class="span2">区块3-2</div>
                </div>
             </div>
        </div>
    </div>
    </body>
    </html>
    <script src="../js/vendor/jquery-1.10.2.min.js"/>
    <script src="../js/bootstrap.js"/>

        然后在浏览器中预览效果如下:



     

           下面我们在看一下流动布局,使用流动布局的页面会根据浏览器窗口的大小,自动的去缩放,那么你上面看到的那个页面使用的是固定布局宽度的方式,也就是说不管你浏览器的窗口有多大,那么页面的宽度是固定的,我们把bootstrap架构的固定布局转换成流动布局只需要去变换一下那个container和row类的名称,我们把container换成container-fluid,container应用的是固定布局的宽度,container-fluid应用的是一个百分比的宽度,然后我们需要把所有的row类属性改成row-fluid,在浏览器看下效果:



     

    现在我们变换一下浏览器窗口的大小,再来看一下效果:



     

     你会看到浏览器的内容会随着浏览器窗口的变化而变化,我们要知道在流动布局下面,布局使用的网格类的宽度会变成百分比,而不是固定的宽度,这里呢要注意一下,这个区块3嵌套的这2个容器,前面我们在这2个容器里面分别应用了一个span2的类,在固定布局的下面,这2个容器占用的网格的数量,正好是区块3整体占用网格数量,而在流动布局的下面,那么span2的宽度大概就是百分之14.8936,这个百分比是相对于包含他们容器的宽度,如果你仍然想让他们平均分成2栏,应该呢用12除以2,也就是每个容器占用6个网格,我们再去修改一下代码,找到区块3

     <div class="span4">
                <h2 class="page-header">区块三</h2>
                <p>区块3</p>
                <div class="row-fluid">
                    <div class="span6">区块3-1</div>
                    <div class="span6">区块3-2</div>
                </div>
             </div>

     

    在浏览器中预览:



     这样区块3中的2块内容就会平均显示了。

     

    上一篇博客:bootstrap在网页中使用   下一篇博客:响应式布局

    展开全文
  • 1.row:行栅格 2.col-xx-xx:列栅格

    1.row:行栅格,行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)
    2.col-xx-xx:列栅格,把网页总宽度平分为12分,开发人员可以自由按分组合,以便开发出简洁方便的程序

    参考文章:https://blog.csdn.net/yang5726685/article/details/68957307

    展开全文
  • 1.对于不是栅格整数倍的内容块,怎么写的?2.这个col有个15px的左边距,有时候不需要,一般是怎么处理的? 给里面的内容添加margin-left:-15px或者嵌套一个row,但是不要再写col,直接放内容到row下面. ...

    1.对于不是栅格整数倍的内容块,怎么写的?
    2.这个col有个15px的左边距,有时候不需要,一般是怎么处理的?

    给里面的内容添加margin-left:-15px
    或者嵌套一个row,但是不要再写col,直接放内容到row下面.

     

    转载于:https://www.cnblogs.com/wlqh/p/6203030.html

    展开全文
  • bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name=...
  • Bootstrap中的网格系统 1、关于网格系统的简单介绍 网格系统中的内容需要放置在容器中。 容器一般有两种类, .container和.container-fluid Container 可以规定宽度 Container-fluid 默认是全屏大小 关于行列...
  • container用于固定宽度并支持响应式布局的容器container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。 .col-xs-1-12 手机 (<768px).col-sm-1-12 小屏幕 平板 (≥768px).col-md-1-12 中等屏幕 桌面...
  • 关于bootstrap

    2020-03-02 08:32:42
    bootstrap是前端的一个开发框架。 框架:框架是一个半成品,已经对基础的代码进行了封装并提供相应的API,开发者在使用框架是直接调用封装好的api...bootstrap具有响应式布局作用,即可以兼容不同分辨率的设备 ...
  • 关于Bootstrap

    2016-05-12 12:31:08
    在开发当中,一套页面能响应多种终端并且在各种终端下显示的布局和内容不一样而且展示的比较合理,或者说一个网站能适配多种屏幕尺寸类型的网站。这样的一个开发模式就是响应式。 我们一般用bootstrap来帮助我们...
  • 栅格系统是通过行(.row)与列(column)的组合一起来创建页面布局的,所以只有列(column)可以作为行(row)的直接子元素,我们所要写的内容可以放在列里(column),不过在行的外层还需要定义一层来包含行(.row...
  • 我设置的栅栏是12啊,应该完全填充 http://37071df1.nat123.cc:39964/indexs.html 还有同样手机访问 必须设置这个 才能跟网页显示差不多,不设置就是整个竖着下来。而且图片也没有填充满网页 求懂的告知!
  • 关于Bootstrap学习总结

    2018-03-10 17:18:50
    一、Bootstrap的介绍1,Bootstrap是Twitter公司开发基于Html+css+js的前端框架2,为实现Web应用...字体与图标9,实现响应式布局的开发二、Bootstrap的特性1,响应式设计2,栅格布局3,完整的类库4,JQuery的插件5...
  • 一,首先,我们来认识一下什么是bootstrap 什么是Bootstrap? ​工欲善其事,必先利其器,话说在前端开发中,如何快速的搭建一个网站页面呢? 在程序的世界里,最不缺的就是轮子,凡是你能想到的需求,基本都有人...
  • 关于bootstrap学习总结

    2016-11-22 11:55:20
    1.bootstrap作为一种强大的前端的框架,内嵌丰富的css组件,和js插件,实现了以移动为优先响应式布局,适应多种物理设备的终端。 2.首先下载bootstrap下载包,引入bootstrap.min.css这是压缩文件或者bootstrap.css...
  • 解决方法:给每一列添加全属性的设置。也就是说不管在什么屏幕大小下,都是一定的属性,这样就不会下移。 <div class="container"> <div class="row"> <div class="col-md-6 col-lg-6 col-sm-...
  • 关于 Bootstrap的知识

    2017-06-24 22:30:00
    Bootstrap是简单、灵活的用于搭建WEB页面的HTML、CSS、Javascript的工具集。...按照官网的宣传来说,Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 Boot...
  • Bootstrap表单布局详解

    千次阅读 2016-07-20 23:40:04
    Bootstrap表单时我们前端必学的内容,所以我给大家写了一个关于表单的Bootstrap学习教程: 在Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看; ...
  • bootstrap 快速搭建一个网页的前端框架 ,页面是一个响应式布局 何为响应式布局: 响应式布局 :一个网站能够兼容多个终端(手机,iPad等),而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而...
  • bootstrap响应式布局

    2014-05-03 22:54:33
    关于作者: 郑云飞(天放), 程序员Java weibo:@tianFang blog: zhengyunfei.iteye.com email: zhengyunfei8@gmail.com 学习路线图  跟我一步一步学习bootstrap ... bootstrap布局   bootstrap响应...
  • 首先,bootstrap其实是给后台以及前端新人用来快速完成一个页面的简单布局,不是按照设计稿psd格式给定做的那种,所以对于实际工作完成项目来说,布局我一般是手写代码的,毕竟bootstrap给定了margin,padding等,...
  • 在这两天重新写一个关于响应式部分的前端页面,有了一些新的总结,希望可以帮到那些被bootstrap玩死的你。。。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &...
  • Bootstrap4的栅格布局

    2021-01-08 16:32:07
    Bootstrap4栅格布局1 栅格容器2 栅格布局的步骤3 关于列3.1 设置列宽3.1.1 平均分配栅格3.2.2 指定列宽3.2.3 可变的列宽3.3 列拆分3.3.1 自动拆分3.3.2 手动拆分3.3.3 响应式拆分3.4 列排序3.5 列偏移3.6 列对齐...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 196
精华内容 78
关键字:

关于bootstrap布局