bootstrap学习笔记——02——排版样式

最新推荐文章于 2024-09-10 15:03:07 发布
最新推荐文章于 2024-09-10 15:03:07 发布
阅读量760 收藏 1
点赞数
分类专栏： bootstrap 文章标签： 排版样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40680190/article/details/80450672
版权
  • 页面排版

       Bootstrap提供了一些常规设计好的页面排版的也是开发者使用。

 

  1. 页面主体
    Bootstrap将全局font-size设置为14px，line-height行高设置为1.428（即20px）;
    <p>段落元素被设置等于1/2行高（即10px）；
    颜色被设置为#333。
        //创建包含段落突出的文本
    <p>Bootstrap框架</p>
    <p  class="lead">Bootstrap框架</p>                    //加属性lead   为突出效果
    <p>Bootstrap框架</p>
    <p>Bootstrap框架</p>
    <p>Bootstrap框架</p>
    没有引入css样式：引入CSS样式
  2. 标题
    //从h1到h6
    <h1>Bootstrap框架</h1>          //36px
    <h2>Bootstrap框架</h2>          //30px
    <h3>Bootstrap框架</h3>          //24px
    <h4>Bootstrap框架</h4>          //18px
    <h5>Bootstrap框架</h5>          //14px
    <h6>Bootstrap框架</h6>          //12px
    没有CSS引入CSS

    <span class="h1">Bootstrap框架</span>   相等于上面的h1

    在h1~h6元素之间，还可以嵌入一个small元素作为副标题，
    //在标题元素内插入small元素
    <h1>Bootstrap框架 <small>Bootstrap 小标题</small></h1>         
    <h2>Bootstrap框架 <small>Bootstrap 小标题</small></h2>        
    <h3>Bootstrap框架 <small>Bootstrap 小标题</small></h3>          
    <h4>Bootstrap框架 <small>Bootstrap 小标题</small></h4>          
    <h5>Bootstrap框架 <small>Bootstrap 小标题</small></h5>          
    <h6>Bootstrap框架 <small>Bootstrap 小标题</small></h6>

    通过检查，可以获取到h1到h3获取的父元素的65%大小，h4到h6获取父元素的75%大小。
  3. 内联文本元素
    //添加标记，<mark>元素或.mark类
    <p>Bootstrap <mark>框架</mark></p>      //标记

    //各种加线的文本
    <del>Bootstrap框架 </del>       //删除的文本
    <s>Bootstrap框架 </s>              //无用的文本
    <ins>Bootstrap框架 </ins>       //插入的文本
    <u>Bootstrap框架 </u>            //效果同上，下划线文本

    //各种强调的文本
    <small>Bootstrap框架</small>             //标准字号的85%
    <strong>Bootstrap框架</strong>       //加粗700
    <em>Bootstrap框架</em>                 //倾斜
     
  4. 对齐
    //设置文本对齐
    <p   class="text-left">Bootstrap框架 </p>        //居左
    <p  class="text-center">Bootstrap框架 </p> //居右
    <p  class="text-right">Bootstrap框架 </p>   //居中
    <p  class="text-justify">Bootstrap框架 </p>   //两端对齐，支持度不佳
    <p  class="text-nowrap"   style="border:1px  solid  red; width:50px">Bootstrap框架 </p>   //不换行
  5. 大小写
    //设置英文文本大小写
    <p class="text-lowercase">Bootstrap框架 </p>   //英文小写
             <p class="text-uppercase">Bootstrap框架 </p> //英文大写
             <p class="text-capitalize">Bootstrap框架 </p> //英文首字母大写
  6. 缩略语
    //缩略语
    <h1>Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr></h1>
    <h1><abbr title="Bootstrap" class="initialism">Bootstrap框架</abbr></h1>
  7. 地址文本
    //设置地址，去掉了倾斜，设置了行高，底部20px
    <address>
    <strong>北京海淀</strong><br>
    北京朝阳<br>
    <abbr title="Phone">P：</abbr>110
    </address>
  8. 引用文本
    //默认样式引用，增加了做边线，设定了字体大小和内外边框——（在工具中bq按Tab）
    <blockquote>Bootstrap框架 </blockquote>

    //反向
    <blockquote class="blockquote-reverse">Bootstrap框架 </blockquote>
    <blockquote class="pull-right">Bootstrap框架 </blockquote>
  9. 列表排版
    //移除默认样式        （ul>li*5  按Tab）

    <ul   class="list-unstyled">
              <li>Bootstrap框架</li>
              <li>Bootstrap框架</li>
              <li>Bootstrap框架</li>
              <li>Bootstrap框架</li> 
              <li>Bootstrap框架</li>
             </ul>
    //设置为内联

    display: inline-block;
    <ul   class="list-unstyled list-inline">
              <li>Bootstrap框架</li>
              <li>Bootstrap框架</li>
              <li>Bootstrap框架</li>
              <li>Bootstrap框架</li> 
              <li>Bootstrap框架</li>
             </ul>


    //水平排列描述方式（ dl>dt+dd  按Tab）
     <dl>
            <dt>Bootstrap框架</dt>
            <dd>Bootstrap是一个优秀的前端框架，看官网介绍</dd>
            </dl>
    这是默认情况下


             <dl   class="dl-horizontal"> 
            <dt>Bootstrap框架</dt>
            <dd>Bootstrap是一个优秀的前端框架，看官网介绍</dd>
            </dl>
  10. 代码
    //内联代码

    <code>&lt;section&gt;</code>

     //用户输入
    press <kbd>ctrl + ,</kbd>


     //代码块
    <pre>&lt;p&gt;Please   input  ...&lt;/p&gt;</pre>


    Bootstrap还列举了<var>表示标记变量，<samp>表示程序输出，只不过没有重新CSS

     

 

  1. 全部代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>排版样式</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body  style="margin: 50px">
	<!-- <p>Bootstrap框架</p>
	<p  class="lead">Bootstrap框架</p>
	<p>Bootstrap框架</p>
	<p>Bootstrap框架</p>
	<p>Bootstrap框架</p>
	
	
	              <h1>Bootstrap框架</h1>         
	<h2>Bootstrap框架</h2>        
	<h3>Bootstrap框架</h3>          
	<h4>Bootstrap框架</h4>          
	<h5>Bootstrap框架</h5>          
	<h6>Bootstrap框架</h6>
	
	
	<span class="h1">Bootstrap框架</span> -->


	<!-- <h1>Bootstrap框架 <small>Bootstrap 小标题</small></h1>         
	<h2>Bootstrap框架 <small>Bootstrap 小标题</small></h2>        
	<h3>Bootstrap框架 <small>Bootstrap 小标题</small></h3>          
	<h4>Bootstrap框架 <small>Bootstrap 小标题</small></h4>          
	<h5>Bootstrap框架 <small>Bootstrap 小标题</small></h5>          
	<h6>Bootstrap框架 <small>Bootstrap 小标题</small></h6> -->

	<!-- <p>Bootstrap <mark>框架</mark></p> -->

	<!-- <del>Bootstrap框架 </del>       //删除的文本
	<s>Bootstrap框架 </s>              //无用的文本
	<ins>Bootstrap框架 </ins>       //插入的文本
	<u>Bootstrap框架 </u>            //效果同上，下划线文本 -->


	<!-- <small>Bootstrap框架</small>             //标准字号的85%
	<strong>Bootstrap框架</strong>       //加粗700
	<em>Bootstrap框架</em>                 //倾斜 -->

<!-- 	<p   class="text-left">Bootstrap框架 </p>        //居左
<p  class="text-center">Bootstrap框架 </p> //居右
<p  class="text-right">Bootstrap框架 </p>   //居中
<p  class="text-justify">Bootstrap框架 </p>   //两端对齐，支持度不佳
<p  class="text-nowrap"   style="border:1px  solid  red;width:50px">Bootstrap框架 </p>   //不换行 -->


         <!-- <p class="text-lowercase">Bootstrap框架 </p>   //英文小写
         <p class="text-uppercase">Bootstrap框架 </p> //英文大写
         <p class="text-capitalize">Bootstrap框架 </p> //英文首字母大写 -->

         
	<!-- <h1>Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr></h1>
	<h1><abbr title="Bootstrap" class="initialism">Bootstrap框架</abbr></h1> -->

	<!-- <address>
		<strong>北京海淀</strong><br>
		北京朝阳<br>
		<abbr title="Phone">P：</abbr>110
	</address> -->



	<!-- <blockquote>Bootstrap框架 </blockquote>
	<blockquote class="blockquote-reverse">Bootstrap框架 </blockquote>
	<blockquote class="pull-right">Bootstrap框架 </blockquote>
	 -->
   
	        <!--  <ul   class="list-unstyled ">
	        	<li>Bootstrap框架</li>
	        	<li>Bootstrap框架</li>
	        	<li>Bootstrap框架</li>
	        	<li>Bootstrap框架</li> 
	        	<li>Bootstrap框架</li>
	        </ul>
	          <ul   class="list-unstyled list-inline">
	        	<li>Bootstrap框架</li>
	        	<li>Bootstrap框架</li>
	        	<li>Bootstrap框架</li>
	        	<li>Bootstrap框架</li> 
	        	<li>Bootstrap框架</li>
	        </ul> -->


	     <!--    <dl>
	     	<dt>Bootstrap框架</dt>
	     	<dd>Bootstrap是一个优秀的前端框架，看官网介绍</dd>
	     </dl>
	     
	     
	      <dl   class="dl-horizontal"> 
	     	<dt>Bootstrap框架</dt>
	     	<dd>Bootstrap是一个优秀的前端框架，看官网介绍</dd>
	     </dl> -->



	<!--      <code><section></code>
	
	
		
	press <kbd>ctrl + ,</kbd>
	
	
		
	<pre><p>Please   input  ...</p></pre>
	 -->

	 <var>333333测试</var>

              <samp>444444444也是</samp>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/jquery.min.js"></script>
</body>
</html>

 

小贺学习笔记
关注
专栏目录
BOOTSTRAP笔记
m0_52552720的博客
01-23 234
BOOTSTRAP笔记 栅格系统, 2.巨幕组件 Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 主要包含了栅格系统、全局CSS样式、组件和 JavaScript插件， 而 Bootstrap 的所有 JavaScript 插件都是用 jQuery 写的，所以 jQuery 必须在 Bootstrap 之前引入在HTML中，我们用标签引入外部样式(css)。 实例： <link rel="
Bootstrap v3 学习笔记 —— 全局 CSS 样式
cccloveforever的博客
04-05 1603
Bootstrap v3 设置全局的 CSS 样式。
BootStrap笔记
weixin_42979539的博客
09-22 171
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式...
Bootstrap框架示例文件实战解析
最新发布
weixin_36382073的博客
09-10 1553
本文还有配套的精品资源，点击获取 简介：Bootstrap是一个为快速开发响应式、移动优先网站而设计的前端开发框架。它提供丰富的组件和样式，借助示例文件集（包含HTML、CSS和JavaScript代码），本课程旨在深入讲解Bootstrap的核心特性，包括响应式布局、预定义组件、自定义样式、JavaScript插件、栅格系统和可访问性等。学员将学习如何通过这些示例文件，加...
Bootstrap的学习
liaowenxiong的博客
12-09 711
文章目录概念入门 概念 一个前端开发的框架，Bootstrap，来自Twitter， 是目前很受欢迎的前端框架。Bootstrap 是基于HTML、 CSS、 JavaScript 的，它简洁灵活，使得Web开发更加快捷。 框架： 一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。 好处： 1.定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2.响应式布局。同一套页面可以兼容不同分辨率的设备。 入门 1.下载 Bootstrap，地址：https:
Bootstrap学习
Ulrica_Amaris的博客
10-22 498
Bootstrap Bootstrap是什么 1.2011年，twitter的工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集–BootStrap。 2.Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Boots
Bootstrap学习笔记（三）组件
kun的博客
12-05 1010
1、复习总结：全局CSS样式： 按钮  .btn .btn-default 图片  .img-rounded  .img-circle  .img-thumbnail  .img-responsive 文本  .text-五种  .bg-五种  .text-left/right/center/justify 排版和代码   .list-unstyled   .list-inline 表格...
Bootstrap学习笔记（三）表单
前端产品工程师
02-05 1193
基础表单 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同，而且不同的浏览器对表单控件渲染的风格都各有不同。 同样，表单也是Bootstrap框架中的核心内容，下面向大家介绍Bootstrap框架中表单的制作。 表单
Bootstrap视频笔记：布局、代码与组件详解
本笔记详细记录了Bootstrap的学习内容，涵盖了多个方面的知识点。首先，我们了解到"holder.js"被提及，它可能是一种用于示例或预加载的JavaScript库。在栅格系统中，`col-md-offset-4`表示在大屏幕（md）上，元素向...
bootstrap学习笔记-第3章 表单
domorejojo
04-01 1998
bootstrap学习笔记-第3章 表单 更好排版：https://www.zybuluo.com/phper/note/81007 这一篇继续学习一下bootstrap里的表单。 基础表单 表单就是标签，其中包括文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。 bootstrap里面的form风格一般是这样。先外围来一个<form rol
bootstrap笔记
09-17
bootstrap笔记Bootstrap 移动设备优先。 所有列默认都是左浮动 为确保适当的绘制和触屏缩放，加入下面的meta标签
Bootstrap框架学习
2023也要一起加油鸭
03-01 655
文章目录1.Bootstrap的概念2.Bootstrap的好处3.快速入门知识讲解4.Bootstrap的响应式布局5.CSS样式和JS插件（具体使用去Bootstrap中文官网查找）5.1 全局CSS样式5.2 组件5.3 轮播图6.Bootstrap练习 1.Bootstrap的概念 一个前端开发框架，Bootstrap 基于 HTML、CSS、JavaScript 的，它简洁灵活，......
( 一)bootstrap学习——初识bootstrap
为者常成，行者常至
05-02 2580
bootstrap是一个http://v3.bootcss.com/
BootStrap简单学习
秋雨绵绵
03-04 1365
本文是关于BootStrap的简单学习，适合后端开发者查阅。
DIV与样式排版学习笔记！
Vsun Sky ── 阿永的博客
03-14 2031
需要用DIV来进行排版，对于CSS的样式要求就比较严格，说简单也简单，也复杂也复杂！今天第一次结触这个东西，边学习边得到一些体验！要用DIV排版，第一步得对BODY的样式进行控制。一、为了让整体版式进行基本的定位及定型，所以要对BODY进行样式控制,如下！body{       text-align: center;  }二、当然是对DIV的控制了，呵呵，用DIV排版，当然要对它进行制控制了！di
Bootstrap 学习（一）入门
weixin_34128534的博客
04-16 131
一：什么是Bootstrap？Bootstrapbootstrap是目前留下的前端框架之一，具备已下特点： 基于HTML、CSS、JavaScript开发的；样式展现方面定义了大量全局样式、列表、按钮等样式组件；特效方面实现了轮播、菜单等常用的js控件；样式采用less编写，js调用了jquery库；来自Twitter，现在委托保管再github上。Bootstrap适用于网站的开发，不适用于管理...
排版（个人学习笔记）
weixin_34310369的博客
07-14 149
一、规范 CSS单独写在.less或.css文件里 推荐使用Less JS单独写在.js文件里 格式： $(function(){ /*function*/ }) HTML写在.html文件里，然后引入.css和.js文件 方法不再直接在元素中写（例如...
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值