在慕课学习Bootstrap

---恢复内容开始---

可以用class=“h1”等给元素加h1样式

<h>------<small>----</small></h>     <small>是副标题

class="lead"     强调文本,突出显示

<strong>---</strong>     粗体

<i>---</i>   <em>---</em>     斜体

  • text-muted:提示,使用浅灰色(#999)                                                                                                                text-left                 文本向左对齐                                                           .table:基础表格
  • .text-primary:主要,使用蓝色(#428bca)                                                                                                           text-right               文本向右对齐                                                           .table-striped:斑马线表格
  • .text-success:成功,使用浅绿色(#3c763d)                                                                                                           text-center             文本居中对齐                                                           .table-bordered:带边框的表格
  • .text-info:通知信息,使用浅蓝色(#31708f)                                                                                                        text-justify            文本两端对齐                                                            .table-hover:鼠标悬停高亮的表格
  • .text-warning:警告,使用黄色(#8a6d3b)                                                                                                                                                                                                                       .table-condensed:紧凑型表格
  • .text-danger:危险,使用褐色(#a94442)                                                                                                                                                                                                                         .table-responsive:响应式表格

class=“list-inline”     内联列表,简单说就是水平的没有符号的列表,为导航而生

自定义列表中加class=“dl-horizontal”    自定义水平列表

在网页上插入代码有三种<code>单行</code>     <pre>多行</pre>     <kbd>用户用键盘操作</kbd>     无论是哪一个  小于号用&lt,大于号用&gt

<pre class="pre-scrollable">多行代码是,又不想让其占用过多面积,此类可以出现滚动条,高度限定为340px

类名 描述
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为

水平表单class=“form-horizontal”

内联表单class=“form-inline”

<div class="form-group"><input type="--" class="form-control" placehoder="Enter email"></div>

下拉选择框(滚动条模式的话,在select中加multiple)

<div class="form-group">

<select class="form-control">

<option></option>

<option></option>

<option></option>

</select>

</div>

文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%auto

<form role="form">

  <div class="form-group">

    <textarea class="form-control" rows="3"></textarea>

  </div>

</form>

复选框checkbox和单选择按钮radio      水平排列加inline

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

---恢复内容结束---

可以用class=“h1”等给元素加h1样式

<h>------<small>----</small></h>     <small>是副标题

class="lead"     强调文本,突出显示

可以用class=“h1”等给元素加h1样式

<h>------<small>----</small></h>     <small>是副标题

class="lead"     强调文本,突出显示

时间: 2024-10-10 23:43:52

在慕课学习Bootstrap的相关文章

快速学习bootstrap前台框架

W3c里的解释 使用bootstrap需要注意事项 1.  在html文件第一行要加上<!doctype html>[s1] 2.  导入bootstrap.min.css文件 3.  导入jquery.js[s2] 与bootstrap.js[s3] 快速学习 1.  登陆http://www.w3cschool.cc/bootstrap 2.  查看里面解说 3.  通过以下实例了解如何学习w3c的bootstrap.(一个警告框的实例) <!DOCTYPE html> <

快速了解Bootstrap—在MVA学习Bootstrap

©版权声明:本文为博主原创文章,如需转载请注明出处. Bootstrap 是目前最流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB项目. 如果您希望在几个小时内对Bootstrap有一个直观的了解,观看微软虚拟学院(MVA)的视频教学Building Responsive UI with Bootstrap或许是个不错的选择. 这是一个大概六个小时的视频教学,分为七个部分.除了视频,每个部分还配有PPT和小测验.视频是英文的,配有英文字幕.通过这几个小时的学习

学习Bootstrap的必要性

1.节省时间 利用Bootstrap,你将有更多的时间用来挣钱.Bootstrap库中包含很多现成的代码片段,这些代码可为你的网站增加更多活力.Web开发者不必再花费时间.费力地编码,只需找到合适的代码,插入到合适位置即可.此外,CSS利用LESS编写,很多样式和设计都已设计完成. 2.定制化 Bootstrap很重要的一方面就是你可以将它据为己有.你可以留取框架中需要的部分,抛弃不需要的.Bootstrap整体允许你根据自己的需要,裁剪自己开发的项目. 3.设计方面的因素 网格系统 对页面进行

bootstrap插件学习-bootstrap.carousel.js

先看bootstrap.carousel.js的结构 var Carousel = function (element, options){} //构造器 Carousel.prototype = {} // 构造器原型 $.fn.carousel = function ( option ) {} //jQuery原型上自定义的方法 $.fn.carousel.defaults ={} //默认参数 $.fn.carousel.Constructor = Carousel // 重写jQuery

跨平台前端框架学习——bootstrap,jquery,angular

按照我的理解前端开发的框架可以分为三种类型: UI框架:这部分如bootstrap,定义了一套css样式风格,帮助布局,提供了若干可以直接使用的组件,我们可以只使用它提供的组件而不用自己设计 UI 工具类框架:如jquery(pc端)/jquery mobile(移动端),虽然准确来说它们更是类库,但它们集成了有关 DOM操作,ajax交互,事件和动画的工具,能够帮助解决浏览器兼容,这里姑且当做框架 组织代码的框架:如angular,它不提供jquery一样(类似插件)的功能,它帮我们更好地组织

桂电在线-转变成bootstrap版2(记录学习bootstrap)

下载bootstrap框架https://github.com/twbs/bootstrap 或者 http://getbootstrap.com/ 拷贝模板 修改基本模板 语言zh-cn,标题,描述 修改css,js,网站logo路径 修改后 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv=&q

JMS-消息中间件的应用02-安装ActiveMQ-来自慕课学习-新手学习

What is ActiveMQ?       -----突然好想打英文,好奇怪 请看来自官网的介绍: Apache ActiveMQ ? is the most popular and powerful open source messaging and Integration Patterns server. Apache ActiveMQ is fast, supports many Cross Language Clients and Protocols, comes with easy

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列出了创建基本表单的步骤: 向父 <form> 元素添加 role="form". 把标签和控件放在一个

3.继续上面的学习bootstrap

Bootstrap Images http://v3.bootcss.com/css/#images 1   <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> 必需的 alt 属性规定图像的替代文本,如果该图像无法显示. 当用户无法查看图像时(可能由于网速太慢.错