当前位置：Gxlcms > JavaScript > Bootstrap入门书籍之（一）排版_javascript技巧

Bootstrap入门书籍之（一）排版_javascript技巧

时间：2021-07-01 10:21:17 帮助过：16人阅读

推荐阅读：Bootstrap入门书籍之（零）Bootstrap简介

Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。

1. 标题

在Bootstrap中使用标题的方式和常规html一样：从

到

分别从大到小安排标题元素，只不过在Bootstrap中重新设置了其默认样式，从源码中可以看到有如下共性：

字体颜色与字体样式继承自父元素，字体粗细为500，且行高全部设为1.1（也就是font-size的1.1倍）

在不同大小的标题中有着如下区别：

在Bootstrap中对于不同级别标题字体大小设置为： h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

重新设置了 margin-top 和 margin-bottom 的值， h1~h3 重置后的值都是 20px ； h4~h6 重置后的值都是 10px 。

除此之外在Bootstrap中为了 让非标题元素和标题使用相同的样式 ，还特意定义了 .h1~.h6 六个类名。如下所示：

在Bootstrap中，下面的代码，显示效果相同。

因为在实际应用中，我们可能经常会遇到除了主标题外，之后紧跟着一个副标题的情况。Bootstrap人性化的为我们设置了这样一个效果。使用方式也特别简单，如下：

当然毋庸置疑的是，从

到

都可以使用该设置。副标题 有着自己一些独特的样式：

行高全部都设置为了1，而且字体粗细变成了常规效果（不加粗），同时颜色被设置为灰色（ #999 ）。
在h1~h3内的 标签文本，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

2. 正文文本

Bootstrap中的文本全局样式如下：

字体大小为14px
行高为1.42867143（约等于20px）
字体颜色为 #333
p标签外部有着10个像素的下外边距 margin-bottom:10px;
当然，你是可以自行设置重置样式的。^_^

3. 强调

字体风格相关

强调相关的类

在Bootstrap中定义了一系列的这样的类，用于不同的情景，出去text外，还有bg（背景颜色）等等。使用方法类似，只是前面的文本进行了一些改变！所以。 记住这6个单词吧

4. 文本对齐风格

在Bootstrap中，为了简化操作，方便使用，使用了上面这四个类分别对应我们在CSS中常常使用 text-align 来实现文本的对齐风格的设置。

5. 列表

在Bootstrap中对于列表的设置与原生的html基本一致，需要注意的有：

在列表之间有10px的下外边距

在嵌套列表中，不含有下边距

Bootstrap当然不会就这么简单做一点点修改，它定义了一些关于列表的类给我们使用。

去点列表 .list-unstyled

从源码中，我们可以看到这样的信息，它除了将项目编号去除之外，还将默认的左边距也清除掉了。

在这样一段代码中，三个列表项会整齐的 排列在一起 ，且都没有 项目符号

内联列表 .list-inline

除了去点列表之外，Bootstrap还可以通过添加类名“.list-inline”来实现内联列表，简单点说就是 把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。 也可以说内联列表就是为制作水平导航而生。

水平定义列表 .dl-horizontal

现有代码如下：

在浏览器全屏显示中可以看到效果如下：


我们来把屏幕大小进行改变，在遇到一个临界值时（小屏），水平定义列表将回复到原始的状态，如下改变：


这是为什么呢？我们去看看源码吧！

原来在这里添加了一个媒体查询，只有 屏幕大于768px 的时候，添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式：

将dt设置了一个左浮动，并且设置了一个宽度为160px
将dd设置一个margin-left的值为180px，达到水平的效果
当标题宽度超过160px时，将会显示三个省略号
现在再看看上面的效果是不是和这里的描述都是一样的呢？答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格：

使用 来显示单行内联代码——针对于 单个单词或单个句子 的代码
使用

来显示多行块代码——针对于 多行代码 （也就是成块的代码）
使用 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!


代码如下：（需要注意的是，**不管使用哪种代码风格，在代码中碰到小于号（ < ）和大于号（ > ）都需要使用转义字符来替代）

code风格：

pre风格：

kbd风格：

  1.  元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在 pre标签 上添加类名 .pre-scrollable ，就可以控制代码块区域 最大高度为340px ，一旦超出这个高度，就会在 Y轴（纵向）出现滚动条。<p></p>
  2. <p>当然，你也可以进行自定义配置，例如：只需要在自定义的css中，对于该类添加一个 word-wrap: normal; ，这样的话，在代码块边框横向宽度小于内部代码横向长度时，就会出现横向滚动条。</p>
  3. <p><span style="color: #0000ff"><strong>7. 表格</strong></span></p>
  4. <p>表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了 1种基础样式 和 4种附加样式 以及 1个支持响应式的表格 。</p>
  5. <p>对应上面所说的，Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：</p>
  6. <p>.table 基础表格<br>
  7. .table-striped 斑马线表格<br>
  8. .table-bordered 带边框的表格<br>
  9. .table-hover 鼠标悬停高亮的表格<br>
  10. .table-condensed 紧凑型表格<br>
  11. .table-responsive 响应式表格</p>
  12. <p>.table 主要有三个作用：</p>
  13. <p>给表格设置了margin-bottom:20px以及设置单元内距<br>
  14. 在thead底部设置了一个2px的浅灰实线<br>
  15. 每个单元格顶部设置了一个1px的浅灰实线<br>
  16. 具体大家可以在源码中查看，后几种附加的样式在这里也不多说，但是下面说一些 注意事项：</p>
  17. <p>后几种表格附加样式，必须在基础样式 .table 之后，例如 </p><br>
  18. 响应式表格：其原理是在表格 外部添加容器 把普通表格 包裹 起来，下面进行详细说明：<p></p><div class="jb51code">
  19. <pre class="brush:js; layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li></li></ol></pre>
  20. </div><p>下面是宽屏的效果（和普通的表格无区别）：</p><p style="text-align: center"><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-25-201925/2016021714425417.png" alt=""> <br>
  21. </p><p>此处是窄屏的效果（可以看到滚动条的出现）：</p><p style="text-align: center"><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-25-201925/2016021714425418.png" alt=""><br>
  22. </p><p>表格行的类，表格情景</p><p>在上面已经说到了在Bootstrap中，为不同的情景做了不一样的颜色，用于不同的信息展示。只是在类名上做了一些小小的改变。下面就可以看到：</p><p style="text-align: center"><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-25-201925/2016021714425419.png" alt=""> <br>
  23. </p><p>只需要在 </p> 标签添加上这些类就可以使用了。<p></p><p>除此之外，通过源码可以看到，在这些颜色设置之外，Bootstrap还单独设置了 hover效果（悬浮状态） 的 颜色加深 效果（它对于不同的情况单独进行了颜色设置）。</p><p>实现也特别简单，只需要像 </p><table class="table table-bordered table-hover">
  24. <tbody><tr>
  25. </tr></tbody></table> 这样，在 <table class="table-hover"></table> 标签加上一个 table-hover 的类。（在未对  进行情景颜色设置时，该类依然有效果，只是效果不一样，上面已经说到了，因为它的单独设置，具体请到源码中查看）<p></p><p>也正因为这样，如果你想自定义颜色的话， 除了修改 tr 元素的颜色样式外，在 .table-hover 表格中也要做相应的调整!</p><p>排版的内容到这里就结束了，希望对大家学习Bootstrap排版相关知识有所帮助！                    
  26.                   
  27.  
  28.                     </p><div class="">
  29.                         <ul class="m-news-opt fix">
  30.                             <li class="opt-item">
  31.                                 <a href="/JavaScript-229009.html" target="_blank"><p>< 上一篇</p><p class="ellipsis">初识angular框架后的所思所想_AngularJS</p></a>
  32.                             </li>
  33.                             <li class="opt-item ta-r">
  34.                                  <a href="/JavaScript-229011.html" target="_blank"><p>下一篇 ></p><p class="ellipsis">ECharts仪表盘实例代码(附源码下载)_javascript技巧</p></a>
  35.                             </li>
  36.                         </ul>
  37.                     </div><div class="g-title fix">
  38.                         <h2 class="title-txt">人气教程排行</h2>
  39.                     </div><div class="m-rank u-dashed mb40">
  40.                         <ul>
  41.  <li class="rank-item">
  42.                                 <a href="/JavaScript-60002.html" title="vue2 设置router-view默认路径的实例" class="item-name ellipsis" target="_blank">
  43.                                     <span class="g-art-count fr">213次</span>
  44.                                     <span class="g-sort-num top">1</span>
  45.                                    vue2 设置router-view默认路径的实例                                </a>
  46.                             </li>
  47.   
  48.   
  49.   <li class="rank-item">
  50.                                 <a href="/JavaScript-56926.html" title="Vue-路由导航菜单栏的高亮设置方法" class="item-name ellipsis" target="_blank">
  51.                                     <span class="g-art-count fr">213次</span>
  52.                                     <span class="g-sort-num second">2</span>
  53.                                    Vue-路由导航菜单栏的高亮设置方法                                </a>
  54.                             </li>
  55.   
  56.   
  57.   <li class="rank-item">
  58.                                 <a href="/JavaScript-56852.html" title="基于Axios 常用的请求方法别名(详解)" class="item-name ellipsis" target="_blank">
  59.                                     <span class="g-art-count fr">213次</span>
  60.                                     <span class="g-sort-num third">3</span>
  61.                                    基于Axios 常用的请求方法别名(详解)                                </a>
  62.                             </li>
  63.   
  64.   
  65. <li class="rank-item">
  66.                                 <a href="/JavaScript-39788.html" title="JavaScript+canvas实现七色板效果实例" class="item-name ellipsis" target="_blank">
  67.                                     <span class="g-art-count fr">213次</span>
  68.                                     <span class="g-sort-num ">4</span>
  69.                                    JavaScript+canvas实现七色板效果实例                                </a>
  70.                             </li>
  71.   
  72.   
  73. <li class="rank-item">
  74.                                 <a href="/JavaScript-281548.html" title="实现vuex的初始化方法" class="item-name ellipsis" target="_blank">
  75.                                     <span class="g-art-count fr">212次</span>
  76.                                     <span class="g-sort-num ">5</span>
  77.                                    实现vuex的初始化方法                                </a>
  78.                             </li>
  79.   
  80.   
  81. <li class="rank-item">
  82.                                 <a href="/JavaScript-238997.html" title="jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决" class="item-name ellipsis" target="_blank">
  83.                                     <span class="g-art-count fr">212次</span>
  84.                                     <span class="g-sort-num ">6</span>
  85.                                    jQuery：当鼠标快速移动时无法触发mouseleave事件的问题解决                                </a>
  86.                             </li>
  87.   
  88.   
  89. <li class="rank-item">
  90.                                 <a href="/JavaScript-234597.html" title="Array.slice()与Array.splice()的返回值类型_基础知识" class="item-name ellipsis" target="_blank">
  91.                                     <span class="g-art-count fr">212次</span>
  92.                                     <span class="g-sort-num ">7</span>
  93.                                    Array.slice()与Array.splice()的返回值类型_基础知识                                </a>
  94.                             </li>
  95.   
  96.   
  97. <li class="rank-item">
  98.                                 <a href="/JavaScript-60647.html" title="微信小程序使用swiper组件实现层叠轮播图" class="item-name ellipsis" target="_blank">
  99.                                     <span class="g-art-count fr">212次</span>
  100.                                     <span class="g-sort-num ">8</span>
  101.                                    微信小程序使用swiper组件实现层叠轮播图                                </a>
  102.                             </li>
  103.   
  104.   
  105. <li class="rank-item">
  106.                                 <a href="/JavaScript-57684.html" title="element-ui 限制日期选择的方法(datepicker)" class="item-name ellipsis" target="_blank">
  107.                                     <span class="g-art-count fr">212次</span>
  108.                                     <span class="g-sort-num ">9</span>
  109.                                    element-ui 限制日期选择的方法(datepicker)                                </a>
  110.                             </li>
  111.   
  112.   
  113. <li class="rank-item">
  114.                                 <a href="/JavaScript-57417.html" title="vue-baidu-map 进入页面自动定位的解决方案(推荐)" class="item-name ellipsis" target="_blank">
  115.                                     <span class="g-art-count fr">212次</span>
  116.                                     <span class="g-sort-num ">10</span>
  117.                                    vue-baidu-map 进入页面自动定位的解决方案(推荐)                                </a>
  118.                             </li>
  119.   
  120.   
  121. <li class="rank-item">
  122.                                 <a href="/JavaScript-54331.html" title="JS实现元素上下左右移动效果" class="item-name ellipsis" target="_blank">
  123.                                     <span class="g-art-count fr">212次</span>
  124.                                     <span class="g-sort-num ">11</span>
  125.                                    JS实现元素上下左右移动效果                                </a>
  126.                             </li>
  127.   
  128.   
  129. <li class="rank-item">
  130.                                 <a href="/JavaScript-32878.html" title="node.js中的emitter.on方法使用说明" class="item-name ellipsis" target="_blank">
  131.                                     <span class="g-art-count fr">212次</span>
  132.                                     <span class="g-sort-num ">12</span>
  133.                                    node.js中的emitter.on方法使用说明                                </a>
  134.                             </li>
  135.   
  136.   
  137. <li class="rank-item">
  138.                                 <a href="/JavaScript-251986.html" title="在js中如何实现图片左右滑动" class="item-name ellipsis" target="_blank">
  139.                                     <span class="g-art-count fr">211次</span>
  140.                                     <span class="g-sort-num ">13</span>
  141.                                    在js中如何实现图片左右滑动                                </a>
  142.                             </li>
  143.   
  144.   
  145. <li class="rank-item">
  146.                                 <a href="/JavaScript-65218.html" title="layui button 按钮弹出提示窗口,确定才进行的方法" class="item-name ellipsis" target="_blank">
  147.                                     <span class="g-art-count fr">211次</span>
  148.                                     <span class="g-sort-num ">14</span>
  149.                                    layui button 按钮弹出提示窗口,确定才进行的方法                                </a>
  150.                             </li>
  151.   
  152.   
  153. <li class="rank-item">
  154.                                 <a href="/JavaScript-53968.html" title="深入理解Vue生命周期、手动挂载及挂载子组件" class="item-name ellipsis" target="_blank">
  155.                                     <span class="g-art-count fr">211次</span>
  156.                                     <span class="g-sort-num ">15</span>
  157.                                    深入理解Vue生命周期、手动挂载及挂载子组件                                </a>
  158.                             </li>
  159.   
  160.   
  161. <li class="rank-item">
  162.                                 <a href="/JavaScript-32108.html" title="JS 使用for循环遍历子节点查找元素" class="item-name ellipsis" target="_blank">
  163.                                     <span class="g-art-count fr">211次</span>
  164.                                     <span class="g-sort-num ">16</span>
  165.                                    JS 使用for循环遍历子节点查找元素                                </a>
  166.                             </li>
  167.   
  168.   
  169. <li class="rank-item">
  170.                                 <a href="/JavaScript-286609.html" title="bootstrap如何设置表单必填" class="item-name ellipsis" target="_blank">
  171.                                     <span class="g-art-count fr">210次</span>
  172.                                     <span class="g-sort-num ">17</span>
  173.                                    bootstrap如何设置表单必填                                </a>
  174.                             </li>
  175.   
  176.   
  177. <li class="rank-item">
  178.                                 <a href="/JavaScript-286358.html" title="bootstrap4兼容哪些浏览器" class="item-name ellipsis" target="_blank">
  179.                                     <span class="g-art-count fr">210次</span>
  180.                                     <span class="g-sort-num ">18</span>
  181.                                    bootstrap4兼容哪些浏览器                                </a>
  182.                             </li>
  183.   
  184.   
  185. <li class="rank-item">
  186.                                 <a href="/JavaScript-247980.html" title="jQuery实现追加数组并去重功能" class="item-name ellipsis" target="_blank">
  187.                                     <span class="g-art-count fr">210次</span>
  188.                                     <span class="g-sort-num ">19</span>
  189.                                    jQuery实现追加数组并去重功能                                </a>
  190.                             </li>
  191.   
  192.   
  193. <li class="rank-item">
  194.                                 <a href="/JavaScript-215560.html" title="jQuery实现的在线答题功能_jquery" class="item-name ellipsis" target="_blank">
  195.                                     <span class="g-art-count fr">210次</span>
  196.                                     <span class="g-sort-num ">20</span>
  197.                                    jQuery实现的在线答题功能_jquery                                </a>
  198.                             </li>
  199.                         </ul>
  200.                     </div><div class="footer">
  201.    本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div><div style="display:none">
  202. <div class="login-box" id="login-dialog">
  203. <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);">登录</a></div>
  204. <div class="login-form" id="nav-signin">
  205.  <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div>  -->
  206. <div class="login-box-form" id="con_login_1">
  207. <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"></form>
  208. <p class="int-text">
  209. <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};"></p>
  210. <p class="int-text">
  211. <input class="password1" type="password" id="password" name="password" value="******" onblur="if(this.value=='') this.value='******';" onfocus="if(this.value=='******') this.value='';">
  212. </p>
  213. <p class="int-info">
  214.                 <label class="ui-label"> </label>
  215.                 <label for="agreement" class="ui-label-checkbox">
  216.                 <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked">
  217.                 <input type="hidden" name="notforward" id="notforward" value="1">
  218.                 <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>                           
  219.        <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
  220.   <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> 
  221.   
  222. </div>
  223. <form id="regform" action="/user-center-reg.html" method="post"></form>
  224. <div class="login-reg" style="display: none;" id="con_login_2">
  225. <input type="hidden" name="t" id="t">
  226.   <p class="int-text">
  227.     <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p>
  228.     <p class="int-text">
  229.     <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p>
  230.   <p class="int-text">
  231.   <input type="password" id="pwd" name="password" value="******" onblur="if(this.value=='') this.value='******';" onfocus="if(this.value=='******') this.value='';"> </p>
  232.   <p class="int-text1"><span class="inputbox">
  233.     <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};">
  234.     </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></span></p>
  235.   <p class="int-info">
  236.     <label>
  237.       <input value="" name="agreement" id="agreement" checked="checked" type="checkbox">
  238.       我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label>
  239.   </p>
  240.   <p class="int-btn"><input type="hidden" name="dosubmit">
  241. <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p>
  242. </div>
  243.  
  244. </div>
  245. </div>
  246. </div><div data-type="4" data-plugin="aroundbox" data-plugin-aroundbox-x="left" data-plugin-aroundbox-y="bottom" data-plugin-aroundbox-iconsize="60x60" data-plugin-aroundbox-fixed="1" data-plugin-aroundbox-offsetx="10"></div><table><tbody><tr>
  247.                     
  248.                     
  249.                     
  250.                     
  251.                 
  252.               
  253.                     
  254.                 
  255.                   
  256.                     
  257.                     
  258.                 
  259.             
  260.             <!-- / 教程内容页 -->
  261.         
  262.     
  263.   
  264. <!-- 页尾 -->
  265. <!-- / 页尾 -->
  266.  
  267.  
  268.    
  269. <script src="https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"></script><script>
  270. var _hmt = _hmt || [];
  271. (function() {
  272.   var hm = document.createElement("script");
  273.   hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2";
  274.   var s = document.getElementsByTagName("script")[0]; 
  275.   s.parentNode.insertBefore(hm, s);
  276. })();
  277. </script>
  278.  <script type="text/javascript" src="/layui/layui.js"></script>
  279.     <script>
  280.     layui.use('code', function() {
  281.         layui.code({
  282.             elem: 'pre', //默认值为.layui-code
  283.             about: false,
  284.             skin: 'notepad',
  285.             title: 'php怎么实现数据库验证跳转代码块',
  286.             encode: true //是否转义html标签。默认不开启
  287.         });
  288.     });
  289.     </script>
  290. </tr></tbody></table>