-
粗体 粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。 /*源码查看bootstrap.css文件第55行~第58行*/查看全部
-
强调内容 在实际项目中，对于一些重要的文本，希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。 如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。查看全部
-
段落（正文文本） 段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）： 1、全局文本字号为14px(font-size)。 2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。 3、颜色为深灰色（#333）； 4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果。 /*源码请查看bootstrap.css文件中第274行~280行*/ 另外在Bootstrap中，为了让段落p元素之间具有一定的间距，便于用户阅读文本，特意设置了p元素的margin值（默认情况之下，p元素具有一个上下外边距，并且保持一个行高的高度）： /*源码请查看bootstrap.css文件中第467行~469行*/ 如果你对CSS预处理器有所了解，那么你完全可以根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中，排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量：查看全部
-
标题（二） 除此之外，我们在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式： 1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。 2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%； 详细代码请参阅bootstrap.css文件中第407行~第443行。 h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small { font-size: 65%; } h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; } h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small, .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small { font-size: 75%; }查看全部
-
Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样，具体定义的规则可以如下表所示： 通过比较可以发现，Bootstrap标题样式进行了以下显著的优化重置： 1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。 2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。 3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。 标题的具体运用非常简单，和我们平时运用是一样的，使用<h1>~<h6>标签，分别表示标题一至标题六，h 后面的数字越大，表示级别越小，文本也越小。来看一个简单的效果：右侧代码编辑器中的10-16行的代码。 在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。如右侧代码编辑器中 18-23行代码所示： 对比两个示例的效果图，可以说他们的效果是一模一样的。查看全部
-
全局样式 在制作Web页面时，前端人员都习惯为网站设置一个全局样式（reset.css）。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库，他并没有一味的重置样式，而是注重各浏览器基础表现，降低开发难度。大部分前端人员都具有归零的思想，但实际你会发现，归零之后的样式在开发过程中会存在着潜在的问题，例如，在全局样式表中将em变成一个普通标记，明明应该是斜体，怎么就没效果了呢？ Bootstrap框架在这一部分做了一定的变更，不再一味追求归零，而是更注重重置可能产生问题的样式（如，body,form的margin等），保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下： 移除body的margin声明 设置body的背景色为白色 为排版设置了基本的字体、字号和行高 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式查看全部
-
基本的HTML模板 小伙伴们，上一小节的视频课程已经对Bootstrap提供的模板做了详细的介绍，在这一小节中我们把这个模板代码粘贴过来，以供你们学习查看，你们可以根据实际情况在此基础上进行扩展，只需要确保文件引用顺序一致即可。 如右侧代码编辑器中就是最基本的HTML模板。 我们来简单解释一下其中几条的重要代码： bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>查看全部
-
url查看全部
-
加入可改变图标的大小；查看全部
-
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"></div>查看全部
-
<div class="container"> <div class="row"></div> </div>查看全部
-
本来是向左浮动的，若是要让它向右，就要推（push）。想要向左，就要拉（pull）。查看全部
-
优化代码： 和嵌套表格一样，如果你觉得这样有间距不好看，你完全可以把列表组提取出来： <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <ul class="list-group"> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> </ul> <div class="panel-footer">作者：大漠</div> </div>查看全部
-
优化代码： 在实际应用运中，你或许希望表格和面板边缘不需要有任何的间距。但由于panel-body设置了一个padding：15px的值，为了实现这样的效果。我们在实际使用的时候需要把table提取到panel-body外面： <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <table class="table table-bordered">…</table> <div class="panel-footer">作者：大漠</div> </div>查看全部
-
<div class="row"> <div class="col-md-4 col-md-push-8">.col-md-4</div> <div class="col-md-8 col-md-pull-4">.col-md-8</div>查看全部
举报
0/150
提交
取消