为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(基础)

  • 段落(正文文本)

    段落是排版中另一个重要元素之一。在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行*/

    body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }


    另外在Bootstrap中,为了让段落p元素之间具有一定的间距,便于用户阅读文本,特意设置了p元素的margin值(默认情况之下,p元素具有一个上下外边距,并且保持一个行高的高度):
    /*源码请查看bootstrap.css文件中第467行~469行*/

    p {  margin: 0 0 10px; }

    如果你对CSS预处理器有所了解,那么你完全可以根据Bootstrap提供的预编译版本LESS(或者Sass)进行自定义排版设置。在Bootstrap中,排版设置的默认值都存在variables.less文件中(Sass版本存在_variables.scss中)的两个变量:

    LESS版本:

    @font-size-base: 14px; @line-height-base: 1.428571429; // 20/14

    Sass版本:

    $font-size-base: 14px !default; $line-height-base: 1.428571429 !default; // 20/14

    第一条语句用于设置字体大小,第二条语句用于设置行高。系统默认使用这两个值产生整个页面相应的margin、padding和line-height的值。换句话说,你只需要修改这两个变量的值,然后重新编译,就可以自定义自己的Bootstrap排版样式。(有兴趣的同学可以尝试一下,此处对于LESS或Sass版本运用不做过多阐述)。


    查看全部
  • Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。

    查看全部
  • 在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

    查看全部
  • 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>
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2019-01-10

  • 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>
    查看全部
    1 采集 收起 来源:基本的HTML模板

    2019-01-10

    1. 表单验证:form-group has-success/warning/error

    2. 加上验证图标:加上has-feedback类和

      <span class="glyphicon glyphicon-remove form-control-feedback"></span>

    查看全部
  • 想要拥有被禁用或者只读效果,表单元素必须加上form-control这个类。注意:fieldset里面的input如果被legend包裹,则无法禁用,但然具有禁用的样式

    查看全部
  • 焦点状态是通过伪类“:focus”来实现

    但需要给控件添加类名“form-control”

    file、radio和checkbox控件在焦点状态下的效果也与普通的input控件不太一样

    查看全部
  • bootstrap :
    如果想让一个段落p突出显示,
    可以通过添加类名“.lead”实现,
    其作用就是增大文本字号,加粗文本,
    而且对行高和margin也做相应的处理


    查看全部
    0 采集 收起 来源:强调内容

    2019-01-03

  • bootstrap中的js插件依赖于jquery 

    jQuery 要在 bootstrap前引用

    查看全部
  • bootstrap: 搭建web页面的Html css JavaScript 的 工具集

    查看全部
    0 采集 收起 来源:Bootstrap简介

    2018-12-25

  • 不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示

    会跑到下一行

    查看全部
    0 采集 收起 来源:列偏移

    2018-12-25

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!