Bootstrap入门1——排版

最新推荐文章于 2022-08-05 05:30:00 发布

Enamor the star

最新推荐文章于 2022-08-05 05:30:00 发布

阅读量197

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_42107474/article/details/89471583

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先在bootstrap官网"Getting started->Starter template"里复制参考初始代码：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    //Bootstrp中的JS插件依赖于jQuery，因此jQuery在Bootstrp之前引用
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
  </body>
</html>

标题

bootstrap实现：<h1>~<h6>及.h1~.h6
那实现一个标题后面紧跟着一行小的副标题在怎么办呢？在Bootstrap中，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式：

<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；
而在h4~h6内的字号都设置为当前字号的75%；

<h1>孤儿院无私奉献30年<small>一曲人性的赞歌</small></h1>

文本

如果想让一个段落p突出显示，可以通过添加类名.lead实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。用法如下：

<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p> 
<p class="lead">我是特意要突出的文本，我的样子长成这样。</p>

除此之外，Bootstrap还:

通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理;
使用<b>和<strong>标签让文本直接加粗;
使用标签<em>或<i>来实现斜体。

强调类都是通过颜色来表示强调，具本说明如下：

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

与文本对齐有关的类：

.text-left{ text-align: left; }
.text-right {text-align: right; }
.text-center { text-align: center; }
.text-justify {text-align: justify; }

特别声明：目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。

列表

以往建立列表有下面几种方法：

<body>
	<ul>
	    <li>无序列表信息1</li>
	    <li>无序列表信息2</li>
	    <li>无序列表信息3</li>
	</ul>
	<ol>
	    <li>有序列表信息1</li>
	    <li>有序列表信息2</li>
	    <li>有序列表信息3</li>
	</ol>
	<dl>
	    <dt>定义列表标题</dt>
	    <dd>定义列表信息1</dd>
	    <dd>定义列表信息2</dd>
	</dl>
</body>

Bootstrap对于列表，只是在margin上做了一些调整；
在Bootstrap中列表也是可以嵌套的，如右侧编辑器中的代码就是有序列表；
通过给无序列表添加一个类名.list-unstyled,这样就可以去除默认的列表样式的风格；

 <ul class="list-unstyled">
        <li>不带项目符号</li>
        <li>不带项目符号</li>
</ul>

通过添加一个类.list-inline可以方便地得到水平列表

<ul class="list-inline">    
	<li>W3cplus</li>
	<li>Blog</li>  
	<li>CSS3</li>   
	<li>jQuery</li>
	<li>PHP</li>
</ul>

Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。(宽度自适应)

<dl class="dl-horizontal">
    <dt>标题一</dt>
    <dd>描述内容</dd>
    <dt>标题二</dt>
    <dd>描述内容</dd>
</dl>

代码风格：

Bootstrap的代码风格有三种： <code> <pre> <kbd>

code 风格：（使用于单行代码）
pre风格：(适用于一整段代码)

<div>
	<pre>
		&lt;ul&gt;//即<ul>
			&lt;li&gt;...&lt;/li&gt;
			&lt;li&gt;...&lt;/li&gt;
			&lt;li&gt;...&lt;/li&gt;
		&lt;/ul&gt;
	</pre>
</div>

kbd风格：（黑底白字）

<div>
	请输入<kbd>ctrl+c</kbd>来复制代码，
	然后使用<kbd>ctrl+v</kbd>来粘贴代码
</div>

只需要在pre标签上添加类名.pre-scrollable，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

表格

<table class="table">

  <thead>
    <tr>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>表格单元格</td>
      <td>表格单元格</td>
      <td>表格单元格</td>
    </tr>
    <tr>
      <td>表格单元格</td>
      <td>表格单元格</td>
      <td>表格单元格</td>
    </tr>
  </tbody>

</table>

把上面这段代码的第一行分别改为：

<table class="table table-striped">//每行明暗交替出现
<table class="table table-bordered">//带边框
<table class="table table-striped table-bordered table-hover">//带边框，明暗交替，鼠标经过背景加深
<table class="table table-condensed">//紧凑模式

可用active,success,info,warning,danger修改表格中的行的背景颜色：

  <thead>
    <tr>
      <th>类名</th>
      <th>描述</th>
    </tr>
  </thead>

  <tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td>.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，需要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者可能是错误的行为</td>
    </tr>
  </tbody>

</table>

如果在 <table>元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在 <table>元素上添加 .table类名。

响应式表格
当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。在<table>标签外添加以下代码即可实现：

<div class="table-responsive">
</div>

Enamor the star

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap入门1——排版

先在bootstrap官网"Getting started->Starter template"里复制参考初始代码：<!doctype html><html lang="en"> <head>  <meta charset="utf-8"> &lt...
复制链接

扫一扫

专栏目录