1
00:00:01,050 --> 00:00:08,220
Hello in the bootstrap, bootstrap, bootstrap for video, I am going to show you interaction, so I

2
00:00:08,220 --> 00:00:13,860
will provide a link to the official page on the bootstrap website shows you everything that you can

3
00:00:13,860 --> 00:00:14,010
do.

4
00:00:14,040 --> 00:00:19,800
I'm pretty much going to cover all of this anyway, but there's a few extra classes that you can use.

5
00:00:20,040 --> 00:00:24,580
But once you've understood what's but in this video, you're all good to go.

6
00:00:25,020 --> 00:00:31,230
OK, so let me create per PAETEC any sort of element you want.

7
00:00:31,500 --> 00:00:33,610
And I want to put the text selectable and.

8
00:00:35,660 --> 00:00:43,180
Freenode advocacy on double click on select individual characters and then copy and paste them like

9
00:00:43,250 --> 00:00:51,470
so I'm sure you've been on websites where you can't select from content, know for me as the user something

10
00:00:51,470 --> 00:00:52,310
that can be annoying.

11
00:00:52,310 --> 00:00:59,220
But if that's the situation that you want that experience to do, that what you can do.

12
00:00:59,240 --> 00:01:03,540
So let me create a novel one and show you the difference a little bit.

13
00:01:03,630 --> 00:01:11,750
PAETEC and if you put the class of user Dasht select dash non.

14
00:01:13,200 --> 00:01:23,550
Not selected, not selectable for a reload, I think, to double click this one for Alkon, double click

15
00:01:23,560 --> 00:01:26,580
this one, so I can't actually select it.

16
00:01:26,850 --> 00:01:29,070
So that's a non selectable class.

17
00:01:29,070 --> 00:01:31,200
And like I said, I'll provide you with this.

18
00:01:31,200 --> 00:01:37,710
You can do select or select auto, select non, and you can also do some cool stuff with links as well.

19
00:01:37,980 --> 00:01:43,860
So, you know, like a demo link, you know, that sort of stuff.

20
00:01:44,160 --> 00:01:56,820
If I put a P tag and if I put an anchor tag on Bitaraf equals on a hash tag, I don't really go anywhere

21
00:01:57,090 --> 00:02:00,900
for class equals p e dash none.

22
00:02:01,290 --> 00:02:03,630
This says it is not clickable.

23
00:02:04,230 --> 00:02:08,550
And on a tab, this index equals negative one.

24
00:02:08,730 --> 00:02:15,090
This is just so we can't be TABD onto and then we've got area dash disabled equals.

25
00:02:15,720 --> 00:02:16,080
True.

26
00:02:16,800 --> 00:02:18,570
And that was going to say.

27
00:02:23,430 --> 00:02:33,990
This link and not be clicked, so if I reload it, I think we've got this link we can select.

28
00:02:34,000 --> 00:02:39,720
If you don't want that, you just use a select dash, not on either the P tag or the younger tag, depending

29
00:02:39,720 --> 00:02:42,260
on what you don't want selectable for Translocate.

30
00:02:42,480 --> 00:02:44,520
I can't actually click it.

31
00:02:44,520 --> 00:02:47,400
So it indicates visually datalink.

32
00:02:47,400 --> 00:02:51,840
So you might want that to the user and maybe they need to perform some action.

33
00:02:52,020 --> 00:02:57,350
Maybe film content needs to be filled out before they can actually click on a link.

34
00:02:57,750 --> 00:02:59,790
Something to bear in mind.

35
00:02:59,880 --> 00:03:02,730
Let me close this because I want to reopen that, though.

36
00:03:02,730 --> 00:03:08,070
I can't select a, you know, a non selectable piece of text like this.

37
00:03:08,400 --> 00:03:14,190
It is not a foolproof version of security in terms of being able to copy and paste it.

38
00:03:14,250 --> 00:03:20,160
Obviously, you can manually type by ignoring that in many of the lower content and that would be awkward

39
00:03:20,160 --> 00:03:21,180
to copy and paste it.

40
00:03:21,180 --> 00:03:22,670
I mean, manually type it out.

41
00:03:22,980 --> 00:03:24,920
But what you can do, you can just right.

42
00:03:24,930 --> 00:03:29,400
Click or the user could do go to inspect and just copy that.

43
00:03:29,520 --> 00:03:30,180
And there you go.

44
00:03:30,180 --> 00:03:36,180
Of course, copied and pasted to bear in mind this doesn't prevent the user fully from copying it.

45
00:03:36,330 --> 00:03:38,430
It's more just it's not selectable.

46
00:03:38,580 --> 00:03:41,820
And you may not want that for security purposes.

47
00:03:41,880 --> 00:03:44,790
You might want that just from a interaction perspective.

48
00:03:45,030 --> 00:03:51,450
Maybe you have a website that youre the user is going to be clicking a lot on the page and maybe Dragon

49
00:03:51,600 --> 00:03:57,810
and the some text on there, basically some instruction maybe is possibly a game or some sort of interactive

50
00:03:57,810 --> 00:03:58,740
experience like that.

51
00:03:58,920 --> 00:04:04,080
And you don't want them because they're constantly clicking and dragging the mouse to be selecting text

52
00:04:04,080 --> 00:04:04,740
randomly.

53
00:04:06,030 --> 00:04:12,090
Again, it might just be from an interaction perspective and less of a security perspective.

54
00:04:12,090 --> 00:04:13,800
Hence why the code interactions?

55
00:04:14,240 --> 00:04:14,930
So that's it.

56
00:04:14,970 --> 00:04:17,340
If you have any questions, feel free to call me a message.

57
00:04:17,340 --> 00:04:21,240
And as usual, I look forward to seeing you in the next video.