Bootstrap页面排版

最新推荐文章于 2024-03-10 09:15:00 发布
最新推荐文章于 2024-03-10 09:15:00 发布
阅读量135 收藏
点赞数
分类专栏： 前端 文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44981598/article/details/132871166
版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>bootatrap排版</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
  </head>
  <body>
    <br/>
    <blockquote>引用文本</blockquote>
    <!--相反 -->
    <blockquote class="blockquote-reverse">引用文本</blockquote>
    <!-- 靠左 -->
    <blockquote class="pull-right">引用文本</blockquote>
    <!-- 靠右 -->
    <blockquote class="pull-left">引用文本</blockquote>
    <br/>


   <!-- 列表无样式，不加换行是在一行内的 -->
    <ul class="list-unstyled list-inline">
      <li>bootatrap框架</li> <br />
      <li>bootatrap框架</li> <br />
      <li>bootatrap框架</li> <br />
      <li>bootatrap框架</li> <br />
    </ul>

     <!--段落-->
    <p>Bootstrap 框架</p>

    <!--段落文本突出-->
    <p class="lead">Bootstrap 框架设置</p>
    <p>Bootstrap 框架</p>

    <br />


    <span class="h1">Bootstrap支持两种方法设置标题</span>
    <h1>Bootstrap</h1>
    <h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>

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

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

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

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

    <br />
    Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>
    <!--缩略语-->

    <br />
    <address>
      <!--设置地址，去掉了倾斜，设置了行高，底部 20px-->
      <strong>Twitter, Inc.</strong><br />
      795 Folsom Ave, Suite 600<br />
      San Francisco, CA 94107<br />
      <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>

    <br />
    <dl class="dl-horizontal">
      <!--水平排列描述列表-->
      <dt>Bootstrap</dt>
      <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
    </dl>

    <br />
    <code>&lt;section&gt;</code><br />
    <!--内联代码-->
    <code>&lt;option&gt;</code>

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

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

    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

wjg1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9061
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
Bootstrap（bootstrap的栅格系统、bootstrap的布局容器）
m0_46420078的博客
02-03 6055
一、bootstrap的栅格系统 用固定的格子进行网页布局，又称为网格布局 1、响应式栅格系统 使用响应式栅格系统进行页面布局时，网页根据不同的显示终端展示不同的页面结构。 例如，在校屏幕上由某些模块将按照不同的方式排列或者被隐藏。 2、创建使用响应式栅格系统页面的步骤（1）创建html页面 定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代 码（2）编写css样式 页头和页尾分别显示在网页的最上方和最下方，而中间的导航、主要内容和侧边栏根据浏览器窗口的大小...
自己动手搭网站（四）：用bootstrap写几个简单的页面
热门推荐
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
Bootstrap主页面搭建（十四）
dengfengling999的博客
12-04 1690
创建主页面：index.jsp：引入bootstrap依赖：首先写导航条，复制代码更改： 使用栅格布局： 菜单栏使用手风琴组件，复制代码：修改手风琴代码：手风琴嵌套列表组 用户管理页面跟主页面，导航栏，菜单栏都相同，不同的是页面中心内容部分，所以复制index主页面代码，修改页面中心内容部分的代码： 添加分页、消息提示警告框： 第二个面板： 点击修改：用户列表页list.html面详细代码： 页面联合搭建： 下面分被创建分模块：主页面引用：分别复制list1，l
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
Zhang_wang_yun的博客
04-05 5581
利用Bootstrap框架制作Bootstrap中文网首页（响应式布局）
学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面
最新发布
景天科技苑
03-10 1万+
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架。 是一个用于快速开发Web应用程序和网站的前端框架。 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷。
学习使用Bootstrap页面排版样式
08-30
"学习使用Bootstrap页面排版样式" Bootstrap 是一个基于 HTML、CSS、JavaScript 的开源框架，由 Twitter 公司的两名技术工程师研发的。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 ...
第二章之Bootstrap 页面排版样式
10-22
在本章中，我们将深入探讨Bootstrap的页面排版样式，这包括标题、页面主体、对齐方式以及列表等基本内容。 首先，让我们关注页面主体。Bootstrap对全局的CSS样式进行了设定，确保了一致的视觉效果。基础的字体大小...
bootstrap页面生成器
10-21
Bootstrap页面生成器是一种工具，它基于流行的前端框架Bootstrap，帮助开发者快速创建和定制网页的LIST（列表）页面以及增删改查（CRUD）功能。这个工具极大地提高了开发效率，减少了手动编写HTML、CSS和JavaScript...
Bootstrap布局（一）
m0_69034993的博客
09-29 2695
当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
bootstrap实现登录页面
07-04
实现静态的登录页面，借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
Bootstrap响应式 风景主题网页设计 HTML CSS适配PC 手机端
lxidw7的博客
01-02 932
Bootstrap4响应式网页设计，本套大作业共计12个页面，均为响应式页面，使用bootstrap4制作导航栏、轮播图，使用@media screen and (min-width:480px){... 、 798px、1024px来控制移动端、平板端、PC端对应的响应式尺寸，整体美观度较高，网页中包含：Div+CSS、首页JS轮播图、视频、表单、鼠标滑过效果、二级页面、三级页面，LOGO设计~Bootstrap响应式 风景主题网页设计 HTML CSS适配PC 手机端。
大学生bootstrap框架网页作业成品 bootstrap响应式网页制作模板 学生家乡网页bootstrap框架网站作品 html静态网页设计制作 dw静态网页成品模板素材网页
wx___BJ050106的博客
12-29 863
网页作品编辑作品下载后可使用任意HTML编辑软件（如：`DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页） 网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
使用Bootstrap制作网页主界面、增加界面
yifei_345678的博客
05-03 2230
使用Bootstrap排出好看的界面👌
使用Bootstrap完成响应式页面设计
m0_62676426的博客
11-13 1980
Bootstrap5是目前Bootstrap的最新版本，但考虑到浏览器的兼容性，建议使用 Bootstrap4 或 Bootstrap3。目前Bootstrap5 兼容所有主流浏览器（Chrome、Firefox、Edge、Safari 和 Opera），但不支持 IE11 及以下版本。在这篇文章中我使用的是Bootstrap4。
bootstrap简单的页面布局
cxzlp0521的博客
09-25 7894
1.布局结构(头部固定,内容分为左右结构) 2.结果展示 3.HTML代码 &lt;div class="logo"&gt; logo &lt;/div&gt; &lt;div class="container-fluid"&gt; &lt;div class="row main"&gt; &lt;div class=&quo
如何用bootstrap进行页面布局
weixin_44552856的博客
01-18 1万+
如何用bootstrap进行页面布局 开发工具与关键技术：DW2017 bootstrap框架的使用 作者：胡宁淇 撰写时间：2019年1月17日 Bootstrap是一个框架，里面封装一些页面布局常用到的代码 在这个橙色的框内有各种封装好的一些样式，比如a标签，input标签，下拉框，接下来我们就来我们就用这个框架来构建一个简单的页面，在使用bootstrap之前我们先要把bootstra...
Bootstrap页面的跳转
qq_44935015的博客
06-02 1万+
页面的相互跳转 首先是一个登录首页界面： （1）点击“登录”会跳转到个人页面，管理，查看相应信息（信息还没有加入，目前只是一个页面）。 点击登录后跳转为如下界面： （2）点击“立即注册”会跳转到第二个注册页面，点击用户注册界面的“请登录”又会跳转回到第一个登录首页界面。跳转如下： ...
Bootstrap排版
Peak Xin's Blog
06-23 902
标题（一） Bootstrap和普通的HTML页面一样，定义标题都是使用标签到,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： 通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置： 1、重新设置了margin-top和margin-bottom的值，  h1~h3重置后的值都是20p
bootstrap完成手机页面排版
04-25
ChitGPT: 您好，关于您的问题，Bootstrap是一款前端框架，可以帮助开发者快速创建响应式布局的网站页面。使用Bootstrap进行手机端排版时，可以根据不同设备的屏幕尺寸和分辨率，灵活调整布局和样式，以适应不同的设备和浏览器。一般来说，在Bootstrap中可以利用栅格系统来分割页面的布局，使用响应式的CSS类来调整样式，以实现适配不同分辨率的效果。希望这个回答可以对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值