Bootstrap3学习笔记:辅助样式

<!DOCTYPE html>
<html>
<head>
<meta charst="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Bootstrap基础练习</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- 以下2个插件是用于在IE8支持HTML5元素和媒体查询的,如果不用可移除 -->
<!-- 注意:Respond.js不支持 file:// 方式的访问 -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<!-- 辅助样式 -->
	<!-- 文本样式 -->
	<p class="text-muted">text-muted</p>
	<p class="text-primary">text-primary</p>
	<p class="text-success">text-success</p>
	<p class="text-info">text-info</p>
	<p class="text-warning">text-warning</p>
	<p class="text-danger">text-danger</p>
	<!-- 文本背景样式 -->
	<p class="bg-primary">Primary</p>
	<p class="bg-success">Success</p>
	<p class="bg-info">Info</p>
	<p class="bg-warning">Warning</p>
	<p class="bg-danger">Danger</p>
	<!-- 辅助图标 -->
	<!-- 关闭图标 -->
	<button type="button" class="close">按钮图标关闭</button>
	<a href="#" class="close">链接图标关闭</a>
	<!-- 向下箭头:直接在相应的span(或其他)元素使用.caret样式 -->
	<span class="caret"></span>
	<!-- 内容浮动 -->
	<p class="pull-left">向左浮动</p>
	<p class="pull-right">向右浮动</p>
	<p class="center-block">居中浮动</p>
	<div class="clearfix">清除浮动</div>
</body>
</html>
时间: 2024-10-06 12:51:03

Bootstrap3学习笔记:辅助样式的相关文章

Bootstrap3学习笔记 Bootstrap3文档和栅格系统

?? Bootstrap 使用到的某些 HTML 元素和 CSS 属性须要将页面设置为 HTML5 文档类型. 1)例如以下开头html标签: <!DOCTYPE html> <html lang="zh-CN"> ... </html> 2)Bootstrap3是依照移动设备优先设计的框架.为了确保适当的绘制和触屏缩放.须要加入viewport元数据标签: <meta name="viewport" content=&qu

HTML学习笔记 CSS样式 第六节 (原创)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>样式</title> <link rel="stylesheet" href="tzy.css" type="text/css"></head><body><p

android学习笔记38——样式和主题

Style.Theme 样式和主题资源都是用于android应用的美化操作. 样式:一组格式的集合,可重复使用. android的样式资源存放与res/values文件夹下,其根元素为<resources.../>,该元素内可包含多个<style>子元素,每个<style>定义一个样式.\ <style>元素指定如下属性: 1.name 2.parent:指定该样式继承的父类样式.当样式继承某个父类样式时,该样式会获得父样式中定义的全部样式:同时,当前样式也

Bootstrap3学习笔记:按钮

<!DOCTYPE html> <html> <head> <meta charst="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) --> <meta name="viewport&q

Bootstrap3学习笔记:基础排版

<!DOCTYPE html> <html> <head> <meta charst="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) --> <meta name="viewport&qu

Bootstrap3学习笔记:表单

<!DOCTYPE html> <html> <head> <meta charst="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- user-scalable=no 在移动设备浏览器上,禁止用户缩放(zooming) --> <meta name="viewport&q

css学习笔记:常用样式

CSS 1.CSS概述 层叠样式表 作用:控制页面的显示效果,最终用HTML去展示页面内容,用CSS样式去控制页面内容的显示效果 注释用/*    */ 2.CSS和HTML结合的方式 1.属性style结合方式(行内样式) 在标签中写style属性. style="属性:值" 2.style标签结合(内嵌方式) <style> code.... </style> 3.Link标签进行结合(最常用的) 1.先定义外部样式文件 2. 引入<link rel=

3.6html学习笔记之样式选择

1.元素选择器 *{padding:0;margin:0;} p,span{} 2.类选择器 *.class{} p.class{} <p class="important class1"> 3.id选择器 #id为x的元素 4.属性选择器 *[title]{color:red}有这个属性的 5.后代选择器: 空格(后代).>(子代).+(紧邻) 子元素 6.伪类选择器: 自身元素 a:visited{} a:link{} a:hover{} a:active{}

Android学习笔记之样式和主题之选择器

(1)布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:p