Bootstrap页面布局8 - BS常用标签与样式

常用的Css文字标签

　　一、

　　<p>文字段落Start,<strong>重要的文字</strong>,<em>倾斜的文字用来提示</em>,<abbr class=‘initialism‘ title="Content Management System">cms</abbr>是"Content Management System"的简称,文字段落End</p>

　　

　　说明：

　　　　标签　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作用

　　　　<p></p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　标记段落

　　　　<em></em>　　 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　文字倾斜

　　　　<strong></strong>　　　　　　　　  　　　　　　　　　　　　　　　　　　　　　　　　文字加粗

　　　　<abbr class=‘initialism‘ title=‘Content Management System‘>cms</abbr>　　　　　　abbr标记简称，.initialism是使其大写,title内的内容一般是全称

　　二、

　　<blockquote class=‘pull-right‘><p>它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p><small>来源<cite>百度百科</cite></small></blockquote>

　　如图：

　　　　

　　说明：

　　　　标签　　　　　　　　　　　　　　　　　　　　　　　　　　　  作用

　　　　<blockquote><p></p></blockquote>　　　　　　　　　　 表示引用一段文字,p标签表示引用的一段, .pull-right表示使其右对齐

　　　　<small></small>　　　　　　　　　　　　　　　　　　　　　 表示对这段文字的说明

　　　　<cite></cite>　　　　　　　　　　　　　　　　　　　　　　  百度百科是一个网络，进行一个cite标记

　　　　

Bootstrap页面布局8 - BS常用标签与样式

时间： 2024-11-05 18:48:06

Bootstrap页面布局8 - BS常用标签与样式的相关文章

Bootstrap页面布局23 - BS折叠内容

<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如果用的a标签,href='#collapse1'--> <a href='#collapse1' class='btn btn-primary' data-toggle='collapse'>点击显示内容</a> <!--button标签中指向data-target='#c

Bootstrap页面布局3 - BS布局

1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示: 2.给需要的元素添加一个容器,使其居中显示 <div class='container'> <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> </div&g

Bootstrap页面布局9 - BS列表

列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编辑器</li> <li>TinyMCE编辑器</li> <li>Kindeditor编辑器</li> </ul> 如图: 有序列表: <ol> <li>Ueditor编辑器</li> <li>

Bootstrap页面布局10 - BS表格

①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2.table中添加 <table class='table table-striped'></table> -- 奇偶行背景色区别 如图: 3.table中添加<table class='table table-bordered'></table> -- 表格显

Bootstrap页面布局6 - BS把已有的固定宽度布局转换成响应式布局

首先引入文件bootstrap-responsive.css <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> bootstrap-responsive.css这个样式表已经为我们针对常用的上网设备做好了相应的响应式设计: 比如: 分辨率宽度1200像素以上的屏幕上,网格的宽度会由60px变为70px,且网格与网格之间的距离由20px变为30px 在平板电脑的垂直状

Bootstrap页面布局24 - BS旋转木马功能

代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> <div class='carousel slide' id='carousel1'> <div class='carousel-inner'> <div class='item active'> <img src='http://placehold.it/1246x360/

Bootstrap页面布局21 - BS对话框设计

设计弹出层对话框: 设计一个点击登录按钮,再弹出一个登陆对话框的实例,且带有动画效果 <div class='container-fluid'> <h2 class='page-header'>对话框插件的调用</h2> <a href='#login' data-toggle='modal' class='btn btn-primary'>登录</a> <div class='modal hide fade' id='login'>

Bootstrap页面布局22 - BS工具提示

当鼠标点击在一个a连接上时,显示提示文字的效果 ----------------  tooltip <div class='container-fluid'> <h3 class='page-header'>Bootstrap 工具提示</h3> <p style='text-align:center;'><a href='#' rel='tooltip' title='http://www.taobao.com'>淘宝网</a>&l

Bootstrap页面布局11 - BS表单

<input type='text' value='' placeholder='输入您的用户名' class='input-mini' /> ①几个类控制文本框长度 input-mini:最小 如图: input-small:次小 如图: input-medium:中等 如图: input-max:最长 如图: spanN:N代表数字,最大12,N表示1个网格的宽度 例如:span4表示对应的input框占用4个网格的宽度 ②属性:placeholder="输入您的用户名"