Bootstrap 框架

2019-06-29 作者:计算机教程   |   浏览(129)

        <div >右边内容</div>

Bootsrap基本应用,Bootsrap应用

用法:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Bootstrap的HTML标准模板</title>   

        <!-- Bootstrap -->

        <link href="css/bootstrap.min.css" rel="stylesheet">

        <永利电子游戏网站,!--你自己的样式文件 -->

        <link href="css/your-style.css" rel="stylesheet">        

        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->

        <!--[if lt IE 9]>

        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;

        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;

        <![endif]-->

    </head>

    <body>

        <h1>Hello, world!</h1>

        

        <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->

        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;

        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->

        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;

    </body>

</html>

 

 

标题样式:

Bootstrap中可以通过class名实现h1-h6比如:<div class="h1">Bootstrap标题</div>

 

在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题:

<h1>Bootstrap标题<small>我是副标题</small></h1>

 

.lead   :增大文本字号,加粗;

给文本添加颜色,通过颜色来强调:

.text-muted:提示,使用浅灰色(#999)

.text-primary:主要,使用蓝色(#428bca)

.text-success:成功,使用浅绿色(#3c763d)

.text-info:通知信息,使用浅蓝色(#31708f)

.text-warning:警告,使用黄色(#8a6d3b)

.text-danger:危险,使用褐色(#a94442)

 

文本对其:在CSS中常常使用text-align来实现文本对其,bootstrap中:

Text-left   左对齐

Text-center 居中对齐

Text-right   右对齐

Text-justify  两端对齐

 

Bootstrap提供了一套响应式移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

 

通过class来 操作在相应的屏幕上的布局

手机屏幕(<768px) 类前缀.col-xs-

平板屏幕(>=768px)类前缀.col-sm-

中等屏幕(>=992px)类前缀.col-md-

大屏幕  (>=1200px)类前缀.col-lg-

列数都为12;所有的列(column)必须放在 .row内

<div class=”row”>

<div class=“col-xs-12  clo-md-8  clo-md-6  col-lg-4”>

<div class=“col-xs-12  clo-md-4  clo-md-6  col-lg-4”>

</div>

 

实例:

<div class=”container”>

<div class=”row”>

内容

</div>

</div>

将最外层的布局元素 .container修改为 .container-fluid  就可以将固定宽度的栅格布局转换成100%宽度的布局

偏移:

有时候我们不希望相邻的列紧挨在一起,可以用列偏移(offset)来实现  给要偏移的元素加 .col-md-offset-*   (*号代表需要偏移的列数)

例如:“col-md-offset-4”就是在中等屏幕的时候向右偏移4列

 

列排序:

列排序就是改变列表的方向,就是改变左右浮动,并且设置浮动的距离,通过添加类名实现:

“col-md-push-*”和”col-md-pull-*”(*号代表偏移列数)

向右偏移写push   向左写pull;

 

列的嵌套:

Bootstrap框架还支持列的嵌套

你可以在列中添加一个或者多个行(rom),然后在这个容器中插入列(像前面的一样)

嵌套的列  在写.col-md-*  的时候是按照父盒子的基础上 再进行分配

 

http://www.bkjia.com/jQuery/1180982.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/1180982.htmlTechArticleBootsrap基本应用,Bootsrap应用 用法: !DOCTYPE html html lang="en" head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" cont...

      对于栅格布局,额外增加.col-xs-* class 或替换掉 .col-md-*  和 .col-lg-* 。针对超小屏幕设备的

    Bootstrap2 默认不带响应式固定布局的12列栅格系统,栅格宽度60像素,分隔宽度20像素,总宽度940像素(不计算最左侧的分隔宽度)。

      </div>

  丰富的生态圈

    将最外层的.row 替换为 .row-fluid类

  小于768px时(col-xs-12),    左右都占据100%,堆叠

    <div >  居中容器

      栅格系统能够在所有分辨率的环境下展开。

  1. 引入: 

  5.1 基础

    </div>

  5.2 设置偏移量


      不要添加 viewport<meta>

  如是国外项目首选Google的CDN服务

  1.  Bootstrap 是 Twitter 公司于2011年8月开源的整体式前端框架
  1. Bootstrap的栅格系统

  992px---1200px(col-md-5)时,左侧边栏占据5列宽,右侧占据7列宽

    类似margin-left的偏移操作用offset类的固定值代替,

  汉化文档:http://bootcss.com

    Bootstrap3 不再提供非响应式的固定布局,如需禁用响应式布局,如下:

  Bootstrap3 : http://open.bootcss.com/;

    如:<div >..</div>

本文由永利电子游戏网站发布于计算机教程,转载请注明出处:Bootstrap 框架

关键词: