全面解析Bootstrap排版使用方法(文字样式)

发布网友

我来回答

共2个回答

懂视网

Bootstrap基本样式的使用

一、准备工作

1，响应式布局

Bootstrap是一种响应式布局框架，可以自动适配不同设备大小的显示模式，使用方式：在head标签中引入以下代码：

【相关推荐：Bootstrap教程】

<meta name="viewport" content="width=device-width, initial-scale=1">

其中 initial-scale=1 表示缩放比例为1.

2，引入bootstrap.css

可以将bootstrap.css文件下载到本地进行本地导入，还可以使用CDN导入，其中CDN导入方法如下：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

使用CDN的优缺点：1，必须在网络环境下才可引入；2，如果在当地的服务器上有文件，则加载速度会很快，比如CDN在青岛的某个服务器上存在bootstrap.css文件，则青岛地区的用户引入该文件的速度会很快，反之速度较慢，加载的延迟较高；3，使用CDN加载css文件在Webstorm软件中没有代码提示，如需要代码提示，建议将bootstrap.css下载到本地再引入。

3，引入bootstrap.js和jQuery.js

可以将bootstrap.js和jQuery.js文件下载到本地进行本地导入，还可以使用CDN导入，其中CDN导入方法如下：

<!-- jQuery 某些bootstrap插件需要使用 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 所有的bootstrap插件都需要引入 -->
<script src="js/bootstrap.min.js"></script>

注意：尽量将js文件的引入放在body标签的最后，提高浏览器渲染页面的性能。

二、开发中常使用到的样式

１，栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

代码片段如下：

<p class="container">
//将一行按照8:4分成两列
 <p class="row">
 <p class="col-md-8">.col-md-8</p>
 <p class="col-md-4">.col-md-4</p>
 </p>
//将一行三等分为三列
 <p class="row">
 <p class="col-md-4">.col-md-4</p>
 <p class="col-md-4">.col-md-4</p>
 <p class="col-md-4">.col-md-4</p>
 </p>
//将一行等分为两列
 <p class="row">
 <p class="col-md-6">.col-md-6</p>
 <p class="col-md-6">.col-md-6</p>
 </p>
</p>

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的；

兼容模式是向后兼容，例如当时用.col-md-时，在大屏幕时依然按照中等屏幕的布局方式排列，在小屏幕或者超小屏幕时则按照堆叠的方式排列，同样的原理，如果设置.col-xs-，则在所有的设备上都显示为其设置的排版布局，因为栅格系统是向后兼容；

栅格布局采用的是左浮动的布局方式，可以通过定义class属性值为.clearfix来清除浮动；

.col-md-offset-5来设置该栅格左边空出的5格，.col-md-push-3,表示该栅格向右移动3格，.col-md-pull-3表示改栅格向左移动3格；

通过栅格系统的布局方式，可以很简洁的设计出自己需要的响应式布局排版，能够在不同设备上达到不同的显示效果。

通过下面的实例说明栅格布局在手机、平板、电脑设备上的动态布局的强大：

<p class="container">
 <p class="row">
 <p class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</p>
 <p class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</p>
 </p>
</p>

其中第三行的class属性值表示的意思是，在超小屏幕（<768px）上显示为12个栅格，在小屏幕（>768px）上显示为6个栅格，在中等屏幕（>=992px）上显示的为8个栅格，大屏幕上未定义，根据栅格的向后兼容，在大屏幕上显示的为中等屏幕的布局。

媒体查询

很容易理解，如下代码：

-width: @screen-sm--width: @screen-md--width: @screen-lg-min) { ... }

e.g:
p{
/* 中等屏幕（桌面显示器，大于等于 992px） 此时执行{}里面的样式*/

@media (min-width: @screen-md-min) { width:100% }

/* 大屏幕（大桌面显示器，大于等于 1200px） 此时执行{}里面的样式*/

@media (min-width: @screen-lg-min) { width:80%}}

2、表格的常用样式

基础样式.table

带条纹区分行的表格.table-striped

带边框的表格.table-border

带鼠标悬停是区分的表格.table-hover

表格行显示的样式，通过设置tr的class属性值来控制，常用属性值有.info/.success/.warning/.active/.danger

热心网友

一、段落
　　段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：
1、全局文本字号为14px(font-size)。
2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。
3、颜色为深灰色（#333）；
二、文字样式
　　在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
1.粗体：在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。
2.斜体：在Bootstrap中，可以使用<em>或<i>来实现文本斜体。
三、强调类
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用*（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
<div
class="text-muted">.text-muted
效果</div>
<div
class="text-primary">.text-primary效果</div>
<div
class="text-success">.text-success效果</div>
<div
class="text-info">.text-info效果</div>
<div
class="text-warning">.text-warning效果</div>
<div
class="text-danger">.text-danger效果</div>
效果如下：
四、文本对齐
　　在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑
左对齐，取值left

☑
居中对齐，取值center

☑
右对齐，取值right

☑
两端对齐，取值justify
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑
.text-left：左对齐

☑
.text-center：居中对齐

☑
.text-right：右对齐

☑
.text-justify：两端对齐
有了文字样式，使得排版效果更清晰简洁，希望大家在自己的作品中多使用一些简单大方的文字样式，使作品脱颖而出，更加具有吸引力。