xml地图|网站地图|网站标签 [设为首页] [加入收藏]

bootstrap一些常用样式,Bootstrap关于排版

来源:http://www.ccidsi.com 作者:集成经验 人气:97 发布时间:2019-06-26
摘要:1、靠右对齐: 只须要加上样式类pull-right就可以! 一、在官方网址下载bootstrap 1.Bootstrap和平凡的HTML页面一样,定义标题都以运用标签h1到h6,只不过Bootstrap覆盖了其默许的体制   回到页

1、靠右对齐:  只须要加上样式类pull-right就可以!

一、在官方网址下载bootstrap

1.Bootstrap和平凡的HTML页面一样,定义标题都以运用标签<h1>到<h6>,只不过Bootstrap覆盖了其默许的体制

   回到页面最上部:只需加多 就可以!

二、在页面引进bootstrap

  • 1、bootstrap是依据html5和css3的前端框架,由此必须采纳<!DOCTYPE html>。
  • 2、使用 <link href="css/bootstrap.min.css" rel="stylesheet">引进bootstrap样式文件
  • 3、 若是要选拔Bootstrap的js插件,必须先调入jQuery。通常在head中引进css文件,在body尾部引进js文件。
<!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="http://www.ccidsi.com/uploads/allimg/190626/0541141S0-0.jpg"></script>
        <script src="http://www.ccidsi.com/uploads/allimg/190626/054114A13-1.jpg"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件,必须先调入jQuery -->
        <script src="http://www.ccidsi.com/uploads/allimg/190626/0541142317-2.jpg"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
        <script src="http://www.ccidsi.com/uploads/allimg/190626/0541145395-3.jpg"></script> 
    </body>
</html>

2.施用了<small>标签来制作副标题,由于<small>内的文本字体在h1~h3内,其大小都设置为当下字号的65%;而在h4~h6内的字号都安装为当前字号的百分之七十五;

2、<pre></pre>和其类.pre-scrollable(整块卓越和安装滚动条)
   <pre>成分一般用于体现大块的代码,并保障原有格式不改变。但一时期码太多,而且不想让其攻下太大的页面篇幅,就想调整代码块的大大小小。Bootstrap也怀念到那一点,你只需求在pre标签上增多类名“.pre-scrollable”,就足以调整代码块区域最大惊人为340px,一旦抢先这么些中度,就能够在Y轴出现滚动条。

三、排版

3.假使想让一个段落p优良呈现,能够经过抬高类名“.lead”达成,其功效就是外Gavin本字号,加粗文本,而且对行高和margin也做相应的

3、重申小说里的某些字眼:<code>btn</code>

1、标题 <h1>-<h6> / class="h1"

  • <h1>----<h6>
    Bootstrap和平常的HTML页面同样,定义标题都是选拔标签<h1>到<h6>,只可是Bootstrap覆盖了其暗中同意的体裁,选取其在享有浏览器下显得的服从同样

图片 1

  • 使用class定义
<div class="h1"> 标题</div>  //h1-h6,效果与上面相同。

处理。

4、一时候大家须求将表单的控件都在一行内呈现,在Bootstrap框架中达成如此的表单效果是一举成功的,你只须求加多类名“form-inline”就可以。

2、副标题 <small>

bootstrap使用<small>标签来制作副标题。

<h3>Bootstrap标题三<small>我是副标题</small></h3>

图片 2

4.<b>和<strong>加粗

5、文本重申样式:

3、段落 <p>

图片 3

5.<em>或<i>斜体

  • .text-muted:提示,使用浅灰色(#999)
  • .text-primary:主要,使用蓝色(#428bca)
  • .text-success:成功,使用浅绿色(#3c763d)
  • .text-info:通告信息,使用浅蓝色(#31708f)
  • .text-warning:警告,使用黄色(#8a6d3b)
  • .text-danger:危险,使用褐色(##a94442)

4、重申内容 class="lead"

图片 4

6.重申相关的类:


5、粗体<b> / <strong>

.text-muted:提醒,使用深桔黄绿(#999)

6、 斜体<em> / <i>

.text-primary:主要,使用青黄(#428bca)

本文由68399皇家赌场发布于集成经验,转载请注明出处:bootstrap一些常用样式,Bootstrap关于排版

关键词: 68399皇家赌场 项目问题

最火资讯